Basic Javascript: onclick event not working - php

Given this simple javascript function:
function update_cart() {
alert("--update--");
document.form1.command.value="update";
document.form1.submit();
}
and this button at the bottom of my form:
<input type="submit" value="Update" onclick="update_cart()" />
The data in the form is 'submitted' to the new URL. but the update_cart function is never called. I know because I never get an alert box, and the URL reads...?c=Albania&m=....
Also, the form element
<input type="hidden" name="command"/>
does not get posted to the URL, either. URL reads ?command=&c=Albania...
I have tried the following: changed onclick to onsubmit, checking $_REQUEST variables, cutting and pasting the code from known working pages.
I'm at my wit's end, and would be grateful for any help!
Oh, yes: same behaviour in firefox 6, Opera 11.5, & IE7. I'm running WinXP SP3.
Thanking you,
Sadhu!

Once try
<input type="button" value="Update" onclick="update_cart()" />
instead
<input type="submit" value="Update" onclick="update_cart()" />
if you want that for 'submit' type then go with 'Allen Liu' answer

enter code hereif you wane to change sth when onsubmit, you need to do these changes before form's submitting. so you need to add these opeartion to the "onsubmit" event of the form, rather than the "onclick" event of the submit button.
like this:
<form name="toSubmit" onsubmit="update_cart();"><input type="submit" name="btn" value="hello"/></form>

If you want the script to run on submit of form, use:
<input type="submit" value="Update" onsubmit="update_cart()" />
The onsubmit event is usually used to run some validation script. If the validation returns true, the form will submit. If it returns false, the form does not submit. In your case, the script is coded to submit the form so no return boolean value is necessary.
Otherwise, I would not give your button the submit type if it really doesn't submit the form. You can simply use button tags with the onclick and that should work:
<button onclick="update_cart()">Update</button>

First of all there is no need to change your html; see my demo.
On every click on a submit button, first the click-handler (if exists) will be started, then the submit-handler (if exists) (which should be in the form tag) and then the action of the form will be executed. This procedure will be only stoped, if a handler returns false.
But why will your javascript function update_cart not be called?
I think it could not be found, but I don't why. Can you bind the function to the window dom element only for testing (like in my demo)?
P.s.: you don't need to submit the form in your click-handler (if you don't return false). You can remove the line: document.form1.submit();.
P.s.: it will be better not to use a click-handler on the submit-button, instead use a submit-handler in the form tag (see my demo2).

Related

AJAX submit function with alert does not work

im trying to get an ajax submit function to work. i cant find what the issue is here. the button for submit is inside a table inside a form
i tried using alert to see if its working but it still not.
the method-
$("#submit").submit(function(){//comparing the total quoted hours with duration of time selected
alert("DEMO TEST");
// code for the comparing values goes here but that's another
//story
});
the submit button-
<input type="submit" name="submit" value="submit" id="submit" onclick="index.php">
obviously the alert should pop an alert with DEMO TEST.
i dont know where im going wrong
It just because of you are calling submit event. When you call submit event your form will submit. you need to take id and class of form like.
<form action="" id="formsubmit">
<input type="submit" value="Submit"> //Remove name="submit" onclick="index.php"
</form>
$("#formsubmit").submit(function(){
alert("DEMO TEST");
});
You have to point the .submit to your form, not your button.
More info on how submit works on jQuery https://api.jquery.com/submit/
jQuery on click event is getting triggered first as onclick="index.php" so remove it and submit the form then it will work.or if you want that event to be trigerred you should return true. or you can submit form using jQuery using .submit() and after submitting the form you can use location.href

Submit button showing in GET URL

I'm having a problem with my HTML GET form that's connected to a PHP script, so, basically, when the action is done I see the SUBMIT button value in the URL, so it's like this http://url.com/?valueI=Want&submit=Submit+Value.
How do I stop that from happening?
Remove the name attribute from the submit element to prevent it from being passed in the query parameters.
See: Stop the 'submit' button value from being passed via GET?
This is the nature of GET requests. The submitted values, aka Query String, are shown as part of the URL after a ? suffixing the page URL.
If you don't want it to show up, use POST method, or make a script that submits using Ajax.
Now if the question is only about the text in the submit button being shown, if you don't want it to get submitted along with the rest of the form all you have to do is not give it a name.
<input type="submit" value="Send Form">
No name="..." in the tag.
you need to set the form method
<form action"/your/path" method="post">
...
</form>
You can use button tag to submit the value using GET method.
<button type="submit">Submit</button>
do something like:
<form action="myfile.php" method="get">
(your form elements here)
<input type="submit" value="Submit" />
</form>

When i pressed Enter in keyboard it submits the form without going through the javascript?

When i Pressed Enter/Return in Keyboard it submits the form without going through my javascript function in the Submit button of the Form.
I'm thinking of manipulating the keyboard command when pressed but i think that would take time.
so, is there any short way of doing so? like an event in the form/button?
Any Answer will help.
Thank you.
PS: sorry for bad explanation.
Assuming "your JavaScript function" is assigned to the submit button's click handler, it's obvious why it didn't work: you didn't click the submit button. The code to handle a form submission should go onto the form's submit handler. It will trigger from both submit buttons and Enter key.
One more critical piece of info: your handler has to return false, or call preventDefault on the event; if you don't, the form will still submit after your code exits.
Take a look at the documentation:
http://api.jquery.com/submit/
You can do something like this:
HTML
<form id="form" action="process.htm">
<input id="name" type="text" value="Joe" />
<input type="submit" value="Say hi" />
</form>
JavaScript
$('#form').submit(function() {
alert('Hi there, ' + $('#name').val());
// If you uncomment the below, it will submit
return false; // Prevent submit
});
The return false will prevent it from submitting after your JavaScript submit function finishes, if desired.
Live example:
http://jsfiddle.net/58hfn/
Hope this helps.
Assign a handler to the form onsubmit-
<form name="forma" onsubmit="validate()"
It could be that your javascript function contains some errors. To see if there are some javascript errors view the Chrome Console Ctrl+Shift+i

HTML Javascript forms, and a php script - Simple question, help! what does this code do?

So I have this simple form:
<form action="includes/process.php" method="post" name="standard_use" id="standard_use" enctype="multipart/form-data">
<button onclick="dofunction(); return false;">Do it!</button>
<input type="file" id="upload_file" name="filename" style="float:left;width:70%;" size="42"/>
</form>
So what happens really when the button is clicked ?
Is it that the php file is called ? does it not ? the javascript is called before ?
Anyone can shed some light on this ?
Thanks !
Well, when you hit the button the following events occurs:
You send a REQUEST to the server
The php codes evaluates the request and runs some codes
Finally it returns back a RESPONSE which you see as a web page
Javascript is a client-side script which means that whenever you make an action on the page, the code runs. For instance, when you click the button, before sending the request javascript will work. You may, for instance, place a function that will be triggered when you hit the button which checks the form and either approves the form or shows the error messages
EDIT
As far as your comment is concerned:
Yes, javascript runs first when you hit the submit button. Php runs only when you submit the form and make a request to the server.
Consider this example: (I am better at explaining things with examples:)
<form action="somepage.php" onsubmit="return checkMe()" method="POST">
<input name="firstname" id="fn" value="" type="text" />
<input type="submit" value="Submit" />
<script type="text/javascript">
function checkMe(){
var tb = document.getElementById("fn")
if(tb.value == "Alex") return true;
else return false;
}
</script>
</form>
So basically, when you hit the button and try to submit the form, the javascript will first check whether the name provided in the textbox is Alex or not, if it is not then it will not submit the form. If it is Alex then it will submit the form and then the form will redirect the user to somepage.php. Finally, the php codes will work in somepage.php and the page will be rendered again.
What happens is that only doFunction() javascript function is invoked and nothing more.
However, it might be possible that this javascript function invokes "submit" event on the form and the request is sent (what you described as "php file is called").
Your code just trigger javascript event and your function. To submit a form you need an
<input type="submit" value="Submit" />
or a button, which default type is submit (thx davin)
<button value="Submit" />
However as far as you return false in your javascript code your form won't be submitted even with the submit button.

AJAX: How do I make the button submit after I press "Enter"?

Currently, I am using an with ajax to update my mysql. Now, I have to click on the button with the mouse for it to work (I am using onclick), but how can I make it accept the "enter" button? My guess is... Enter isn't working because isn't there. If I leave it there, my ajax just doesn't move.
Use a <input type="submit> instead of a <button> or type="button" and then hook into the forms' onsubmit event.
For example:
<form action="#" onsubmit="alert('Hello world!'); return false">
<input type="text" name="myText" id="myText" />
<input type="submit" value="Submit" />
</form>
The return false ensures that the browser doesn't actually submit a form.
If you're in an HTML form, then enter will submit the data. You only have to write in the onsubmit event handler to do your ajax calls.
If you're not in an HTML form, check for the key press event handler. Maybe it's what you're looking for.

Categories