当 jQuery 处理表单在另一个表单内时发生错误

Question

我正在使用 jQuery 编写表单，遇到了一些困难。

我的表单在静态页面 (html) 中运行良好。
但是，当我在动态页面（aspx）中使用表单时，表单的行为不正确。 我无法将项目附加到表单并调用 form.serialize 函数。

我认为当一个表单在另一个表单中时会发生错误（.aspx 代码需要用表单标签括起来）。

我该怎么办？

让我给出我的代码的简化版本：

<form name="Form1" method="post" id="Form1">
some content
<form name="form_inside">
<input name="fname" type="text" />
</form>
</form>

jQuery 代码：

$("#form_inside").append($("<input type='text' name='lname'>"));

当用户提交时，

$("#form_inside").serialize(); 
// it should return fname=inputfname&lname=inputlname

我想将元素附加到“form_inside”并序列化表单“form_inside”。
aspx 需要表单“Form1”，我无法删除它。

Answer 1

你能序列化Form1里面的字段吗？

我对 ASP 一无所知，但您似乎并没有直接进行“提交” - 那么字段是否不在它们自己的单独表单中真的很重要吗？

您可以将您感兴趣的字段分组到 <div> 或其他名称中，例如：

<div id="my-interesting-fields">
    ...
</div>

然后在适当的地方将#form-inside 替换为#my-interesting-fields - 这有帮助吗？

编辑

好的，快速浏览一下 jQuery 代码表明 serialize() 取决于表单的 elements 成员。

我想你可以通过几种不同的方式破解它：

• 将#my-interesting-fields 中的所有元素复制到您在Form1 外部动态创建的临时<form>，然后调用serialize()。比如：

  $("#Form1").after("<form id='tmp-form'></form>").
              append("#my-interesting-fields input");
  $("tmp-form").serialize();
  

• 或者，在#my-interesting-fields 上创建一个elements 成员，例如

  $("#my-interesting-fields").elements = $("#my-interesting-fields input");
  $("#my-interesting-fields").serialize();
  

我没有尝试过这两种方法，但这可能会给你一些想法。并不是说我一定会推荐其中任何一个:)

Answer 2

因为你不能有嵌套的

标签，你需要像下面这样关闭标准的 dotnet 表单标签：

<script type="text/javascript">
    $(document).ready(function() {
        $("#form_inside").append($("<input type='text' name='lname'>"));
        $("#submitBtn").click(function() {function() {
            var obj = $("#form_inside *");
            var values = new Array();
            obj.each(function(i,obj1) {
                if (obj1.name && !obj1.disabled && obj1.value) {
                    values.push(obj1);
                }; 
                });
                alert(jQuery.param(values));
        }); });
    });

</script>
<form id="form1" runat="server">
<div>
<div id="form_inside" name="form_inside"> <input name="fname" type="text" /><input type="button" id="submitBtn" /></div>

</div>
</form>

jQuery.param 在表单元素数组上的结果与 .serialize() 相同

所以你得到 div $("#form_inside *) 中的所有元素，然后过滤元素，然后在结果上 jQuery.param 将为你提供你所需要的