У меня есть форма со многими полями ввода.
Когда я ловлю событие формы отправки с помощью jQuery, можно ли получить все поля ввода этой формы в ассоциативном массиве?
$('#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 multi >
.
Похоже, что новые входы формы HTML 5 не работают с serializeArray
в jQuery версии 1.3. Это работает в версии 1.4+
Поздно на вечеринку по этому вопросу, но это еще проще:
$('#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+"']");
Вот еще одно решение, таким образом, вы можете получить все данные о форме и использовать их в вызове на сервере или что-то в этом роде.
$('.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;
});
Это похожее, но не идентичное положение, но я нашел эту ветку очень полезной и подумал, что я уложу это в конце и надеюсь, что кто-то другой посчитает это полезным.
serializeArray
jQuery не включает поля с отключением, поэтому, если они вам тоже нужны, попробуйте:
var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
data[field.name] = field.value;
});
Кажется странным, что никто не проголосовал и не предложил краткое решение для получения данных списка. Вряд ли какие-либо формы будут одномерными объектами.
Недостатком этого решения, конечно же, является то, что к вашим однотонным объектам нужно будет получить доступ по индексу [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;
}, {});
Не забудьте флажки и переключатели
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
http://api.jquery.com/serializearray/
$('#form').on('submit', function() {
var data = $(this).serializeArray();
});
Это также можно сделать без jQuery с помощью объекта FormData XMLHttpRequest Level 2
http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface
var data = new FormData([form])
То же решение, что и в 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();
}
});
У меня была та же проблема, и я решил ее по-другому.
var arr = new Array();
$(':input').each(function() {
arr.push($(this).val());
});
arr;
Возвращает значение всех полей ввода. Вы можете изменить $ (': input')
, чтобы быть более конкретным.
Этот фрагмент кода будет работать вместо имени, электронная почта вводит имя поля формы
$(document).ready(function(){
$("#form_id").submit(function(event){
event.preventDefault();
var name = $("input[name='name']",this).val();
var email = $("input[name='email']",this).val();
});
});
Если вам нужно получить несколько значений из входов и вы используете [] для определения входов с несколькими значениями, вы можете использовать следующее:
$('#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;
}
}
});
Вдохновленный ответами 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"}
Я использую этот код без каждого цикла:
$('.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;
});
Я надеюсь, что это полезно, а также проще всего.
$("#form").submit(function (e) {
e.preventDefault();
input_values = $(this).serializeArray();
});
Когда мне нужно было сделать 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, чтобы включить флажки и текстовые поля, а также стандартный тип поля выбора.