jQuery create object from form fields

Question

How can I create a object with a form's fields and values?

like this one:

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

   }
}

assuming the form looks like this:

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

I need to know how can I do this for any form with a single function, not just a particular form.

Answer 1

You can do this:

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...

Beware that forms can have fields with repeated names, and what you're trying to do doesn't support that. Also, the order of fields in HTML forms can be significant. (These are both reasons that serializeArray works the way it does.)

Note that normal HTML practice is to omit disabled fields. If you want to do that, check this.disabled before grabbing the value as well.

---

Note that the above (written two years ago) uses a jQuery pseudo-selector. I'm a bit surprised to find that I wrote that. As it says in the documentation for the :input pseudo-selector, using it means that jQuery can't hand off the selector to the browser's native querySelectorAll (which nearly all browsers now have).

Nowadays I'd probably write:

$("#theForm").find("input, textarea, select, button")...

...if I wanted buttons, or if not then

$("#theForm").find("input, textarea, select")...

...and then filter out input[type="button"] and input[type="submit"] inside the each. E.g. (no buttons at all):

$("#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

As per a comment on the http://api.jquery.com/serializeArray/ page, you can do:

(function( $ ){
    $.fn.serializeJSON=function() {
        var json = {};
        jQuery.map($(this).serializeArray(), function(n, i){
            json[n['name']] = n['value'];
        });
        return json;
    };
})( jQuery );

Then do:

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

or if you need it with your fields property, you can modify the function or do this:

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

Or you can just use serializeArray() if you don't mind that format of output.

Answer 4

Here is a simple solution:

See Demo

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

Answer 5

jquery has a serialize() function on froms like $('#myform').serialize()

is this what you're looking for?

update: oops, maybe try serializeArray() instead, it should give you an array of name and value.

Answer 6

This way you catch all values from multiple selects or groups of checkboxes

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 7

A lot of complicated ways which do not work in some cases. In the meantime you can use the 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);

is exactly what you want. It handles everything.

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

it's a generalized function that creates an object for each form in your page

Answer 9

So I always try to put a wrapper among form submits.

This is especially important for form submits that run over ajax.

The first thing to do is grab the form on 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;
});

This will wrap any form that has a class of "ajax-form" and send the serializeArray to a function that is called objectify form which will return an object of all of the values of that form.

function objectifyForm(formArray) {
    returnArray = {};
    for (var i = 0; i < formArray.length; i++) {
        returnArray[formArray[i]['name']] = formArray[i]['value'];
    }
    return returnArray;
}

Answer 10

Simple form code

<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 Code:

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

Answer 11

If you want to spare any redundand element selectors, you can access the FormData from within the submit event handler function. The below code snippet will print out .

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>

Edit: I found that this is missing one thing: FormData can hold multiple values for the same key. In that case, you would need something like

const allEntries = [...form_data.keys()].reduce((all, form_key) => {
    all[form_key] = form_data.getAll(form_key)
    return all
}, {})