Copyright © tutorialspoint.com

# Jquery - serializeArray( ) Method

# Description:

The serializeArray( ) method serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with.

The JSON structure returned is not a string. You must use a plugin or third-party library to "stringify".

# Syntax:

Here is the simple syntax to use this method:

    $.serializeArray( )

## Parameters:

Here is the description of all the parameters used by this method:

- NA

# Example:

Assuming we have following PHP content in /jquery/serialize.php file:

    <?php
    if( $_REQUEST["name"] )
    {
       $name = $_REQUEST['name'];
       echo "Welcome ". $name;
       $age = $_REQUEST['age'];
       echo "<br />Your age : ". $age;
       $sex = $_REQUEST['sex'];
       echo "<br />Your gender : ". $sex;
    }
    ?>

Following is a simple example a simple showing the usage of this method:

    <html>
    <head>
    <title>the title</title>
       <script type="text/javascript"
       src="/jquery/jquery-1.3.2.min.js"></script>
       <script type="text/javascript" language="javascript">
      $(document).ready(function() {
          $("#driver").click(function(event){
              $.post(
                 "/jquery/serialize.php",
                 $("#testform").serializeArray(),
    	             function(data) {
                    $('#stage1').html(data);
                 }
              );
              var fields = $("#testform").serializeArray();
              $("#stage2").empty();
              jQuery.each(fields, function(i, field){
                $("#stage2").append(field.value + " ");
              });
          });
       });
       </script>
    </head>
    <body>
       <p>Click on the button to load result.html file:</p>
       <div id="stage1" style="background-color:blue;">
              STAGE - 1
       </div>
       <br />
       <div id="stage2" style="background-color:blue;">
              STAGE - 2
       </div>
    <form id="testform">
     <table>
     <tr>
     <td><p>Name:</p></td>
     <td><input type="text" name="name" size="40" /></td>
     </tr>
     <tr>
     <td><p>Age:</p></td>
     <td><input type="text" name="age" size="40" /></td>
     </tr>
      <tr>
     <td><p>Sex:</p></td>
     <td> <select name="sex">
       <option value="Male" selected>Male</option>
       <option value="Female" selected>Female</option>
       </select></td>
     </tr>
      <tr>
     <td colspan="2">
       <input type="button" id="driver" value="Load Data" />
     </td>
     </tr>
    </table>
    </form>
    </body>
    </html>

To understand it in better way you can Try it yourself.

Copyright © tutorialspoint.com