Question

I have a Form which contains another form.
When I’m submitting the nested form through javascript, It is submitting twice in Internet Explorer, but only one in any other browser.
How to submit the nested form to send only one request in IE.

Edit:

I’m using onchange event to submit the nested form.. so how the click can work in my case?

Answer 1

You really shouldn’t be nesting forms, but you can stop the propagation of the event. For instance, if your click event is submitting the outside form, do the following:

$("form").on("click", function(e){
   e.stopPropagation();
});

Be sure to read the notes regarding event delegation.

Also, it’s not necessary to nest forms. You can have a submit button within one form submit an entirely different form if you like; just use the form attribute on the button itself:

<form id="foo">
    <!-- Within #foo, but I submit #bar -->
    <input type="submit" form="bar" value="Within Foo" />
</form>

<form id="bar">
    <!-- Within #bar, but I submit #foo -->
    <input type="submit" form="foo" value="Within Bar" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

I should note that the form attribute isn’t supported like this in Internet Explorer 10. You could patch this logic though with some simple logic like this:

$(":submit[form]").on("click", function ( e ) {
    $( "#" + $(this).attr("form") ).submit();
    e.preventDefault();
});