JQuery Forms Serialize Array

From CoderLearner
Jump to: navigation, search

Description

$.serializeArray() method creates a JavaScript array of objects for JSON string encoding.

Example 1

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Example 1</title>
	<script 
		type="text/javascript" 
	src="jquery.min.js">				 
	</script>
	<script>
	    $().ready(function() {
               $('form').submit(function(){
                  var JSdata = $(this).serializeArray();
                  
                  console.log(JSdata);
                  return false;
               });
	    });
        </script>
<head>
<body> 
  <form>
        <input type="text" name="first"/>
        <input type="text" name="last"/>
        <input type="submit" value="Submit"/>
  </form>
  <span></span>
</body>
</html>

Output

[
  {name: "first",
   value: "bob"
  },
  { 
   name: "last",
   value: "maat"
  }
]

Example 2

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Serialize</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>
        <script>
            $().ready(function() {
                $('form').submit(function(){
                    var JSdata = $(this).serializeArray();
                    $.each(JSdata, function(i,data1) {
                        alert(data1.name+'-->'+data1.value);
                    });
                    return false;
                });
            });
        </script>
    </head>
    <body> 
        <form>
            <input type="text" name="first"/>
            <input type="text" name="last"/>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

Try It

Example 3

Exclude the hidden fields.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Serialize</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>
        <script>
            $().ready(function() {
                $('form').submit(function(){
                    var JSdata = $(":input:not([type=hidden])").serializeArray();

                    $.each(JSdata, function(i,data1) {
                        alert(data1.name+'-->'+data1.value);
                    });
                    return false;
                });
            });
        </script>
    </head>
    <body> 
        <form>
            <input type="hidden" name="mysecret" value="300"/>
            <input type="text" name="first"/>
            <input type="text" name="last"/>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

Try It

Example 4

This example is serialized to use with JSON.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>serializeJSON</title>
        <script 
            type="text/javascript" 
            src="jquery.min.js">				 
        </script>
        <script>
            $().ready(function() {
                // function
                $.fn.serializeJSON = function(){
                    var json = {};
                    $.map($(this).serializeArray(),function(n, i) {
                        json[n['name']] = n['value'];
                    });
                    return json;
                }

                $('form').submit(function(){
                    var JSdata = $(this).serializeJSON();
              
                    console.log(JSdata);
       
                    return false;
                    
                });
            });
        </script>
    </head>
    <body> 
        <form>
            <input type="text" name="first"/>
            <input type="text" name="last"/>
            <input type="submit" value="Submit"/>
        </form>
        <div></div>
    </body>
</html>