form.serialize () для полей ввода и textarea - PullRequest
Новая
       7

form.serialize () для полей ввода и textarea

1 голос
/ 03 февраля 2020

У меня есть многошаговая форма с разными полями ввода и одной текстовой областью. Я хотел бы сериализовать их с помощью 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 Ответ

1 голос
/ 03 февраля 2020

Вместо этого вы можете использовать :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>
...