Получить поля ввода формы с помощью 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> элементах.

Похоже, что new HTML 5 form inputs не работает с serializeArray в версии jQuery 1.3. Это работает в версии 1.4+

Answer 2

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

var items = new Array(); 

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

Answer 3

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

Элементы переменный будет содержать все входы, выбор и текстовые области fieldsets внутри формы.

Answer 4

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

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

}); 

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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 8

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

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

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

Answer 9

То же решение, как указано на 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 10

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

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

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

Answer 11

JQuery-х serializeArray не включает инвалидов поля, так что если вам нужно их тоже попробовать:

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

Answer 12

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

Answer 13

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

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

Answer 14

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

$('#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 15

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

// 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: ".@....com" 
// 1: "...@........com" 
// 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; 
}; 

Answer 16

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

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

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

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

var data = new FormData([form]) 

Answer 17

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

$('.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 18

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

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

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

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

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

Answer 19

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

$('.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 20

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

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

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 21

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

$(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 22

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