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

Question

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

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

Answer 1

Не забудьте флажки и переключатели -

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

Answer 2

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

Недостатком этого решения является, конечно, то, что ваши одноэлементные объекты должны быть доступны по индексу [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;
}, {});

Answer 3

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

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

Answer 4

То же решение, что и для 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();
  }
});

Answer 5

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

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

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

Answer 6

Вдохновленные ответами 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"}

Answer 7

Этот кусок кода будет работать вместо имени введите адрес вашей формы в поле

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

Answer 8

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

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

Answer 9

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

Answer 10

Когда мне нужно было выполнить 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, чтобы включить флажки и текстовые поля, а также стандартный тип блока выбора.