Submit a function programmatically even if a field is named "submit"

Question

I need to write Javascript code that always submits a form. The first form I had to submit looked like this:

<form action="http://www.example.com/test">
  <input type="text" name="name">
  <input type="submit" value="Send data" name="submit">
</form>

(Imagine that formNode is document.getElementsByTagName('form')[0])

So, formNode.submit() didn't work because 'submit' is basically taken by the "Send data" button (!).

I then thought that I should use the form's action (somebody could use action as a name too!).

I then thought about focussing on the first input field I could find, and simulating an ENTER keypress. But, my initial tests didn't work and decided to ask here before doing what I normally do (bang my head against the wall for hours).

So: What's a good, reliable way to submit any form regardless of how it's made, regardless of braindead names to fields, etc.?

Or, maybe: how do I get the form's submit() function reliably, regardless of fields given the same name, so that I can submit the thing?

Answer 1

One approach is to first test if form.submit is a submit button and if it is, programmatically click it:

// Probably need better testing for whether it's a button or input or whatever
// this is just a proof of concept
if (form.submit && typeof form.submit.tagName == 'string' && form.submit.click) {
  form.submit.click();

} else {
  form.submit();
}

This appears to work in IE at least, however you'll need to test widely to determine support in other browsers. You may need to dispatch a click event on the button (using both IE and W3C models for dispatching events), or use other methods for those that don't support the click method.

Another approach is to add a submit button and click it:

<form id="f0">
  <input name="foo" value="foo">
  <input type="submit" name="submit">
</form>

<button onclick="
  var form = document.forms.f0;
  var button = document.createElement('input');
  button.type = 'submit';
  button.value = 'submit button';
  form.appendChild(button);
  button.click();
">Add submit button and click it</button>

Users should never see the button as browsers generally wont update the UI until a function has finished. By that time the form should have been submitted, so again no UI update.

This should also cause a submit event to be dispatched, so submit listeners should be called. It may be best to give the button a style of display:none just in case the submit is cancelled—you don't want the button to appear.

Also need to check for the extra button in case it has already been added.

Answer 2

Don't use name="submit". Because that just overwrites the form's .submit() method, since you can reference a form's field's (DOM Elements) via name. This was the cause of your problem. If you need to name the submit button, use another name besides those found under Object.getOwnPropertyNames(document.forms[0]) list (these are all taken/reserved).

If your example was in the form of:

<form action="http://www.example.com/test">
    <input type="text" name="inputname">
    <input type="submit" value="Send data" name="submitbutton">
</form>

Then you can submit your form using formNode.submit() as intended. You may reference the text box and submit button's DOM Element with formNode.inputname and formNode.submitbutton, respectively. Check with your console log to see this. :)