form.serialize（）用于输入字段和文本区域

Question

我有一个多步骤表单，具有不同的输入字段和一个文本区域。我想使用form.serialize（）序列化它们。但是不幸的是，我不能同时序列化输入字段和文本区域。这是用于更好理解的代码。我需要将其序列化step by step。

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>

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

Answer 2

这是序列化表单的方式，所选元素应来自其本身。

$('#serialize').click(function(){
form = $('form'); // 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>
<button id="serialize" >serialize</button>
<span id="output"></span>