Почему JavaScript для перехвата formData, который работает «на природе» (на веб-странице), не работает на скрипке? - PullRequest
Новая
       25

Почему JavaScript для перехвата formData, который работает «на природе» (на веб-странице), не работает на скрипке?

0 голосов
/ 23 июня 2019

Я использую функцию обратного вызова для отправки события, чтобы получить formData.Он корректно работает на этой тестовой странице на моем веб-сайте .Я пытался построить скрипку, чтобы использовать для другого вопроса.Я обнаружил, что тот же код не работает в скрипке.Вместо правильных formData он возвращает formData с array.length == 0.

. Код использует jQuery для функции document.ready.jQuery был правильно загружен.

JavaScript: 

01:    /*  doc.ready w/ traditional callback fn for event listener  */
02:
03:    $(document).ready( function() {
04:      init();
05:
06:    });  // end doc.ready
07:
08:    function init() {
09:      document.addEventListener("submit", processFormData);
10:    }  // end def fn init
11:
12:    functon processFormData(event) {
13:      var formData = new FormData();
14:      event.preventDefault();
15:      formData = $( 'form' ).serializeArray();
16:
17:                console.log('formData : ', formData);
18:
19.    }  //  end def fn processFormDat;

С данными, введенными в оперативной форме, formData возвращает массив, , всоответствующая часть, это: 

3: Object {name: "select-yui_3_nnn ... nnn-field", value: "unsure"}
4: Object {name: "select-yui_3_nnn ... nnn-field", value: "A"}
5: Object {name: "select-yui_3_nnn ... nnn-field", value: "B"}
6: Object {name: "select-yui_3_nnn ... nnn-field", value: "A"}
7: Object {name: "select-yui_3_nnn ... nnn-field", value: "unsure"}
8: Object {name: "select-yui_3_nnn ... nnn-field", value: "C"}
length: 9

(formData.name атрибуты 'yui' не являются постоянными. Они генерируются динамически при каждой загрузке страницы. Их нельзя использовать для ссылки наэлементы.)

В Скрипка , консоль такая: 

formData : Array []

formData.length == 0.

Итак, Вопрос в том, почему?

HTML: Мой сайт построен на платформе Squarespace с использованием одного из его «блоков формы».HTML невероятно сложен.Я не буду пытаться воспроизвести это здесь.

HTML в скрипке прост.Я воспроизвожу это здесь, чтобы вам не пришлось нажимать. 

01;  <form method="POST">
02:  <div>
03:    <label>First Name
04:      <input type="text" size="25">
05:    </label>
06:  </div>
07:  <div>
08:    <label>Last Name
09:      <input type="text" size="25">
10:    </label>
11:  </div>
12:  </form>


console.config({
  maxEntries: Infinity
});

/*  doc.ready w/ traditional callback fn for event listener  */

$(document).ready(function() {
  init();
}); // end doc.ready

function init() {
  document.addEventListener("submit", processFormData);
} // end def fn init

function processFormData(event) {
  var formData = new FormData();
  event.preventDefault();
  formData = $('form').serializeArray();

  console.log('formData : ', formData);

} //  end def fn processFormData
.as-console-wrapper {
  max-height: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="testForm" method="post">
  <div>
    <label>First Name
    <input type="text" name="fname"  size="25">
  </label>
  </div>
  <div>
    <label>Last Name
    <input type="text" name="lname" size="25">
  </label>
  </div>
  <div>
    <label>email address
    <input type="email" name="email" size="25">
  </label>
  </div>
  <div>
    <label>08:30 Keynote Speaker
    <select name="select0830">
      <option value="">unsure</option>
      <option value="attend">attend</option>
      <option value="not attend">not attend</option>
    </select>
  </label>
    <label>09:00 Classes
    <select name="select0900">
      <option value="">unsure</option>
      <option value="class room A">room A</option>
      <option value="class room B">room B</option>
    </select>
    </label>
    <label>10:30 Classes
    <select name="select1030">
      <option value="">unsure</option>
      <option value="class room A">room A</option>
      <option value="class room B">room B</option>
    </select>
  </label>
  </div>
  <div>
    <input type="submit" value="submit form">
  </div>
</form>

1 Ответ

0 голосов
/ 23 июня 2019

Ваша проблема связана с использованием вами метода: 

$('form').serializeArray();

.serializeArray() рассмотрит форму, которую вы ей дали, и создаст массив объектов, используя nameполе из каждого элемента управления формы, присутствующего в форме.Как вы сказали, поле name генерируется динамически, вы получите свой результат только тогда, когда они будут сгенерированы.Если атрибуты name никогда не генерируются, вы никогда не получите свои данные (так как они никогда не генерируются в вашем фрагменте, вы никогда не получите свои данные).

Таким образом, для того, чтобы .serializeArray заработал, вам необходимо указать в форме для ввода атрибут name.

См. Рабочий пример здесь

Также обратите внимание, что new FormData() не требуется.Вы перезаписываете эти данные массивом, возвращаемым $('form').serializeArray();

...