How can I get form data with JavaScript/jQuery?

Question

Is there a simple, one-line way to get the data of a form as it would be if it was to be submitted in the classic HTML-only way?

For example:

<form>
    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />
    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
</form>

Output:

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

Something like this is too simple, since it does not (correctly) include textareas, selects, radio buttons and checkboxes:

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

Another question similar to this: stackoverflow.com/questions/169506/… — Marcelo Rodovalho
– Marcelo Rodovalho, Commented Jun 12, 2013 at 20:13

khuong tran · Accepted Answer · 2024-07-09 08:22:55Z

1

2024 solution

Almost answer is correctly. But it take a lot of code, or it does not provide key/value object. Here is mine

const formData = new FormData(document.querySelector('form'));
const data = Object.fromEntries(data.entries());

answered Jul 9, 2024 at 8:22

khuong tran

4301 gold badge5 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander · Accepted Answer · 2014-06-12 18:29:39Z

0

You are all not fully correct. You cannot write:

formObj[input.name] = input.value;

Because this way if you have multiselect list - its values will be overwritten with the last one, since it's transmitted as: "param1" : "value1", "param1" : "value2".

So, correct approach is:

if (formData[input.name] === undefined) {
    formData[input.name] = input.value;
}
else {
    var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
    $.merge(inputFieldArray, [input.value]);
    formData[input.name] = $.merge([], inputFieldArray);
}

answered Jun 12, 2014 at 18:29

Alexander

1,2831 gold badge17 silver badges24 bronze badges

Comments

user1101791 · Accepted Answer · 2015-01-17 09:53:26Z

0

This method should do it. It serializes the form data and then converts them to an object. Takes care of groups of checkboxes as well.

function getFormObj(formId) {
  var formParams = {};
  $('#' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}

answered Jan 17, 2015 at 9:53

user1101791

4343 silver badges5 bronze badges

Collectives™ on Stack Overflow

How can I get form data with JavaScript/jQuery?

33 Answers 33

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

33 Answers 33

Comments

Comments

Comments

Linked

Related