Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome is eating my first inner <form> -- why?

Thanks to ASP.NET I get to learn the intracacies of getting away with <form> tags inside <form> tags. I set up what I thought was a simple DOM that isn't working:

<form id="Superform" action="javascript: return false;">
<form id="Subform1" action="javascript: return false;">
    form1
</form>
<form id="Subform2" action="javascript: return false;">
    form2
</form>
</form>

In this example, IE8 seems to work normally, but Chrome (18.0.1025.142 beta-m) seems to make Subform1 disappear. Does anyone know why? Is this a Chrome/webkit bug? I made a jsFiddle to test it - if you have other browsers handy, I'm curious of those results too.

Try the example at http://jsfiddle.net/weQmk/9/.

In IE8 I get:

Forms my browser sees: 
Superform
Subform1
Subform2

But in Chrome:

Forms my browser sees:
Superform
Subform2
like image 572
Scott Stafford Avatar asked Mar 30 '12 17:03

Scott Stafford


1 Answers

Forms cannot be nested in that way. On encounter of the closing </form> tag, the first open form is closed.

This is also illustrated in this fiddle: http://jsfiddle.net/weQmk/11/

like image 78
Rob W Avatar answered Sep 20 '22 12:09

Rob W