Using jQuery serializeArray() Method

The jQuery serializeArray() method simply creates an array of objects (name and value) by serializing values of HTML form. This is very useful when posting data of HTML form for processing. Let’s take a very simple example to see how the  jQuery serializeArray() method works.

The following HTML form has only two input fields. In order to show how jQuery serializing the values of the input fields, a output Box DIV layer has been added.

Here’s the codes of the webpage and HTML form.

<html>
<head>
        <title>Using jQuery serializeArray() Method</title>
        <link href="stylesheet.css" rel="stylesheet">

        <script src="jquery.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $("#myForm").submit(function(){
                    return false;
                });

                $('#btnSubmit').click(function() {

                    var data = $("#myForm :input").serializeArray();

                    $("#outputBox").text((data).toSource());

                });    
            });
        </script>
</head>
<body> 

<h1>Using jQuery serializeArray() Method</h2>

<div id="container">

    <strong>Member Area</strong>

    <form id="myForm" name="myForm" action="member.php" method="POST">
    <p>First Name: <input type="text" name="txtFirstName" id="txtFirstName"> </p>
    <p>Last Name: <input type="text" name="txtLastName" id="txtLastName"> </p>            
    <button type="submit" name="btnSubmit" id="btnSubmit">Submit</button>            
    </form>

    <p>Output Box</p>
    <div id="outputBox">
      <p>Display output here...</p>
      <p>&nbsp;</p>
    </div>

</div>

</body>
</html>

The above jQuery codes are very simple and quite easy to understand.

When the Submit button is clicked, the values of input fields (First Name and Last Name) are serialized into an array, and then assigned to a declared variable (data).

$('#btnSubmit').click(function() {

    var data = $("#myForm :input").serializeArray();

});

In order to display the contents of the object of serialized array, we use the jQuery toSource Method.

$("#outputBox").text((data).toSource());

Note:
Actually you can also use alert((data).toSource()); to display the array object in an alert message box.

Here’s the result when a user enter the information of the input fields and click on the Submit button:

As you can see, the jQuery serializeArray() method created an array of objects with name and value.

[{name:"txtFirstName", value:"Peter"},
{name:"txtLastName", value:"Pan"}]

Once the values of input fields are contained in an array, they can be manipulated easily.

Download
Click here to download jQuery serializeArray() Method Example Source Code.

Since the jQuery serializeArray() method create an array of objects  with name and value, this is sometimes better to transform to an ordinary array. This way, the values can be obtained easily. Here’s the codes:

<!DOCTYPE html>
<html>
<head>
        <title>Using jQuery serializeArray() Method</title>
        <link href="stylesheet.css" rel="stylesheet">

        <script src="jquery.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $("#myForm").submit(function(){
                    return false;
                });

                $('#btnSubmit').click(function() {

                    var data = $("#myForm :input").serializeArray();

                    // Use alert message box to display the array object
                    //alert((data).toSource());

                    // Display the array object in outputBox DIV layer
                    //$("#outputBox").text((data).toSource());

                    // Transform to an ordinary Array
                    var obj = {};
                    for (var i = 0, l = data.length; i < l; i++) {
                        obj[data[i].name] = data[i].value;
                    }

                    // Get the element of the Array
                    // obj[data[0].name] -> Peter
                    // obj[data[1].name] -> Pan
                    $("#outputBox").text( obj[data[0].name] + " " + obj[data[1].name] );

                });    
            });
        </script>
</head>
<body> 

<h1>Using jQuery serializeArray() Method</h2>

<div id="container">

    <strong>Member Area</strong>

    <form id="myForm" name="myForm" action="member.php" method="POST">
    <p>First Name: <input type="text" name="txtFirstName" id="txtFirstName"> </p>
    <p>Last Name: <input type="text" name="txtLastName" id="txtLastName"> </p>            
    <button type="submit" name="btnSubmit" id="btnSubmit">Submit</button>            
    </form>

    <p>Output Box</p>
    <div id="outputBox">
      <p>Display output here...</p>
      <p>&nbsp;</p>
    </div>

</div>

</body>
</html>

This way, the value can be obtained as an ordinary array:

obj[data[i].name]

//obj[data[0].name] -> Peter
//obj[data[1].name] -> Pan

Here’s the result when a user enter the information of the input fields and click on the Submit button:

Download
Click here to download jQuery serializeArray() Method Example Source Code.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>