CODEWITHSUNDEEP
internet-explorer-10
cashmere
cashmere

Reputation: 925

IE10 issue with form tag

I have div in html

<div id="test"></div>

If I do 

$('#test').html(' <form method="GET" action="whatever"> <input type="text"/> </form>')

In IE 10 I will get

<div id="test">
 <input type="text">           

</div>

In Firefox or IE 8 I will get

<div id="test">
<form action="whatever" method="GET">
 <input type="text">
</form>

Can you help me with IE10? (jquery 1.7.2)

Around div test there is another form tag.

Upvotes: 1

Views: 2060

Answers (2)

Sampson
Sampson

Reputation: 268414

You stated in the end of your question that you are attempting to nest one form inside of another. Please have a look at the specification regarding the content model for form elements:

4.10.3 The form element
  Content model:
      Flow content, but with no form element descendants.

It is invalid to nest form elements. This may be why Internet Explorer 10 is trying to protect you from invalid markup that may not work properly in all browsers. The latest version of Google Chrome appears to also remove invalid child forms.

If you need to submit one form from inside another, use the form attribute on buttons instead. This will tell them which form they are to submit, and not necessarily the form they are currently in.

4.10.18.3 Association of controls and forms
A form-associated element is, by default, associated with its nearest ancestor form element (as described below), but may have a form attribute specified to override this.

Note: This feature allows authors to work around the lack of support for nested form elements.

So you could have the following:

<form id="one">
    <!-- This button submits #two -->
    <input type="submit" form="two">
</form>
<form id="two">
    <!-- This button submits #one -->
    <input type="submit" form="one">
</form>

Upvotes: 3

DaGhostman Dimitrov
DaGhostman Dimitrov

Reputation: 1626

Try using .html() to append the the form with HTML functionality and after that use .append() to push every element in the form, so you have something like:

$('#test').html('<form method="GET" action="whatever"></form>');
$('form [action="whatever"]').append('<input type="text"/>'); // Note for selector will be better to use ID for the form

Upvotes: 1

Related Questions