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

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

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

});

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

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

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

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

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

Переменная элементов будет содержать все входы, выборки, текстовые поля и поля в форме.

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

$('.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" );
       });
}

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

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

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

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

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

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

Это также можно сделать без jQuery с помощью объекта XMLHttpRequest Level 2 FormData​​p >

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

var data = new FormData([form])

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

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

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

var items = new Array();

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

Не забывайте, что флажки и переключатели -

var inputs = $("#myForm :input");
var obj = $.map(inputs, function(n, i) {
  var o = {};
  if (n.type == "radio" || n.type == "checkbox")
    o[n.id] = $(n).attr("checked");
  else
    o[n.id] = $(n).val();
  return o;
});
return obj

Этот фрагмент кода будет работать вместо имени, email введите имя поля формы

$(document).ready(function(){
  $("#form_id").submit(function(event){
    event.preventDefault();
    var name = $("input[name='name']",this).val();
    var email = $("input[name='email']",this).val();
  });
});

Кажется странным, что никто не поддержал или не предложил краткое решение для получения списка данных. Вряд ли любые формы будут одномерными объектами.

Недостатком этого решения является, конечно же, то, что ваши одноэлементные объекты должны быть доступны по индексу [0]. Но IMO таким образом лучше, чем использование одного из дюжинных картографических решений.

var formData = $('#formId').serializeArray().reduce(function (obj, item) {
    if (obj[item.name] == null) {
        obj[item.name] = [];
    } 
    obj[item.name].push(item.value);
    return obj;
}, {});

Я использую этот код без каждого цикла:

$('.subscribe-form').submit(function(e){
    var arr=$(this).serializeArray();
    var values={};
    for(i in arr){values[arr[i]['name']]=arr[i]['value']}
    console.log(values);
    return false;
});

Если вам нужно получить несколько значений с входов, и вы используете [] для определения входов с несколькими значениями, вы можете использовать следующее:

$('#contentform').find('input, textarea, select').each(function(x, field) {
    if (field.name) {
        if (field.name.indexOf('[]')>0) {
            if (!$.isArray(data[field.name])) {
               data[field.name]=new Array();
            }
            data[field.name].push(field.value);
        } else {
            data[field.name]=field.value;
        }
    }                   
});

У меня была та же проблема, и я решил ее по-другому.

var arr = new Array();
$(':input').each(function() {
 arr.push($(this).val());
});
arr;

Он возвращает значение всех полей ввода. Вы можете изменить $(':input'), чтобы быть более конкретным.

Вдохновленный ответами Lance Rushing и Simon_Weaver, это мое любимое решение.

$('#myForm').submit( function( event ) {
    var values = $(this).serializeArray();
    // In my case, I need to fetch these data before custom actions
    event.preventDefault();
});

Вывод представляет собой массив объектов, например

[{name: "start-time", value: "11:01"}, {name: "end-time", value: "11:11"}]

С помощью приведенного ниже кода

var inputs = {};
$.each(values, function(k, v){
    inputs[v.name]= v.value;
});

его конечный результат будет

{"start-time":"11:01", "end-time":"11:01"}

Все ответы хорошие, но если есть поле, которое вы хотели бы игнорировать в этой функции? Легко, дайте поле свойство, например ignore_this:

<input type="text" name="some_name" ignore_this>

И в вашей функции Serialize:

if(!$(name).prop('ignorar')){
   do_your_thing;
}

То, как вы игнорируете некоторые поля.

Надеюсь, это поможет кому-то.:)

// This html:
// <form id="someCoolForm">
// <input type="text" class="form-control" name="username" value="...." />
// 
// <input type="text" class="form-control" name="profile.first_name" value="...." />
// <input type="text" class="form-control" name="profile.last_name" value="...." />
// 
// <input type="text" class="form-control" name="emails[]" value="..." />
// <input type="text" class="form-control" name="emails[]" value=".." />
// <input type="text" class="form-control" name="emails[]" value="." />
// </form>
// 
// With this js:
// 
// var form1 = parseForm($('#someCoolForm'));
// console.log(form1);
// 
// Will output something like:
// {
// username: "test2"
// emails:
//   0: "[email protected]"
//   1: "[email protected]"
// profile: Object
//   first_name: "..."
//   last_name: "..."
// }
// 
// So, function below:

var parseForm = function (form) {

    var formdata = form.serializeArray();

    var data = {};

    _.each(formdata, function (element) {

        var value = _.values(element);

        // Parsing field arrays.
        if (value[0].indexOf('[]') > 0) {
            var key = value[0].replace('[]', '');

            if (!data[key])
                data[key] = [];

            data[value[0].replace('[]', '')].push(value[1]);
        } else

        // Parsing nested objects.
        if (value[0].indexOf('.') > 0) {

            var parent = value[0].substring(0, value[0].indexOf("."));
            var child = value[0].substring(value[0].lastIndexOf(".") + 1);

            if (!data[parent])
                data[parent] = {};

            data[parent][child] = value[1];
        } else {
            data[value[0]] = value[1];
        }
    });

    return data;
};

serialize() - лучший метод. @Кристофер Паркер говорит, что Nickf anwser выполняет больше, однако он не принимает во внимание, что форма может содержать textarea и выбирать меню. Гораздо лучше использовать serialize(), а затем манипулировать тем, что вам нужно. Данные из serialize() могут использоваться либо в сообщении Ajax, либо в get, поэтому там нет проблем.

То же решение, что указано nickf, но с учетом входных имен массива например,

<input type="text" name="array[]" />

values = {};
$("#something :input").each(function() {
  if (this.name.search(/\[\]/) > 0) //search for [] in name
  {
    if (typeof values[this.name] != "undefined") {
      values[this.name] = values[this.name].concat([$(this).val()])
    } else {
      values[this.name] = [$(this).val()];
    }
  } else {
    values[this.name] = $(this).val();
  }
});

Когда мне нужно было выполнить вызов ajax со всеми полями формы, у меня возникли проблемы с селектором : input, который возвращал все флажки независимо от того, были ли они проверены. Я добавил новый селектор, чтобы просто получить элементы формы, доступные для отправки:

$.extend($.expr[':'],{
    submitable: function(a){
        if($(a).is(':checkbox:not(:checked)'))
        {
            return false;
        }
        else if($(a).is(':input'))
        {
            return true;
        }
        else
        {
            return false;
        }
    }
});

использование:

$('#form_id :submitable');

Я еще не тестировал его с несколькими блоками выбора, но, но он работает для получения всех полей формы в виде стандартного представления.

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