JQuery создать объект из полей формы
Как создать объект с полями и значениями формы?
как этот:
{
fields:
{
name: 'foo',
email: '[email protected]',
comment: 'wqeqwtwqtqwtqwet'
}
}
при условии, что форма выглядит следующим образом:
<form>
<input type="text" name="name" value="foo" />
<input type="text" name="email" value="[email protected]" />
<textarea name="comment">wqeqwtwqtqwtqwet</textarea>
</form>
Мне нужно знать, как это сделать для любой формы с помощью одной функции, а не только определенной формы.
Ответы
Ответ 1
Вы можете сделать это:
var fields = {};
$("#theForm").find(":input").each(function() {
// The selector will match buttons; if you want to filter
// them out, check `this.tagName` and `this.type`; see
// below
fields[this.name] = $(this).val();
});
var obj = {fields: fields}; // You said you wanted an object with a `fields` property, so...
Остерегайтесь того, что формы могут иметь поля с повторяющимися именами, и то, что вы пытаетесь сделать, не поддерживает это. Кроме того, порядок полей в HTML-формах может быть значительным. (Это обе причины, по которым serializeArray
работает так, как он делает.)
Обратите внимание, что обычная практика HTML заключается в том, чтобы опустить отключенные поля. Если вы хотите сделать это, проверьте this.disabled
, прежде чем захватывать значение.
Обратите внимание, что выше (написано два года назад) используется псевдоселектор jQuery. Я немного удивлен, обнаружив, что написал это. Как говорится в документации для псевдо-селектора :input
, использование этого означает, что jQuery не может передать селектор в родной браузер querySelectorAll
(теперь почти все браузеры).
В настоящее время я бы, вероятно, написал:
$("#theForm").find("input, textarea, select, button")...
... если мне нужны кнопки, или если нет, то
$("#theForm").find("input, textarea, select")...
... и затем отфильтруйте input[type="button"]
и input[type="submit"]
внутри each
. Например. (никаких кнопок вообще):
$("#theForm").find("input, textarea, select").each(function() {
var inputType = this.tagName.toUpperCase() === "INPUT" && this.type.toUpperCase();
if (inputType !== "BUTTON" && inputType !== "SUBMIT") {
// ...include it, either it an `input` with a different `type`
// or it a `textarea` or a `select`...
}
});
Ответ 2
var inputs = $("form :input");
var obj = $.map(inputs, function(x, y) {
return {
Key: x.name,
Value: $(x).val()
};
});
console.log(obj);
Ответ 3
В соответствии с комментарием на странице http://api.jquery.com/serializeArray/ вы можете:
(function( $ ){
$.fn.serializeJSON=function() {
var json = {};
jQuery.map($(this).serializeArray(), function(n, i){
json[n['name']] = n['value'];
});
return json;
};
})( jQuery );
Тогда do:
var obj = $('form').serializeJSON();
или если вам это необходимо с вашим свойством fields
, вы можете изменить функцию или сделать это:
var obj = {fields: $('form').serializeJSON()};
Или вы можете просто использовать serializeArray()
, если вы не против этого формата вывода.
Ответ 4
jquery имеет функцию serialize(), например from
$ ( '# MyForm'). Сериализации()
это то, что вы ищете?
обновление:
oops, возможно, попробуйте serializeArray() вместо этого, он должен предоставить вам массив имен и значений.
Ответ 5
function formsToObj(){
var forms = [];
$('form').each(function(i){
forms[i] = {};
$(this).children('input,textarea,select').each(function(){
forms[i][$(this).attr('name')] = $(this).val();
});
});
return forms;
}
это обобщенная функция, которая создает объект для каждой формы на вашей странице
Ответ 6
Таким образом вы улавливаете все значения из нескольких выборок или групп флажков
function form2obj(form) {
var arr = $(form).serializeArray(), obj = {};
for(var i = 0; i < arr.length; i++) {
if(obj[arr[i].name] === undefined) {
obj[arr[i].name] = arr[i].value;
} else {
if(!(obj[arr[i].name] instanceof Array)) {
obj[arr[i].name] = [obj[arr[i].name]];
}
obj[arr[i].name].push(arr[i].value);
}
}
return obj;
};
Ответ 7
Вот простое решение:
See Demo
$(".form-sample").serializeArray().map(function(x){data[x.name] = x.value;});
Ответ 8
Много сложных способов, которые не работают в некоторых случаях. В то же время вы можете использовать FormData
var fields = {};
var myform = document.getElementById('ThisIsTheIDOfMyForm');
var myformdata = new FormData(myform);
for (var [key, value] of myformdata.entries()) {
fields[key] = value;
}
console.log(fields);
это именно то, что вы хотите. Это обрабатывает все.
Ответ 9
Поэтому я всегда пытаюсь поместить обертку среди форм.
Это особенно важно для форм, которые выполняются над ajax.
Первое, что нужно сделать, это захватить форму на submit.
$(".ajax-form").submit(function(){
var formObject = objectifyForm($(this).serializeArray());
// Do stuff with formObject
// always add return false to stop the form from actually doing a post anywhere
return false;
});
Это обернет любую форму, которая имеет класс "ajax-form" и отправит serializeArray к функции, которая называется objectify form, которая вернет объект всех значений этой формы.
function objectifyForm(formArray) {
returnArray = {};
for (var i = 0; i < formArray.length; i++) {
returnArray[formArray[i]['name']] = formArray[i]['value'];
}
return returnArray;
}
Ответ 10
Простой код формы
<form id="myForm" name="myForm">
<input type="text" name="email" value="[email protected]"/>
<input type="checkbox" name="gender">
<input type="password" name="pass" value="123"/>
<textarea name="message">Enter Your Message Her</textarea>
</form>
Код Javascript:
var data = {};
var element = document.getElementById("form").elements
for (var i = 0; i < element.length; i++) {
switch (element[i].type) {
case "text": data[element[i].name] = element[i].value; break;
case "checkbox": data[element[i].name] = element[i].checked; break;
case "password": data[element[i].name] = element[i].checked; break;
case "textarea": data[element[i].name] = element[i].value; break;
}
}
Ответ 11
Если вы хотите избавиться от каких-либо избыточных и селекторных элементов, вы можете получить доступ к FormData
из функции обработчика события submit. Приведенный ниже фрагмент кода будет распечатан
.
function submitForm(formElement) {
const formData = new FormData(formElement)
const allEntries = [...formData.entries()]
.reduce((all, entry) => {
all[entry[0]] = entry[1]
return all
}, {})
console.log(allEntries)
return false;
}
<form onsubmit="return submitForm(this)">
<input name="searchTerm">
<input name="includeBananas" type="checkbox">
<button>Submit</button>
</form>