Submit form with Javascript doesn't work

Question

I have a simple form for uploading a file. If I use an ordinary submit button, everything works as expected:

<form id="mainform" method="post" action="/" enctype="multipart/form-data">
...
<input type="submit" id="submit" value="Analyze File"/>
</form>

But if I change it to an ordinary button and use Javascript to submit the form, nothing happens:

<input type="button" id="submit" value="Analyze File" onclick="document.getElementById('mainform').submit()"/>

I verified that the onclick handler really is getting called, and looking up the form works correctly. For example, if I change it to onclick="alert(document.getElementById('mainform').action)", the alert comes up as expected and shows the target URL of the form. But for some reason, the call to submit() simply doesn't submit the form.

Answer 1

The issue is your submit button. Its id is submit, which means that document.getElementById("mainform").submit represents the button with ID of submit, not the submit function.

You just need to change the ID for that button, and you're all good.

Answer 2

You have a naming conflict between the .submit() method and the:

<input type="submit" id="submit" value="Analyze File"/>

By having that id, a reference to it is being assigned to the submit property of the <form>, which replaces the method.

If you rename the <input>, you should be able to .submit() as expected:

<input type="submit" id="mainform_submit" value="Analyze File"/>