Question

I am using the jquery form plugin which uses jquery ajax to do most of its work. We have jquery 1.7.2

We are using it to send a form via ajax to the server and either return a value indiciating success or return the form with validation errors.

I have it working in firefox and chrome when an error is found in validation the contents of a div containing the old form are replaced with the new one that has the errors.

$(‘#FormDiv’).empty().html(response);

The reponse would look something like the following:

<form action="/MyForm/Edit" id="MyForm" method="post"><input id="Id" name="Id" type="hidden" value="" />
    <input id="PlantId" name="PlantId" type="hidden" value="1" />
    <table>
        <tr><td class="field">
                ID
            </td>
            <td>
                <input class="required" id="MyId" name="MyName" type="text" value="JP001" />

            </td>
            <td class="field">Description</td>   
            <td><input class="required" id="Description" name="Description" type="text" value="" />
        </tr>
        <tr>
            <td class="field">Created by</td>
            <td>Joe Bloggs</td>
            <td class="field">Create date</td>
            <td>15/06/2012</td>
        </tr>
    </table>
</form>

Debugging in IE the I can see that the ajax call actually has this in its return body however the parameter to my method is removing the outer form starting and ending tags so essentially it is just a table.

I have tried a few different things to try and figure this out including setting processData to false (not sure if that would really affect it anyway) and setting the returnType to “text” and “html” but none really helped.

Any ideas?

---

So it turns out that if i wrap the form in a div everything seems to work ok, not quite sure whats going on there, if anyone can explain this they can have the answer

Answer 1

It’s not a jQuery bug.

It’s a not-so-well-known Javascript “feature”

Apparently innerHTML in FF3 and IE6+ (And maybe others) don’t like form tags as part of innerHTML. If you want, you can test it:

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

<script>
    window.onload=document.getElementById('test').innerHTML = "<form><input type="hidden" name="blah"></form>";
</script>



Result:

<div id="test">
    <input type="hidden" name="blah">
</div>

Not quite sure why, but that is how they implement it.