具有多种形式的jQuery序列化函数答案

【问题标题】：jQuery serialize function with multple forms具有多种形式的jQuery序列化函数
【发布时间】：2009-11-10 13:47:10
【问题描述】：

我正在使用 jQuery .serialize 函数，但无法在提交时序列化正确的表单。

我的js代码：

    function getquerystring(form) {
    return $("form").serialize();
}

我的表格：

<div class="leave_message_box">
    <form name="leave_message_form">
        <input type="text" name="clock_code" placeholder="Clock Code" />
    <input type="text" name="message" placeholder="Message (Blank for none)"/>
    <input type="hidden" name="type" value="leave_message" />
        <input value="Leave Message" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "leave_message_form")'></p>
    </form>
</div>
<div class="outside_job_box">
    <form name="outside_job_form">
        <input type="text" name="clock_code" placeholder="Clock Code" />
    <input type="text" name="message" placeholder="Message (Blank for none)"/>
    <input type="hidden" name="type" value="ouside_job" />
        <input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
    </form>
</div>

我在传递变量时一定做错了什么。完整代码@pastie。我拥有的功能确实有效，但是，它始终是提交的最后一个表单。

【问题讨论】：

+1 提供完整代码

标签： javascript jquery forms

【解决方案1】：

使用此代码：

$("form")

将在您的文档中找到所有 <form> 元素。

鉴于form 是一个包含表单的名称的字符串，您想要的是这样的：

$("form[name='" + form + "']")

查看您提供的代码，我有这个建议。与其将表单名称传递给您的函数，不如只传递表单本身？

<button onclick="xmlhttpPost('blah', this.form)">

您也不需要将javascript: 放入onclick、onfocus、onwhatever 属性中。

【讨论】：

完美，就像一个魅力。我删除了javascript 更改为this.form 并使用了$(form).serialize();。谢谢你的帮助！！！！

【解决方案2】：

我建议在表单上放置一个 ID 属性，然后将该 ID 用作 jQuery 的显式选择器：

<div class="outside_job_box">
  <form id="outside_job_form" name="outside_job_form">
      <input type="text" name="clock_code" placeholder="Clock Code" />
      <input type="text" name="message" placeholder="Message (Blank for none)"/>
      <input type="hidden" name="type" value="ouside_job" />
      <input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
  </form>
</div>

然后你会像这样选择和序列化它；

var f = $("#outside_job_form").serialize();

在我看来，这不仅使您的代码更高效，而且更具可读性。

【讨论】：

【解决方案3】：

如果唯一目的是将简单文本编码为 URL 格式，则使用encodeURIComponent()。

【讨论】：