serialize() to submit form input data as name value pair to any page by using GET or POST method in JQuery

This function create a string using urlencode method and which can be directly use to send data in GET or POST method.

$("#b1").click(function(event){ 
    form_list = $("#f1").serialize(); // generate the string and store in a vaiable
    	$("#display").html(form_list); // display inside a div layer
});

Here b1 is the id of the submit button. f1 is the ID of the form. We are storing the string output of serizlize() function in a variable form_list. We have used Click event of Button with id b1. Only giving id to the input box will not work in serialize() , we must provide name to the input box.

<input type=text id=t1> // this will not work
<input type=text id=t1 name=t1> // Correct

Let us try a simple form with one input text box. We will submit the form on click of a button and display the output as a string Now let us try with a complex form with all types of inputs. We will use all form component inside this example and display the output as in another div layer.
There is no difference in JQuery part of the script as serialize function binds all input fileds within the Form and prepare the string.

serializeArray()

We can use serializeArray to create an array with name value pairs. The advantage of such array is we can add our own data to this array and post it to backend script.

We will be using push() method to add extra data to our array.

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

serialize() for name value pair string to use in Form submission

serializeArray()

Subscribe

1

2

3

4