Today I came to talk about one of the methods that I find very interesting in Jquery, the serialize().
As its name implies, this method serializes a set of inputs of a form on a string.
This string is standardized and compatible with most server-side language.
This is very useful for example when we want to send a series of data to the server with Ajax.

How?

Well, start creating the form:

<form action='page.php' id='my_form'>
<input type='text' name='input_1'>
<input type='text' name='input_2'>
<input type='text' name='input_3'>
</form>

Note that we have created a form of traditional way, but omit the method attribute in the tag <form>, because this will be addressed later.

How to Serialize?

With a line the Jquery lets you do this, let the example:

var formdata = $('#my_form').serialize();

Now the formdata variable is a string serialized like:

input_1=valor1&input_2=valor2&input_3=valor3

The string is in this format key/value concatenated with “&”.
Now that we have the string, just pass it to the server. How? Quite simply with the jQuery Ajax() method:

$.ajax({
type: 'POST';,
url: form.attr('action'),
data: formdata,
success: function(msg){
alert('Sucesso!');
}
});

Remember that we omit the method attribute of the form?
We did this because we are making an Ajax request using the POST method, anyway it would be ignored in our example.

Ajax:
type – Specify the method how data will be sent to the server. In our example we’re using POST.
url -  Specifies the page to which the data will be submitted. In our example I’m taking the action attribute of the form, which will cause the data to be submitted to the file page.php.
data – The data to be submitted. The serialized string is passed here.
success – Function to perform when we are successful. In the example, an alert.

Done!

We have created a form, all inputs serialized in a string, send all data to a PHP page via Ajax.
Simple.

Any doubt please comment.

Related Posts:

• Como fazer mais em aplicações RIA escrevendo menosComo fazer mais em aplicações RIA escrevendo menos
• Seriously Javascript Javascript levado a sério
• Javascript – Problem with Change EventJavascript – Problema com Evento Change
• Catch Ajax errors with jQueryCapturar erros Ajax com jQuery
• Gradient – Jquery Plugin

The Serializing an form with jQuery by Jaydson Gomes, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 2.5 Brazil License.

subscribe RSS feed!