根据DOM检查员,FORM看起来是空的

时间:2012-04-22 00:04:35

标签: javascript html html5

我遇到了一个正在处理的网络应用程序的问题。表单中的输入字段由jQuery添加。我的表单在HTML编辑器中看起来像这样:

<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>

但它在DOM检查器中看起来像这样:

<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>

我没有输入可能看起来很奇怪,但是当用户按下编辑按钮时,“参数”-tag会使用此javascript转换为textinputs:

$('#' + 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);
     });

正如您所看到的,“参数”-tags未被DOM检查器中的表单包装,并且没有任何内容(我使用Fiddler调试)发送到服务器。我该如何解决?

1 个答案:

答案 0 :(得分:3)

将表格包裹在整个桌子周围。

您不能将表单放在表格元素中但在表格单元格之外。您看到浏览器是否尝试执行错误恢复的结果。使用a validator通常是一个好主意(尽管如果你使用JS生成它,你需要在你想要生成的标记上运行它)。

(另外,use css for layout并使用label elements代替粗体元素。)