In this example, we’ll talk about
serialize(), a popular method of jQuery. The
serialize() method serializes a set of input elements into a string of data. It creates a URL encoded text string by serializing form values.
You can select one or more form elements (like input and/or text area), or the form element itself. The serialized values can be used in the URL query string when making an AJAX request.
jQuery website describes this method as it encodes a set of form elements as a string for submission. This is maybe the easiest way to understand what the method does.
It sets things up (meaning gets values of input fields, but not only) for you to get the right results when considering form submission.
1. Basic Document Setup
To begin, create a new HTML document and add the following basic syntax inside like so:
Note that the jQuery library is linked from Google Hosted Libraries, that means you don’t need to have it locally.
2. Application of serialize()
.serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as
$( "input, textarea, select" ).serialize();
2.1 A Visual Approach
2.2 A Simple Example
Let’s start off with simple example where we use the method and show the result upon pressing a button:
<!-- HTML SECTION --> <form action=""> First name: <input type="text" name="FirstName" value="WebCode"><br> Last name: <input type="text" name="LastName" value="Geeks"><br> </form> <button>Serialize</button> <div></div>
So, basically there is a
form from which values are going to be fetched, a
button that will trigger the method to execute and a blank
div to put the result. Next, what we want to do is select the button in jQuery, and on the click event find the div and put there the text that came from form serialize.
2.3 A More Detailed Example
Serialize does what we just tried, and it is the same for every form, but let’s see a more actual form application. Again, we’d have a form some element to put the result, which is coming as text:
<!-- HTML SECTION --> <form action="#" id="input_form"> first name: <input type="text" name="first name" id="first name"/><br /> last name: <input type="text" name="last name" id="last name"/><br /> email: <input type="text" name="email" id="email"/><br /> <input type="submit" value="send" name="submit" /> </form>
This time, we’ll be listening for the
submit event and after saving the form serialize in a variable, we are going to append it to the html of the paragraph like so:
serialize() is a simple yet powerful solution when we think of extremely long forms and we witnessed how serialize() resolves the problem of extracting content with a single line of code.
By using this method we can enjoy another advantage: The eventual adding or removing of fields from the form should not bring any modification to the jQuery code, with positive effects on maintainability.
You can download the full source code of this example here: jQuery Serialize