Get All the Values of All Input Boxes in JQUERY with the Serialize Function

Guest Posts Paolo Nikko Nuñal

In the last article I showed you on how you can get the data inputted on input fields using JQUERY. However, if you are dealing with lots of fields like say a form that has 10 inputs, like first name, last name, address, city, state, zip code and etc., the last method I showed to you is not advisable as your code will be too long to handle.

Luckily, there is a so called function in JQUERY called "serialize()" that can easily get all the data that is found on your form. Check out the code below.

Code


<form id="form">
First Name :  <input name="fname">
Last Name  :  <input name="lname">
Address :     <input name="address">
Contact No. : <input name="contact">
Country:      <input name="country">
City:         <input name="city">
</form>
<button type="button" id="btn-ser1">Serialize</button>
<script>
$("#btn-ser1").click(function(){
      data_array = $("#form").serialize();
      alert(data_array);
});
</script>






Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here




Explanation


As mentioned from above, the "serialize()" function automatically gets all the data inside the form. In our example, the form name has an id "form". To get the value inside all of the input boxes, all we have to do is to select the form using the standard JQUERY select, and add the function "serialize()". Always make sure to place all the serialize data with a variable as we have done in the example above. In our case we used the variable "data_array" to store the serialize data.

With the serialize function automatically get all of the data found on the input boxes . Just make sure to place a name for each of the input boxes. You can see how the serialize function appends or formats the data by clicking on the button.