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

Question

Как я могу создать объект с полями и значениями формы?

как этот:

{
  fields:
   {
      name: 'foo',
      email: 'foo@moo.com',
      comment: 'wqeqwtwqtqwtqwet'     

   }
}

при условии, что форма выглядит следующим образом:

<form>
  <input type="text" name="name" value="foo" />
  <input type="text" name="email" value="foo@moo.com" />
  <textarea name="comment">wqeqwtwqtqwtqwet</textarea>
</form>

Мне нужно знать, как я могу сделать это для любой формы с одной функцией, а не только для конкретной формы.

Answer 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's an `input` with a different `type`
        // or it's a `textarea` or a `select`...
    }
});

Answer 2

var inputs = $("form :input");
var obj = $.map(inputs, function(x, y) {
    return {
        Key: x.name,
        Value: $(x).val()
    };
});
console.log(obj);

Answer 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 );

Затем выполните:

var obj = $('form').serializeJSON();

или, если вам нужно это свойство fields, вы можете изменить функцию или сделать это:

var obj = {fields: $('form').serializeJSON()};

Или вы можете просто использовать serializeArray(), если не возражаете против этого формата вывода.

Answer 4

В jquery есть функция serialize (), например, $ ('# myform'). Serialize ()

это то, что вы ищете?

обновление: упс, возможновместо этого попробуйте serializeArray (), он должен дать вам массив имени и значения.

Answer 5

Множество сложных способов, которые в некоторых случаях не работают. А пока вы можете использовать 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);

это именно то, что вы хотите. Он обрабатывает все.

Answer 6

Вот простое решение:

См. Демонстрацию

$(".form-sample").serializeArray().map(function(x){data[x.name] = x.value;});

Answer 7

Таким образом вы перехватываете все значения из нескольких выборок или групп флажков

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;
};

Answer 8

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;
}

это обобщенная функция, которая создает объект для каждой формы на вашей странице

Answer 9

Если вы хотите сэкономить любые избыточные селекторы элементов, вы можете получить доступ к 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>

Answer 10

Простой код формы

<form id="myForm" name="myForm">
    <input type="text" name="email" value="fazelman@test.com"/>
    <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;
    }
}