pablobm pablobm - 5 months ago 7
Javascript Question

How to reliably submit an HTML form with JavaScript?

Is there a way to submit an HTML form using JavaScript that is guaranteed to work in all situations?

I elaborate. The common approach seems to be:

formElement.submit()


That is all good and well except for one thing. Fields of a form are available as attributes of
formElement
, so if there is a field with name or id "text1", it can be accessed as
formElement.text1
.

This means that if an elements is called "submit" (be it its name or its id), then
formElement.submit()
will not work. This is because
formElement.submit
won't be a method of the form, but the field with that name. Unfortunately, it's fairly common that submit buttons have a "submit" name or id.

Two examples to illustrate my point. First, the following will NOT work, because an element of the form has name "submit":

<form name="example" id="example" action="/">
<button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>


The following will work though. The only difference is that I have removed the name "submit" from the form:

<form name="example" id="example" action="/">
<button type="button" onclick="document.example.submit(); return false;">Submit</button>
</form>


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

Answer

Create another form in JavaScript, and apply its submit() method on your original 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>

form.submit is the reference to a fresh and clean submit method, and then you use apply(myForm) to execute it with the original form.