$ .serializeArray() не включая все поля внутри формы

Question

У меня есть несколько <form> на одной странице, все из которых имеют уникальные идентификаторы, а тело формы - как показано ниже.

<form id="form-main"> 
    <table> 
     <tr> 
      <td><input type="text" name="field1"/></td> 
       . . . . . . . 
       . . . . . . . 
     </tr> 
    </table> 
    <table> 
     <tr> 
      <td><input type="text" name="field2"/></td> 
       . . . . . . . 
       . . . . . . . 
     </tr> 
    </table>  
</form> 

<form id="form-second"> 
    <table> 
     <tr> 
      <td><input type="text" name="field3"/></td> 
       . . . . . . . 
       . . . . . . . 
     </tr> 
    </table> 
    <table> 
     <tr> 
      <td><input type="text" name="field4"/></td> 
       . . . . . . . 
       . . . . . . . 
     </tr> 
    </table> 
</form> 

Я знаю, что это не рекомендуется использовать таблицы для того, выровнено поле формы, и можно сделать это с помощью CSS, но актуальная проблема в том, что, когда я использую $("#form-main").serializeArray, я должен получить все поля этой формы в моем массив, но здесь я получаю только поля первой таблицы в форме, остальные входы просто игнорируются.

Действительно ли это serializeArray()? или мое использование таблиц является реальной проблемой? Я могу использовать div s вместо таблиц, но это был бы мой последний вариант. Кроме того, в этих нескольких формах первая таблица имеет поля, которые обязательны для заполнения, поэтому, наряду с подходом «validate-as-you-type», я повторяю эти обязательные поля, чтобы проверить, что они не оставлены пустыми, поэтому является причиной, по которой только первая таблица каждой формы включена в объект массива.

Answer 1

Это вполне допустимое использование serializeArray, и оно должно работать с несколькими элементами с тем же именем. Я просто сделал быстрый тест (http://jsfiddle.net/Q5s5V/), и все пошло так, как ожидалось ... Я думаю, что в вашем коде есть что-то еще не так.

Одна вещь, которую вы могли бы попробовать, - это выбрать сами входы, а не форму и увидеть: 1) у вас есть все входы, которые вы ожидаете, и 2) правильно ли сериализует сборку.

var $elements = $('#form-main :input'); 
console.log($elements.length); 
console.log($elements.serializeArray()); 

Я предполагаю, что существует ошибка разметки (закрытый тег или что-то еще), что предотвращает выбор этих элементов.

Answer 2

Я знаю, что это старый вопрос, но я был удивлен, увидев здесь правильный ответ. Проблема в том, что на странице у вас есть две формы, а не одна.

serializeArray() будет работать только с полями указанного тега формы, поэтому используйте $ ("# form-main"). SerializeArray будет включать только поле1 и поле2.

Поле3 и поле4 не включены, поскольку они не находятся в # form-main, они находятся в # форме-секунде.