Obtain form input fields using jQuery?

Question

I have a form with many input fields.

When I catch the submit form event with jQuery, is it possible to get all the input fields of that form in an associative array?

It's a good question; in fact, I find it really strange that jQuery doesn't have a function that does precisely this. There are functions to get the form data in two different formats, but not the one most convenient for, you know, *scripting* … (Maybe .val() should return such an array if called on a form element?) — Luke Maurer, Mar 18 '11 at 00:19

score 572 · Accepted Answer · edited Dec 23 '11 at 23:01

$('#myForm').submit(function() {
    // get all the inputs into an array.
    var $inputs = $('#myForm :input');

    // not sure if you wanted this, but I thought I'd add it.
    // get an associative array of just the values.
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });

});

Thanks to the tip from Simon_Weaver, here is another way you could do it, using serializeArray:

var values = {};
$.each($('#myForm').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

Note that this snippet will fail on <select multiple> elements.

It appears that the new HTML 5 form inputs don't work with serializeArray in jQuery version 1.3. This works in version 1.4+

score 273 · Answer 2 · edited Mar 27 '15 at 15:12

273

Late to the party on this question, but this is even easier:

$('#myForm').submit(function() {
    // Get all the forms elements and their values in one step
    var values = $(this).serialize();

});

edited Mar 27 '15 at 15:12

DanielST

13,783
7
42
65

answered Sep 18 '09 at 07:20

Lance Rushing

7,540
4
29
34

8

This really is the best answer. It even keeps any array formatting you might have for your input fields. I don't think the answer by nickf would actually keep your data structures intact if it was formed using Zend_Form for example, where you'd have field[something] and field[something_else] as the names of the inputs... at least semantically, I can't see how it would... – msumme Jan 27 '10 at 03:34
43

According to the jQuery API docs, `.serialize()` (http://api.jquery.com/serialize/) puts all of the form's elements in a single string ready for appending to a URL in a query string, essentially mimicking a GET form request. This would not accomplish what nickf's answer accomplishes. – Christopher Parker Mar 02 '10 at 18:22
5

Worth knowing: `.serialize()` also works on just form elements. So `$('form select').serialize()` will serialize the data only for selects. – antitoxic Jun 01 '12 at 10:31
3

Rather than repeating `$('#myForm')`, use $(this). – Jimothy Jul 25 '14 at 19:21
I was using this but my form has various hidden elements (not hidden as in type I mean visually) which I wouldn't want included in the serialize. – Someone Apr 29 '16 at 08:14
1

The result of this method creates a string that is suitable for sending with both GET and POST not just GET. however if anyone want to send form via JSON to API, this method will not work as easy as the method in top answer – AaA Sep 06 '21 at 07:54
`serializeArray` is more useful. – Muhammet Can TONBUL Jul 17 '23 at 08:32

score 24 · Answer 3 · answered Feb 23 '10 at 02:31

24

The jquery.form plugin may help with what others are looking for that end up on this question. I'm not sure if it directly does what you want or not.

There is also the serializeArray function.

answered Feb 23 '10 at 02:31

Simon_Weaver

140,023
84
646
689

score 19 · Answer 4 · edited Feb 24 '16 at 09:50

19

Sometimes I find getting one at a time is more useful. For that, there's this:

var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']");

edited Feb 24 '16 at 09:50

Tilak Raj

1,369
5
31
64

answered Apr 22 '12 at 02:20

Malachi

2,260
3
27
40

Appending `[0].value` to this i.e. `$(...)[0].value;` gave me the value of the input directly, thanks! – Pau Coma Ramirez Sep 13 '16 at 15:01
`$("#form_id :input[name='firstname']").val()` this code also gives me the value directly, thanks for your code, it was very helpfull. – ricardo130 Aug 11 '23 at 14:41

score 13 · Answer 5 · answered Oct 04 '08 at 08:11

13

$('#myForm').bind('submit', function () {
  var elements = this.elements;
});

The elements variable will contain all the inputs, selects, textareas and fieldsets within the form.

answered Oct 04 '08 at 08:11

Quentin

914,110
126
1,211
1,335

score 13 · Answer 6 · answered Nov 27 '14 at 17:27

Here is another solution, this way you can fetch all data about the form and use it in a serverside call or something.

$('.form').on('submit', function( e )){ 
   var form = $( this ), // this will resolve to the form submitted
       action = form.attr( 'action' ),
         type = form.attr( 'method' ),
         data = {};

     // Make sure you use the 'name' field on the inputs you want to grab. 
   form.find( '[name]' ).each( function( i , v ){
      var input = $( this ), // resolves to current input element.
          name = input.attr( 'name' ),
          value = input.val();
      data[name] = value;
   });

  // Code which makes use of 'data'.

 e.preventDefault();
}

You can then use this with ajax calls:

function sendRequest(action, type, data) {
       $.ajax({
            url: action,
           type: type,
           data: data
       })
       .done(function( returnedHtml ) {
           $( "#responseDiv" ).append( returnedHtml );
       })
       .fail(function() {
           $( "#responseDiv" ).append( "This failed" );
       });
}

Hope this is of any use for any of you :)

Chris Wheeler · Answer 7 · 2014-11-10T11:50:51.350

8

http://api.jquery.com/serializearray/

$('#form').on('submit', function() {
    var data = $(this).serializeArray();
});

This can also be done without jQuery using the XMLHttpRequest Level 2 FormData object

http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface

var data = new FormData([form])

edited Nov 10 '14 at 11:50

answered Nov 10 '14 at 11:45

Chris Wheeler

1,623
1
11
18

This worked great for my situation, thank you very much! – user752746 May 10 '23 at 20:34

score 6 · Answer 8 · answered Jun 12 '17 at 07:43

This piece of code will work instead of name, email enter your form fields name

$(document).ready(function(){
  $("#form_id").submit(function(event){
    event.preventDefault();
    var name = $("input[name='name']",this).val();
    var email = $("input[name='email']",this).val();
  });
});

score 6 · Answer 9 · edited Dec 08 '11 at 16:02

Had a similar issue with a slight twist and I thought I'd throw this out. I have a callback function that gets the form so I had a form object already and couldn't easy variants on $('form:input'). Instead I came up with:

    var dataValues = {};
    form.find('input').each(
        function(unusedIndex, child) {
            dataValues[child.name] = child.value;
        });

Its similar but not identical situation, but I found this thread very useful and thought I'd tuck this on the end and hope someone else found it useful.

Oli · Answer 10 · 2008-10-04T02:06:56.060

5

Associative? Not without some work, but you can use generic selectors:

var items = new Array();

$('#form_id:input').each(function (el) {
    items[el.name] = el;
});

edited Oct 04 '08 at 02:06

answered Oct 04 '08 at 02:01

Oli

235,628
64
220
299

actually, Lance's answer keeps the associative array intact for the POST values, and takes a whopping one line of code. – msumme Jan 27 '10 at 03:35
1

why is items an array? you are using it like a plain object. There's no need for the array in here – Jonathan Morales Vélez Mar 13 '15 at 10:18
4

@JonathanMoralesVélez 2008's Oli is no longer around for comment. 2015's agrees with you. – Oli Mar 13 '15 at 10:39

score 5 · Answer 11 · answered Mar 27 '12 at 14:03

5

jQuery's serializeArray does not include disabled fields, so if you need those too, try:

var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
    data[field.name] = field.value;
});

answered Mar 27 '12 at 14:03

Sarah Vessels

30,930
33
155
222

does this read checkbox and radio too (checked state)? wouldn't :input be a better choice? – AaA Sep 06 '21 at 07:58

score 4 · Answer 12 · edited Jun 10 '16 at 14:11

4

Don't forget the checkboxes and radio buttons -

var inputs = $("#myForm :input");
var obj = $.map(inputs, function(n, i) {
  var o = {};
  if (n.type == "radio" || n.type == "checkbox")
    o[n.id] = $(n).attr("checked");
  else
    o[n.id] = $(n).val();
  return o;
});
return obj

edited Jun 10 '16 at 14:11

Igor Ivancha

3,413
4
30
39

answered Feb 03 '11 at 21:40

Man Called Haney

201
2
4

score 4 · Answer 13 · edited May 18 '20 at 22:10

4

$("#form-id").submit(function (e) { 
  e.preventDefault();
  inputs={};
  input_serialized =  $(this).serializeArray();
  input_serialized.forEach(field => {
    inputs[field.name] = field.value;
  })
  console.log(inputs)
});

edited May 18 '20 at 22:10

Adam

3,415
4
30
49

answered May 18 '20 at 18:32

Raushan

104
2

Ryanman · Answer 14 · 2017-07-31T20:44:10.877

Seems strange that nobody has upvoted or proposed a concise solution to getting list data. Hardly any forms are going to be single-dimension objects.

The downside of this solution is, of course, that your singleton objects are going to have to be accessed at the [0] index. But IMO that's way better than using one of the dozen-line mapping solutions.

var formData = $('#formId').serializeArray().reduce(function (obj, item) {
    if (obj[item.name] == null) {
        obj[item.name] = [];
    } 
    obj[item.name].push(item.value);
    return obj;
}, {});

score 2 · Answer 15 · answered Jul 25 '19 at 12:57

2

I hope this is helpful, as well as easiest one.

 $("#form").submit(function (e) { 
    e.preventDefault();
    input_values =  $(this).serializeArray();
  });

answered Jul 25 '19 at 12:57

dipenparmar12

3,042
1
29
39

Oddly this didn't work on the latest version of jquery 3.4.1 – relipse Feb 14 '20 at 19:06

score 2 · Answer 16 · answered Sep 05 '11 at 08:59

2

I had the same problem and solved it in a different way.

var arr = new Array();
$(':input').each(function() {
 arr.push($(this).val());
});
arr;

It returns the value of all input fields. You could change the $(':input') to be more specific.

answered Sep 05 '11 at 08:59

suizo

531
8
24

score 2 · Answer 17 · edited Jun 10 '16 at 14:10

Same solution as given by nickf, but with array input names taken into account eg

<input type="text" name="array[]" />

values = {};
$("#something :input").each(function() {
  if (this.name.search(/\[\]/) > 0) //search for [] in name
  {
    if (typeof values[this.name] != "undefined") {
      values[this.name] = values[this.name].concat([$(this).val()])
    } else {
      values[this.name] = [$(this).val()];
    }
  } else {
    values[this.name] = $(this).val();
  }
});

score 1 · Answer 18 · answered Jun 19 '12 at 09:40

If you need to get multiple values from inputs and you're using []'s to define the inputs with multiple values, you can use the following:

$('#contentform').find('input, textarea, select').each(function(x, field) {
    if (field.name) {
        if (field.name.indexOf('[]')>0) {
            if (!$.isArray(data[field.name])) {
               data[field.name]=new Array();
            }
            data[field.name].push(field.value);
        } else {
            data[field.name]=field.value;
        }
    }                   
});

Roman Grinev · Answer 19 · 2018-04-18T17:30:27.717

1

I am using this code without each loop:

$('.subscribe-form').submit(function(e){
    var arr=$(this).serializeArray();
    var values={};
    for(i in arr){values[arr[i]['name']]=arr[i]['value']}
    console.log(values);
    return false;
});

edited Apr 18 '18 at 17:30

answered Dec 14 '16 at 11:11

Roman Grinev

929
9
18

T.Liu · Answer 20 · 2017-08-23T17:53:45.853

Inspired by answers of Lance Rushing and Simon_Weaver, this is my favourite solution.

$('#myForm').submit( function( event ) {
    var values = $(this).serializeArray();
    // In my case, I need to fetch these data before custom actions
    event.preventDefault();
});

The output is an array of objects, e.g.

[{name: "start-time", value: "11:01"}, {name: "end-time", value: "11:11"}]

With the code below,

var inputs = {};
$.each(values, function(k, v){
    inputs[v.name]= v.value;
});

its final output would be

{"start-time":"11:01", "end-time":"11:01"}

tzazo · Answer 21 · 2020-02-21T16:37:12.453

For multiple select elements (<select multiple="multiple">), I modified the solution from @Jason Norwood-Young to get it working.

The answer (as posted) only takes the value from the first element that was selected, not all of them. It also didn't initialize or return data, the former throwing a JavaScript error.

Here is the new version:

function _get_values(form) {
  let data = {};
  $(form).find('input, textarea, select').each(function(x, field) {
    if (field.name) {
      if (field.name.indexOf('[]') > 0) {
        if (!$.isArray(data[field.name])) {
          data[field.name] = new Array();
        }
        for (let i = 0; i < field.selectedOptions.length; i++) {
          data[field.name].push(field.selectedOptions[i].value);
        }

      } else {
        data[field.name] = field.value;
      }
    }

  });
  return data
}

Usage:

_get_values($('#form'))

Note: You just need to ensure that the name of your select has [] appended to the end of it, for example:

<select name="favorite_colors[]" multiple="multiple">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

score 0 · Answer 22 · answered Apr 15 '12 at 17:56

serialize() is the best method. @ Christopher Parker say that Nickf's anwser accomplishes more, however it does not take into account that the form may contain textarea and select menus. It is far better to use serialize() and then manipulate that as you need to. Data from serialize() can be used in either an Ajax post or get, so there is no issue there.

score 0 · Answer 23 · answered Dec 08 '13 at 07:03

Hope this helps somebody. :)

// This html:
// <form id="someCoolForm">
// <input type="text" class="form-control" name="username" value="...." />
// 
// <input type="text" class="form-control" name="profile.first_name" value="...." />
// <input type="text" class="form-control" name="profile.last_name" value="...." />
// 
// <input type="text" class="form-control" name="emails[]" value="..." />
// <input type="text" class="form-control" name="emails[]" value=".." />
// <input type="text" class="form-control" name="emails[]" value="." />
// </form>
// 
// With this js:
// 
// var form1 = parseForm($('#someCoolForm'));
// console.log(form1);
// 
// Will output something like:
// {
// username: "test2"
// emails:
//   0: ".@....com"
//   1: "...@........com"
// profile: Object
//   first_name: "..."
//   last_name: "..."
// }
// 
// So, function below:

var parseForm = function (form) {

    var formdata = form.serializeArray();

    var data = {};

    _.each(formdata, function (element) {

        var value = _.values(element);

        // Parsing field arrays.
        if (value[0].indexOf('[]') > 0) {
            var key = value[0].replace('[]', '');

            if (!data[key])
                data[key] = [];

            data[value[0].replace('[]', '')].push(value[1]);
        } else

        // Parsing nested objects.
        if (value[0].indexOf('.') > 0) {

            var parent = value[0].substring(0, value[0].indexOf("."));
            var child = value[0].substring(value[0].lastIndexOf(".") + 1);

            if (!data[parent])
                data[parent] = {};

            data[parent][child] = value[1];
        } else {
            data[value[0]] = value[1];
        }
    });

    return data;
};

score 0 · Answer 24 · answered Apr 16 '16 at 19:17

0

All answers are good, but if there's a field that you like to ignore in that function? Easy, give the field a property, for example ignore_this:

<input type="text" name="some_name" ignore_this>

And in your Serialize Function:

if(!$(name).prop('ignorar')){
   do_your_thing;
}

That's the way you ignore some fields.

answered Apr 16 '16 at 19:17

Marcelo Rocha

820
8
7

1

This is more of a comment than an answer since it doesn't answer the original question. – Wai Ha Lee Apr 16 '16 at 19:39
Maybe because he already have tons of answers? It's a complement to the answers he received. – Marcelo Rocha Apr 25 '16 at 11:01
I would implement this with a class name like mandatory if the input must be filled in. then I can check `$('.mandatory');` and `!$('.mandatory');` – lharby May 23 '17 at 09:47
Change `ignore_this` to `data-ignore-this="true"` instead of creating your own attributes that don't validate w3c – zanderwar May 27 '19 at 02:24

score 0 · Answer 25 · answered Oct 05 '10 at 13:14

When I needed to do an ajax call with all the form fields, I had problems with the :input selector returning all checkboxes whether or not they were checked. I added a new selector to just get the submit-able form elements:

$.extend($.expr[':'],{
    submitable: function(a){
        if($(a).is(':checkbox:not(:checked)'))
        {
            return false;
        }
        else if($(a).is(':input'))
        {
            return true;
        }
        else
        {
            return false;
        }
    }
});

usage:

$('#form_id :submitable');

I've not tested it with multiple select boxes yet though but It works for getting all the form fields in the way a standard submit would.

I used this when customising the product options on an OpenCart site to include checkboxes and text fields as well as the standard select box type.

score 0 · Answer 26 · edited Feb 17 '20 at 14:26

0

Try the following code:

jQuery("#form").serializeArray().filter(obje => 
obje.value!='').map(aobj=>aobj.name+"="+aobj.value).join("&")

edited Feb 17 '20 at 14:26

Kate Orlova

3,225
5
11
35

answered Feb 17 '20 at 09:59

Teodor Rautu

1

3

Please explain your answer – Ling Vu Feb 17 '20 at 10:05

Obtain form input fields using jQuery?

26 Answers26

Linked

Related