form.serialize() 用于输入字段和文本区域

Posted 2023-05-07

【中文标题】form.serialize() 用于输入字段和文本区域

【英文标题】：form.serialize() for input fields and textarea

【发布时间】：2020-05-18 23:57:33

【问题描述】：

我有一个包含不同输入字段和一个文本区域的多步骤表单。我想使用 form.serialize() 序列化这些。但不幸的是，我不能同时序列化输入字段和文本区域。这是更好理解的代码。我需要一步一步地序列化它。

form = $('form .part-2 input'); // textarea is missing
formData = form.serialize();
$('#output').text(formData);

// form = $('form .part-2'); // input field(s) and textarea are missing
// formData = form.serialize();
// $('#output').text(formData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="index.html" method="post">
  <div class="part-1">
    <input type="text" name="name1" placeholder="Name1">
    <input type="text" name="name2" placeholder="Name1">
  </div>
  <div class="part-2">
    <input type="text" name="name3" placeholder="Name1">
    <div class="textarea">
      <textarea name="name4" maxlength="50"></textarea>
    </div>
  </div>
</form>

<span id="output"></span>

【参考方案1】：

您可以改用:input，它可以同时定位两者：

form = $('form .part-2 :input'); // textarea is missing
 //--------------------^^^^^^-------this is required
formData = form.serialize();
$('#output').text(formData);

// form = $('form .part-2'); // input field(s) and textarea are missing
// formData = form.serialize();
// $('#output').text(formData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="index.html" method="post">
  <div class="part-1">
    <input type="text" name="name1" placeholder="Name1">
    <input type="text" name="name2" placeholder="Name1">
  </div>
  <div class="part-2">
    <input type="text" name="name3" placeholder="Name1">
    <div class="textarea">
      <textarea name="name4" maxlength="50"></textarea>
    </div>
  </div>
</form>

<span id="output"></span>

【讨论】：

很高兴为您提供帮助。

我会将您的答案标记为已接受。但是我还要再等5分钟。你要禁食:)。