Question

I have an issue with an web app im working on. The input-fields in the form is added by jQuery. My form looks like this in the HTML-editor:

<form id="profile" method="post" action="Profile/UpdateProfile">
        <tr><td><b>Namn:</b></td><td><parameter name="Name" class="transform">@ViewBag.Name</parameter></td></tr>
        <tr><td><b>Address:</b></td><td><parameter name="Address" class="transform">@ViewBag.Address</parameter></td></tr>
        <tr><td><b>Postaddress:</b></td><td><parameter name="ZIP" class="transform">@ViewBag.ZIP</parameter></td></tr>
        <tr><td><b>Personnummer:</b></td><td><parameter name="Pnumber" class="transform">@ViewBag.Pnumber</parameter></td></tr>
    </form>

But it appears like this in the DOM-inspector:

<form id="profile" method="post" action="Profile/UpdateProfile"></form>
<tbody><tr><td><b>Namn:</b></td><td><parameter name="Name" class="transform">Anton Gildebrand</parameter></td></tr>
        <tr><td><b>Address:</b></td><td><parameter name="Address" class="transform"></parameter></td></tr>
        <tr><td><b>Postaddress:</b></td><td><parameter name="ZIP" class="transform">0</parameter></td></tr>
        <tr><td><b>Personnummer:</b></td><td><parameter name="Pnumber" class="transform"></parameter></td></tr>

</tbody>

It may look weird that i have no inputs, but when the user presses an edit-button, the “parameter”-tag transforms into textinputs using this javascript:

$('#' + id + ' .transform').each(function (index) {
         var val = $(this).html();
         $(this).html('');
         var tag = $(this).parent().html();
         var newTag = tag.replace('<parameter', '<input type="text" value="' + val + '"');
         newTag = newTag.replace('</parameter', '</input');
         $(this).parent().html(newTag);
     });

As you can see the “parameter”-tags isn’t wrapped by the form in the DOM-inspector, and nothing is posted (i debugged using Fiddler) to the server. How do i solve it?

Answer 1

Wrap the form around the entire table.

You can’t put forms inside a table element but outside a table cell. The result you see if the browser trying to perform error recovery. It is usually a good idea to make use of a validator (although you need to run it on the markup you intend to generate if you are generating it using JS).

(Also, use css for layout and use label elements instead of bold elements).