ansaurus

Question

How to reliably submit an HTML form with JavaScript?

Answer 1

A:

So, is there any other way to submit an HTML form using JavaScript?

Update: Take the advice of Jerome (elsewhere in this thread). I'll leave this answer up for historical interest, but it isn't as nice or reliable as Jerome's solution.

The following approach is ugly, but works.

    var x = document.forms.example;
    var f = document.createElement('form');
    f.action = x.action;
    f.method = x.method;
    f.enctype = x.enctype;
    for (var i = 0; i < x.elements.length; i++) {
        var el = x.elements[i];
        if (el.name !== "submit") {
            f.appendChild(el);
        }
    }
    x.parentNode.replaceChild(f,x);
    f.submit();

David Dorward 2010-01-04 14:50:26

Answer 2

+14 A:

Create another form in JavaScript, and apply its submit() function on your form:

<html>
    <script>
        function hack() {
            var form = document.createElement("form");
            var myForm = document.example;
            form.submit.apply(myForm);
        }
    </script>

    <form name="example" id="example" method="get" action="">
        <input type="hidden" value="43" name="hid">
        <button 
          type="button" 
          name="submit" 
          onclick="hack();return false;"
        >Submit</button>
    </form>
</html>

Jerome 2010-01-04 14:56:40

That's really rather clever. +1.

David Dorward 2010-01-04 15:06:04

+1 clever indeed

Pablo Fernandez 2010-01-04 15:16:52

I've never run into apply ... +1!

Sean Vieira 2010-01-04 15:18:33

Great use of apply! Blows my mind. +1

pablobm 2010-01-04 15:38:42

Pleased to help you, that was a fun challenge. If this answer was helpful, please accept it by clicking on the green check on the left. Thank you!

Jerome 2010-01-04 18:20:26

Don't worry, I just wanted to wait in case somebody came up with a solution that wasn't a hack, although yours was beautiful anyway. I hereby declare ye winner! ;-)

pablobm 2010-01-04 22:50:45

Thank you pablobm :)

Jerome 2010-01-05 07:35:46

Answer 3

A:

In Firefox

formElement.constructor

returns "HTMLFormElement". So you can submit the form by using:

HTMLFormElement.prototype.submit.call(formElement)

You can extend this to other browsers as well:

formElement.constructor.prototype.submit.call(formElement)

Alsciende 2010-01-04 14:56:43

However, not all browsers expose `constructor` on form elements (or any other host object, for that matter).

kangax 2010-01-04 15:05:34

Obviously this is not cross browser

Pablo Fernandez 2010-01-04 15:14:17

Answer 4

A:

The best idea is to not name a submit button 'submit', but you can get around it-

function reallysubmitform(n){
 n= n || 0;
 var f= document.forms[n];
 f.onsubmit= function(){
  return true
 };
 var sub= f.elements['submit'];
 if(sub && sub.type== 'submit') sub.click();
 else f.submit();
}

reallysubmitform()

kennebec 2010-01-04 15:06:57

Answer 5

A:

Submiting a form using JavaScript cannot by design be safe.

Your users can browse your web site on their phone, have disabled JavaScript, tweaked the source of your page, or using Lynx.

In any case, for accessibility purposes, you will need the good old HTML submit button and some input checks on the server side.

Benoit Vidis 2010-01-04 15:08:33

Of course, but sensible enhancements can still be added that make use of these features. As for "safety", I wasn't asking for it: it was reliability that I wanted, in the form of a stable interface

pablobm 2010-01-04 23:05:23

ansaurus

tags:

views:

answers:

How to reliably submit an HTML form with JavaScript?

related questions