时间戳

首页 > 解决方案 > form.serialize() 用于输入字段和文本区域

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

问题描述

我有一个包含不同输入字段和一个文本区域的多步骤表单。我想使用 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>

标签： javascriptjqueryformsserializationtextarea

解决方案

您可以改用: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>

推荐阅读