Transform HTML form fields into JS object using jQuery

Other Questions JavaScript
1

I need to turn my HTML form into a JavaScript object automatically. Right now I know about $('#myform').serialize() but that gives me a string which is not what I want. There’s also $('#myform').serializeArray() but that returns an array format instead of a proper object.

What I’m looking for is a way to grab all the form inputs and convert them directly into a JavaScript object without manually going through each field one by one. Is there a built-in jQuery method for this or do I need to write custom code?

For example, if I have a form with name and email fields, I want to get something like {name: 'John', email: '[email protected]'} as the result.

2

Here’s a simple jQuery extension that’ll do the conversion. Add this code once and use it anywhere:

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Just call $('#myform').serializeObject() and you’ll get the object format you want. Bonus: it handles multiple fields with the same name by turning them into arrays - super handy for checkboxes or multi-select dropdowns.

3

there’s no built-in method in jQuery for exactly what u want, but u can easily convert the output of serializeArray(). just do let obj = {}; $('#myform').serializeArray().forEach(item => obj[item.name] = item.value); and you’ll get a nice js object from your form inputs.

4

You can also use the reduce method - it’s more functional. Try $('#myform').serializeArray().reduce((obj, item) => { obj[item.name] = item.value; return obj; }, {}) for the same result. I’ve used this approach for years and it’s rock solid. Just heads up - this overwrites duplicate field names. If you’ve got multiple checkboxes with the same name, you’ll only get the last value. Not a problem for basic forms, but something to consider for your specific setup.