Difference between onclick="document.forms[0].submit();" and form submit - javascript

Inside a form I have a button. What is the difference between when I submit the form via JavaScript like this
<button onclick="document.forms[0].submit();">
and when I submit it like this
<button type="submit"></button>?
The first one works for me with most browsers except webkit-based. The latter works fine as well. No difference in functionality is apparent to me. Is there one?

The first example:
<button onclick="document.forms[0].submit();">
...will do two things:
Its onclick will submit the first form in the document (i.e., the one specified by the 0 index in forms[0]).
It will submit the form it is in (if it is in a form) because a button with no type attribute specified will be a submit button by default.
This two-step double-submit behaviour can be seen in this quick-and-dirty demo: http://jsfiddle.net/fMwuX/ (and is likely to lead to weird behaviour that might be a bit confusing to debug). If the button isn't actually in a form then this won't be a problem.
The second example:
<button type="submit"></button>
Will simply submit the form it is in (if it is in one).
In my opinion the second option is definitely preferable for several reasons, including but not limited to:
It will work even if the user has JS disabled.
It doesn't hard-code a form index with forms[0].
It is shorter and clearer.
It won't clash with other form submit validation.

The javascript example will submit the first form in your HTML document while the second example will submit the form which wraps that button.

documents.forms[0].submit will trigger the submission of the first form in your HTML page. Indeed, documents.forms contains all the forms of your document. You can access them with their name attribute or their index.
Then, the input of type submit in a form will trigger the submission of his parent form.

As you've discovered, the first one makes the page not work in some circumstances, and is - for this, and other reasons - generally considered bad practice. Use the second.

Related

How do I add an element to form data before submitting it?

NOTE: This is a very specific question regarding Javascript and HTML forms. I have searched and cannot find an answer for this particular question, which involves the Dojo framework, and does not involve JQuery. Please do not mark this as a "duplicate" of a JQuery question, because it does not involve JQuery.
I need to submit a form by clicking a button which is of type "button", not type "submit". However, I also need to include the name of the button that was clicked, which is not normally submitted under these circumstances. The reason for this change (from the original "submit" functionality) is because there can be upwards of a dozen buttons on this dynamic form and if they are all "submit" buttons, the users will press "enter" to move to the next field and will be confused when the form does something unexpected (like submitting) instead of moving to the next field.
The method I have come up with to do this is to change all the button type='submit' tags to button type='button' controls. I then added this small Javascript fragment (we use the Dojo library so this is Dojo syntax):
query("button[type='button']").on("click",function(e) {
dom.byId("myform").submit();
}
This works but on the server side, it's not processed correctly. When a submit button is pressed, the form data (parsed by Chrome) looks like:
myInput1: 1
myInput2: Some Data
_button_Button23: addSomeFields
the last line is the button name and ID. When the form is submitted using the Javascript above, the last line is missing:
myInput1: 1
myInput2: Some Data
I need to add the last element to the form data before submitting it.
I have searched for this information but unfortunately all the existing examples use Jquery, which is not available to me in this case. How can I add this information to the form data using either Dojo or regular Javascript?
you could add the button element to the form on submit, or create an hidden input element and add that to the form
var form = dom.byId('myform');
form.appendChild(e.target);
form.submit();

Why do some forms auto-submit on clicking the enter button and others do not?

Problem:
I never specify a submit button, as I use ajax to submit my forms, but some forms have an auto-submit feature regardless.
Background:
Throughout my application I have instances when clicking the enter button will auto-submit a form and other instances where it will do nothing. For example; there are times where I will need to capture the "enter" button to get an auto-submit but other times where it seems to just happen on it's own and I have not found the pattern. Except that the dynamically created forms seem to have the auto-submit feature but static ones do not? Does anyone else have a similar issue.
Example:
All of my forms have the submit button removed and I specify no target or action elements as seen below. All of the forms have their data transmitted through AJAX.
<form id="ajaxForm">
<input>
</form>
<button>ButtonOutSideForm</button>
Not looking for a way to prevent auto-submit
I already know about "onsubmit = return false" and e.preventDefault. I'm not looking for a way to disable auto-submit. My question is why does it's presence seem arbitrary. Thanks.
As LouD pointed out. Some browsers will auto-submit if the form only contains one input element.Why does forms with single input field submit upon pressing enter key in input

Javascript How to auto submit

I am writing a script to make a page auto submit twice. The script should first press the first submit button, then have a small delay and press the second. Both are on the same document.
What I am doing is: get the document, then use document.GetElementByID('id_button').click(), and have timeOut for a delay to the second click. Thing is, the first button works fine, but the second won't work. I don't know why. Is my approach correct?
Have the action on the form reflect the state.
/Page.HTML
/Page.HTML? washere=true
/Page.HTML? washereagain=true
That can be identified by your script
What I am doing is: get the document, then use document.GetElementByID('id_button').click(),
Not all browsers support the click method for submit buttons, so your strategy will fail for a good number of browsers in use.
You can submit the form by calling its submit method. If you want to auto-submit it a certain number of times (which seems a pointless exercise, but that's your choice), set a cookie each time you submit the form and check it when the page loads to see how many times it's been submitted.

What HTML Form Action to use when no data is actually being sent?

I am working on learning JQuery and creating a simple HTML / JS calculator. I used a standard HTML form to allow the user to enter the data they want calculated and when the user clicks submit my JS / JQuery calculates and spits out the answer.
My question is what would be the semantically correct way to deal with the HTML form action being that Im not actually posting any data? I dont want to leave it default because when I click my to trigger an event it changes the URL and I dont want to use POST because Im not posting anything. Any help is appreciated!
I would replace the submit button with a normal button, and prevent the form being "submitted" at all. then use javascript to do the calculations on button click. This way the form never gets submitted, and you don't need a method or action at all.
If you really want to do a request at all, you probably just want to do a GET...check the list of HTTP request methods here to see if another one would better fit your needs.
If you are doing everything with javascript, though, you shouldn't be submitting anything at all. Try changing the submit button into a link (or just a regular button) and bind your calculator logic to its click event.
Don't specify any action(Default is GET). Use an html button which would call the js function on the click event. That would do the work on client side
You don't actually need to put input elements inside a form. Since you don't intend to submit the form, I would just omit it entirely.

HTML - Which form element caused submit

I'm debugging a weird problem with two simlar search forms - when user types some search criteria in a text box and hits enter, one form returns results and another just reloads. And it happens only in IE - FF treats both forms as expected. I suspect that hitting enter is triggering onclick for one of the search buttons in one case and something else in another.
How do I find what form element caused submit event?
Thanks,
Andrey
Sounds like the single textbox form bug in IE.
To get around it, you can use Javascript to handle the enter key press, or just insert a blank hidden textbox. Lame, I know.
I suspect that hitting enter is triggering onclick for one of the search buttons in one case and something else in another.
Yes. Browsers may, largely at their whim, treat enter as clicking on a submit-button, just submitting a form, or nothing. Put general form submission stuff in form.onsubmit, rather than an onclick on the first submit button.
You could sprinkle your form elements with onclick events to set a hidden form variable with a different value per element, then sniff the results either with a DOM inspector or through something like Fiddler.
There may be a way to simply have a form onsubmit() event that you can extract the triggering element from the event object, but I'd have to dive into the docs to see if this is possible... if I get chance I'll do some looking.
I think I may help you much If you provide your two forms code. However, check to see for the following submit button code:
<input type="submit" value="Submit">
When you use this, then when you press Enter among the corresponding form, the form will be submitted. If you wish to check something before submitting you can use JavaScript Function like the following:
<input type="button" onclick="javascript_function_name();" value="Submit">
Thanks. If this can not help you, please express the situation more briefly.

Categories

Resources