Как я могу получить данные формы с помощью JavaScript / jQuery?

Question

Существует ли простой однострочный способ получения данных формы, как это было бы, если бы они были представлены классическим способом только для HTML?

Например, в:

<form>
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

Из:

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}

Что-то вроде этого слишком просто, поскольку оно не включает (правильно) текстовые области, селекторы, переключатели и флажки:

$("#form input").each(function() {
 data[theFieldName] = theFieldValue;
});

Answer 1

Использовать $('form').serializeArray(), что возвращает массив :

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

Другой параметр - $('form').serialize(), который возвращает строку :

"foo=1&bar=xxx&this=hi"

Взгляните на это демоверсию jsfiddle

Answer 2

$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

демо

Answer 3

Обновленный ответ за 2014 год: HTML5 FormData делает это

var formData = new FormData(document.querySelector('form'))

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

Answer 4

На основе jQuery.serializeArray возвращает пары ключ-значение.

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

Answer 5

document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get('foo'), for example.
  // Don't forget e.preventDefault() if you want to stop normal form .submission
});

Это глупый ответ, но позвольте мне объяснить, почему это лучшее решение:

• Мы правильно обрабатываем отправку формы, а не нажатие кнопки. Некоторые люди любят нажимать ввод на полях. Некоторые люди используют альтернативные устройства ввода, такие как речевой ввод или другие устройства доступа. Обработайте отправленную форму, и вы правильно решите ее для всех.

• Мы копаем данные формы для фактической формы, которая была отправлена. Если вы измените селектор формы позже, вам не нужно менять селекторы для всех полей. Кроме того, у вас может быть несколько форм с одинаковыми именами ввода. Не нужно устранять неоднозначность с избыточными идентификаторами, а что нет, просто отслеживайте входные данные на основе формы, которая была отправлена. Это также позволяет вам использовать один обработчик событий для нескольких форм , если , что подходит для вашей ситуации.

• Интерфейс FormData довольно новый, но хорошо поддерживается браузерами. Это отличный способ создать этот сбор данных, чтобы получить реальные значения формы. Без этого вам придется пройтись по всем элементам (например, с помощью form.elements) и выяснить, что проверено, а что нет, какие значения и т. Д. Вполне возможно, если вам нужна поддержка старого браузера, но интерфейс FormData проще.

• Я использую ES6 здесь ... никоим образом не требуется, поэтому измените его на совместимость с ES5, если вам нужна поддержка старого браузера.

Answer 6

используйте .serializeArray (), чтобы получить данные в формате массива, а затем преобразовать их в объект:

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

Answer 7

Вот действительно простой и короткий солутон, который даже не требует Jquery.

var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;

Answer 8

$('#myform').serialize();

Answer 9

Я использую это:

Плагин jQuery

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

HTML-форма

<form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

Получить данные

var myData = $("#myForm").getFormData();

Answer 10

$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

кроме этого, вы можете посмотреть на serialize () ;