jquery создать объект из полей формы

<p>как я могу создать объект с полями и значениями формы?</p><p>как этот:</p><pre><code>{ fields: { name: 'foo', email: 'foo@moo.com', comment: 'wqeqwtwqtqwtqwet' } } </code></pre><p>при условии, что форма выглядит так:</p><pre><code><form> <input type="text" name="name" value="foo" /> <input type="text" name="email" value="foo@moo.com" /> <textarea name="comment">wqeqwtwqtqwtqwet</textarea> </form> </code></pre><p>мне нужно знать, как я могу сделать это для любой формы с одной функцией, а не только для конкретной формы.</p>

<p>вы можете сделать это:</p><pre><code>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... </code></pre><p>помните, что формы могут иметь поля с повторяющимися именами, и то, что вы пытаетесь сделать, не поддерживает это. кроме того, <em>порядок</em> полей в формах html может быть значительным. (это обе причины того, что <a href="http://api.jquery.com/serializearray/"><code>serializearray</code></a> работает так, как работает.)</p><p>обратите внимание, что обычная практика html состоит в том, чтобы пропустить отключенные поля. если вы хотите это сделать, проверьте <code>this.disabled</code> перед тем, как получить это значение.</p><hr><p>обратите внимание, что выше (написано два года назад) используется псевдо-селектор jquery. я немного удивлен, обнаружив, что я написал это. как говорится в <a href="http://api.jquery.com/input-selector/">документация для псевдоселектора <code>:input</code></a> , использование его означает, что jquery не может передать селектор нативной переменной <code>queryselectorall</code> браузера (которая теперь есть почти во всех браузерах).</p><p>в настоящее время я бы, наверное, написал:</p><pre><code>$("#theform").find("input, textarea, select, button")... ... если бы я хотел кнопки, или если нет, то$("#theform").find("input, textarea, select")... </code></pre><p>... а затем отфильтровать <code>input[type="button"]</code> и <code>input[type="submit"]</code> внутри <code>each</code>. например. (нет кнопок вообще):</p><pre><code>$("#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's an input with a different type // or it's a textarea or a select... } }); 

var inputs = $("form :input"); var obj = $.map(inputs, function(x, y) { return { key: x.name, value: $(x).val() }; }); console.log(obj); </code></pre>

<p>согласно комментарию на странице <a href="http://api.jquery.com/serializearray/">http://api.jquery.com/serializearray/</a> , вы можете сделать:</p><pre><code>(function( $ ){ $.fn.serializejson=function() { var json = {}; jquery.map($(this).serializearray(), function(n, i){ json[n['name']] = n['value']; }); return json; }; })( jquery ); затем сделайте: var obj = $('form').serializejson(); </code></pre><p>или если вам это нужно с вашим свойством <code>fields</code>, вы можете изменить функцию или сделать это:</p><pre><code>var obj = {fields: $('form').serializejson()}; или вы можете просто использовать serializearray(), если вы не возражаете против этого формата вывода.

в jquery есть функция serialize (), например $ ('# myform'). serialize ()</p><p>это то, что вы ищете?</p><p>update: упс, может, вместо этого попробуйте serializearray (), он должен дать вам массив имени и значения.</p>

<p>вот простое решение:</p><p><kbd> <a href="https://jsfiddle.net/ddan/rfesmgy9/">see demo</a> </kbd></p><pre><code>$(".form-sample").serializearray().map(function(x){data[x.name] = x.value;}); 

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; } это обобщенная функция, которая создает объект для каждой формы на вашей странице

таким образом, вы ловите все значения из нескольких выборок или групп флажков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; }; </code></pre>

<p>поэтому я всегда стараюсь поместить обертку в форму отправки.</p><p>это особенно важно для отправки форм, которые работают через ajax.</p><p>первое, что нужно сделать, это взять форму при отправке.</p><pre><code>$(".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; }); </code></pre><p>это обернет любую форму, которая имеет класс «ajax-form», и отправит serializearray в функцию, которая называется objectify form, которая будет возвращать объект всех значений этой формы.</p><pre><code>function objectifyform(formarray) { returnarray = {}; for (var i = 0; i < formarray.length; i++) { returnarray[formarray[i]['name']] = formarray[i]['value']; } return returnarray; } </code></pre>

<p>много сложных способов, которые не работают в некоторых случаях. тем временем вы можете использовать formdata</p><pre><code> 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); </code></pre><p>это именно то, что вы хотите. это обрабатывает все.</p>