Chrome removes form element when using jQuery ajax

Question

I am returning some simple HTML markup in a JSON response from an action.

Here is the full response (linebreaks added for readability):

    {
        "Success":true,
        "Content":"\r\n
<div class=\"editor-form\">\r\n

<form action=\"/Blah/Blah/5104?id=9\" method=\"post\">

<input data-val=\"true\" data-val-number=\"The field Id must be a number.\" data-val-required=\"The Id field is required.\" id=\"Id\" name=\"Id\" type=\"hidden\" value=\"5104\" />

<input data-val=\"true\" data-val-number=\"The field Vat Rate must be a number.\" data-val-required=\"The Vat Rate field is required.\" id=\"VatRate\" name=\"VatRate\" type=\"hidden\" value=\"1.2000\" />

<div class=\"display-field\">\r\n\t

<label for=\"Price\">Price (Ex-VAT)</label>\r\n\t

<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field Price must be a number.\" data-val-required=\"The Price field is required.\" id=\"Price\" name=\"Price\" type=\"text\" value=\"92.50\" />\r\n\t

</div>\r\n

</form>
</div>",
"Data":null,
"Errors":null
}

Here is what I do with it after a succesful response:

$("#EditPriceDialog").html(data.Content).dialog(MyProject.UI.DialogOptions({ minWidth:380, minHeight:200, modal:true }))

When the markup renders, the form element is missing. Elements inside the form are still there. This only happens in Chrome. In IE9 and FF 19 the form element is there. What's different in Chrome?

Answer 1

Chrome removes form element if it is already surrounded by another form element. Also, ASP .Net renders form tag for all pages it servers, as a result Chrome is stripping off the form tag in data.Content. I don't think IE or firefox behaves this way.

Edit: Hope you will find this useful, How do you overcome the html form nesting limitation?