Menu
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?
648
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.
110
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
