The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string. It operates on a jQuery collection of forms and/or form controls. The controls can be of several types:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<form>

<div><inputtype="text"name="a"value="1"id="a"></div>

<div><inputtype="text"name="b"value="2"id="b"></div>

<div><inputtype="hidden"name="c"value="3"id="c"></div>

<div>

<textareaname="d"rows="8"cols="40">4</textarea>

</div>

<div><selectname="e">

<optionvalue="5"selected="selected">5</option>

<optionvalue="6">6</option>

<optionvalue="7">7</option>

</select></div>

<div>

<inputtype="checkbox"name="f"value="8"id="f">

</div>

<div>

<inputtype="submit"name="g"value="Submit"id="g">

</div>

</form>

The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute. No submit button value is serialized since the form was not submitted using a button. Data from file select elements is not serialized. Elements that do not contain a value attribute are represented with the empty string value.

This method can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>. However, it is typically easier to select the <form> element itself for serialization:

1

2

3

4

$( "form" ).submit(function( event ) {

console.log( $( this ).serializeArray() );

event.preventDefault();

});

This produces the following data structure (provided that the browser supports console.log):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

[

{

name: "a",

value: "1"

},

{

name: "b",

value: "2"

},

{

name: "c",

value: "3"

},

{

name: "d",

value: "4"

},

{

name: "e",

value: "5"

}

]

Example:

Get the values from a form, iterate through them, and append them to a results display.