Получить поля ввода формы с помощью jQuery?

Question

У меня есть форма со многими полями ввода.

Когда я ловлю событие отправки формы с помощью jQuery, возможно ли получить все поля ввода этой формы в ассоциативном массиве?

Answer 1

$('#myForm').submit(function() {
    // get all the inputs into an array.
    var $inputs = $('#myForm :input');

    // not sure if you wanted this, but I thought I'd add it.
    // get an associative array of just the values.
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });

});

---

Благодаря подсказке от Simon_Weaver, вот еще один способ сделать это, используя serializeArray:

var values = {};
$.each($('#myForm').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

Обратите внимание, что этот фрагмент не будет работать на <select multiple> элементах.

Похоже, что новые формы ввода HTML 5 не работают с serializeArray в jQuery версии 1.3. Это работает в версии 1.4 +

Answer 2

Поздно на вечеринке по этому вопросу, но это еще проще:

$('#myForm').submit(function() {
    // Get all the forms elements and their values in one step
    var values = $(this).serialize();

});

Answer 3

Плагин jquery.form может помочь с тем, что ищут другие, которые в конечном итоге окажутся в этом вопросе. Я не уверен, что он делает то, что вы хотите, или нет.

Существует также функция serializeArray .

Answer 4

Иногда я нахожу получение одного за раз более полезным. Для этого есть следующее:

var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']"); 

Answer 5

$('#myForm').bind('submit', function () {
  var elements = this.elements;
});

Переменная elements будет содержать все входные данные, select, textareas и fieldsets внутри формы.

Answer 6

Вот еще одно решение, таким образом, вы можете получить все данные о форме и использовать их в вызове сервера или что-то в этом роде.

$('.form').on('submit', function( e )){ 
   var form = $( this ), // this will resolve to the form submitted
       action = form.attr( 'action' ),
         type = form.attr( 'method' ),
         data = {};

     // Make sure you use the 'name' field on the inputs you want to grab. 
   form.find( '[name]' ).each( function( i , v ){
      var input = $( this ), // resolves to current input element.
          name = input.attr( 'name' ),
          value = input.val();
      data[name] = value;
   });

  // Code which makes use of 'data'.

 e.preventDefault();
}

Затем вы можете использовать это с вызовами ajax:

function sendRequest(action, type, data) {
       $.ajax({
            url: action,
           type: type,
           data: data
       })
       .done(function( returnedHtml ) {
           $( "#responseDiv" ).append( returnedHtml );
       })
       .fail(function() {
           $( "#responseDiv" ).append( "This failed" );
       });
}

Надеюсь, это пригодится любому из вас:)

Answer 7

У меня была похожая проблема с небольшим поворотом, и я решил выбросить это. У меня есть функция обратного вызова, которая получает форму, поэтому у меня уже был объект формы, и я не смогла упростить варианты для $('form:input'). Вместо этого я придумал:

    var dataValues = {};
    form.find('input').each(
        function(unusedIndex, child) {
            dataValues[child.name] = child.value;
        });

Схожая, но не идентичная ситуация, но я нашел эту ветку очень полезной и подумал, что подправлю ее в конце, и надеюсь, что кто-то еще нашел ее полезной.

Answer 8

jQuery serializeArray не включает отключенные поля, поэтому, если они вам тоже нужны, попробуйте:

var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
    data[field.name] = field.value;
});

Answer 9

Ассоциативный? Не без труда, но вы можете использовать универсальные селекторы:

var items = new Array();

$('#form_id:input').each(function (el) {
    items[el.name] = el;
});

Answer 10

http://api.jquery.com/serializearray/

$('#form').on('submit', function() {
    var data = $(this).serializeArray();
});

Это также можно сделать без jQuery, используя объект FormData уровня 2 XMLHttpRequest

http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface

var data = new FormData([form])