У меня есть форма со многими полями ввода.
Когда я поймаю событие формы отправки с помощью jQuery, можно ли получить все поля ввода этой формы в ассоциативном массиве?
Получить поля ввода формы с помощью jQuery?
Ответ 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>.
Похоже, что новые входы формы HTML 5 не работают с serializeArray в jQuery версии 1.3. Это работает в версии 1.4 +
Ответ 2
Поздно к партии по этому вопросу, но это еще проще:
$('#myForm').submit(function() {
// Get all the forms elements and their values in one step
var values = $(this).serialize();
});
Ответ 3
Плагин jquery.form может помочь с тем, что другие ищут в этом вопросе. Я не уверен, что он делает то, что вам нужно, или нет.
Существует также функция serializeArray.
Ответ 4
Иногда я нахожу получение одного за один раз более полезным. Для этого есть:
var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']");
Ответ 5
$('#myForm').bind('submit', function () {
var elements = this.elements;
});Переменная элементов будет содержать все входы, выборки, текстовые поля и поля в форме.
Ответ 6
Вот еще одно решение, таким образом вы можете получить все данные о форме и использовать их в вызове на сервере или что-то в этом роде.
$('.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" );
});
}
Надеюсь, это будет полезно для любого из вас:)
Ответ 7
У вас была подобная проблема с небольшим завихрением, и я подумал, что выброшу это. У меня есть функция обратного вызова, которая получает форму, поэтому я уже имел объект формы и не мог легко выбирать варианты $('form:input'). Вместо этого я придумал:
var dataValues = {};
form.find('input').each(
function(unusedIndex, child) {
dataValues[child.name] = child.value;
});
Схожая, но не идентичная ситуация, но я нашел эту нить очень полезной и подумал, что я задержу это в конце и надеюсь, что кто-то другой найдет ее полезной.
Ответ 8
Ассоциативный? Не без какой-либо работы, но вы можете использовать общие селектора:
var items = new Array();
$('#form_id:input').each(function (el) {
items[el.name] = el;
});
Ответ 9
jQuery serializeArray не включает отключенные поля, поэтому, если вам тоже нужны, попробуйте:
var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
data[field.name] = field.value;
});
Ответ 10
Не забывайте, что флажки и переключатели -
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
Ответ 11
http://api.jquery.com/serializearray/
$('#form').on('submit', function() {
var data = $(this).serializeArray();
});
Это также можно сделать без jQuery с помощью объекта XMLHttpRequest Level 2 FormDatap >
http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface
var data = new FormData([form])
Ответ 12
У меня была та же проблема, и я решил ее по-другому.
var arr = new Array();
$(':input').each(function() {
arr.push($(this).val());
});
arr;
Он возвращает значение всех полей ввода. Вы можете изменить $(':input'), чтобы быть более конкретным.
Ответ 13
То же решение, что указано 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();
}
});
Ответ 14
Кажется странным, что никто не поддержал или не предложил краткое решение для получения списка данных. Вряд ли любые формы будут одномерными объектами.
Недостатком этого решения является, конечно же, то, что ваши одноэлементные объекты должны быть доступны по индексу [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;
}, {});
Ответ 15
Этот фрагмент кода будет работать вместо имени, 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();
});
});
Ответ 16
Если вам нужно получить несколько значений с входов, и вы используете [] для определения входов с несколькими значениями, вы можете использовать следующее:
$('#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;
}
}
});
Ответ 17
Я использую этот код без каждого цикла:
$('.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;
});
Ответ 18
Вдохновленный ответами 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"}
Ответ 19
Когда мне нужно было выполнить вызов 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, чтобы включить флажки и текстовые поля, а также стандартный тип окна выбора.
Ответ 20
serialize() - лучший метод. @Кристофер Паркер говорит, что Nickf anwser выполняет больше, однако он не принимает во внимание, что форма может содержать textarea и выбирать меню. Гораздо лучше использовать serialize(), а затем манипулировать тем, что вам нужно. Данные из serialize() могут использоваться либо в сообщении Ajax, либо в get, поэтому там нет проблем.
Ответ 21
Надеюсь, это поможет кому-то.:)
// 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;
};
Ответ 22
Все ответы хорошие, но если есть поле, которое вы хотели бы игнорировать в этой функции? Легко, дайте поле свойство, например ignore_this:
<input type="text" name="some_name" ignore_this>
И в вашей функции Serialize:
if(!$(name).prop('ignorar')){
do_your_thing;
}
То, как вы игнорируете некоторые поля.
Ответ 23
Я надеюсь, что это полезно, а также самый простой.
$("#form").submit(function (e) {
e.preventDefault();
input_values = $(this).serializeArray();
});