jQuery serialize()

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

jQuery serialize()

jQuery serialize() method is used to create a text string in standard URL-encoded notation. It is used in form controls like <input>, <textarea>, <select> etc. It serializes the form values so that its serialized values can be used in the URL query string while making an AJAX request.

Syntax:

  1. $ (selector).serialize()   

jQuery serialize() example

Let's take an example which serializes a form values.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
  5. <script>  
  6. $(document).ready(function(){  
  7.     $("button").click(function(){  
  8.         $("div").text($("form").serialize());  
  9.     });  
  10. });  
  11. </script>  
  12. </head>  
  13. <body>  
  14. <form action="">  
  15.   First name: <input type="text" name="FirstName" value="Sonoo"><br>  
  16.   Last name: <input type="text" name="LastName" value="Jaiswal"><br>  
  17. </form>  
  18. <button>Serialize form values</button>  
  19. <div></div>  
  20. </body>  
  21. </html>  

Test it Now

Note: Only successful controls are serialized to the string. It is not possible to serialize the form submitted by a submit button unless the form was submitted using a button.