simone simone - 1 year ago 79
HTML Question

How to get a key/value data set from a HTML form

I'm simply looking for a way to get all the values from a


I searched the Web for a while, stumbling across
, which seems quite what I'm looking for.

However its API is not available on any browser, so I need an alternative.

What I need in my specific case is an object of key/value pairs. For example:

<input type="text" name="firstname" value="John" />
<input type="text" name="surname" value="doe" />
<input type="email" name="email" value="" />
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />

The object should be:

firstname: "John",
surname: "doe",
email: "",
gender: ""

Edit: The above is just an example, it should work not only with
but also with the other tags (e.g.
and so on... even
<input type="file">
should be supported).

Answer Source

Without a strong definition of what should happen with edge cases, and what level of browser support is required, it's difficult to give a single perfect answer to the question.

There are a lot of form behaviors that are easy to miss, which is why I recommend using a well-maintained function from a library, such as jQuery's serializeArray():


I understand that there's a big push recently to move away from needlessly including jQuery, so for those who are interested in a vanilla JS solution serializeArray just won't do.

The next difficulty comes from determining what level of browser support is required. HTMLFormElement.elements significantly simplifies a serialization implementation, and selecting the form-associated elements without it is quite a pain.


<form id="example">...</form>
<input type="text" form="example" name="lorem" value="ipsum"/>

A conforming implementation needs to include the input element. I will assume that I can use it, and leave polyfilling it as an exercise to the reader.

After that it'd unclear how <input type="file"/> should be supported. I'm not keen on needlessly serializing file elements into a string, so I've made the assumption that the serialization will be of the input's name and value, even though the value is practically useless.

Lastly, an input structure of:

    'input name': 'value',
    'textarea name': 'value'

Is excessively naive as it doesn't account for <select multiple> elements, or cases where two inputs have the same name. I've made the assumption that the input would be better as:

        name: 'input name',
        value: 'value'
        name: 'textarea name',
        value: 'value'

...and again leave transforming this into a different structure as an exercise for the reader.

Give me teh codez already!

var serialize = (function (slice) {
    return function (form) {
        //no form, no serialization
        if (form == null)
            return null;

        //get the form elements and convert to an array
            .filter(function (element) {
                //remove disabled elements
                return !element.disabled;
            }).filter(function (element) {
                //remove unchecked checkboxes and radio buttons
                return !/^input$/i.test(element.tagName) || !/^(?:checkbox|radio)$/i.test(element.type) || element.checked;
            }).filter(function (element) {
                //remove <select multiple> elements with no values selected
                return !/^select$/i.test(element.tagName) || element.selectedOptions.length > 0;
            }).map(function (element) {
                switch (element.tagName.toLowerCase()) {
                    case 'checkbox':
                    case 'radio':
                        return {
                            value: element.value === null ? 'on' : element.value
                    case 'select':
                        if (element.multiple) {
                            return {
                                    .map(function (option) {
                                        return option.value;
                        return {
                            value: element.value
                        return {
                            value: element.value || ''
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download