This is how serialize works in jQuery

When we work with PHP a system with at least a few modules of different types but surely more than one handles forms; Here different web technologies such as JavaScript or even jQuery come into play, which still maintains ground against other technologies similar to this one; The jQuery API maintains a significant number of methods to use, today I am going to tell you about a very interesting one that will surely allow us to save many lines of JavaScript code, many errors on our part and therefore a lot of work; this is jQuery's serialize() method.

What does the jQuery .serialize() method allow?

The jQuery .serialize() method analyzes forms in search of inputs, textareas, selection fields, text type fields and in short any type of field supported by the HTML API that we can use in a form to collect user data.

With our form built, on more than one occasion we will want to send it via Ajax or do something similar; and this is where jQuery's .serialize() method comes in.

What can the jQuery .serialize() method be used for?

Once the form has been analyzed, it proceeds to create a text string in URL-encoded notation; That is, it allows you to encode the text string so that it can be easily processed from a server-side language as if it were a GET but without the need to load the page to obtain these values; that is why initially the gain in lines of code was indicated, since we do not have to iterate the form fields one by one and process them via JavaScript; Invoking this method does all the work for us.

In other words, it allows the form values to be obtained without the need for the user to submit them by pressing the submit button; this is useful if you want to create a form with behavior that involves constantly parsing form data on the server without the need for us to concatenate the form fields one by one.

Although the .serialize() function is so complete and versatile that we do not have to use it on a complete set of form fields; It can also be used on individual elements of the same form; for example:

$( "input#mi_id" ).serialize();

Or a group of these:

$( "input, textarea, select" ).serialize();

Or even the entire form that would be normal:

$( "form#mi_form" ).serialize();

In short, we can use the .serialize() method in any way supported by the jQuery library selectors.

Example of using jQuery's .serialize() method

For the following form:

<form id="mi_form" >
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
 
  <br />
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
 
    <option selected="selected">Multiple3</option>
  </select>
  <br/>
  <input type="checkbox" name="check" value="check1" id="ch1"/>
  <label for="ch1">check1</label>
 
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
  <label for="ch2">check2</label>
  <br />
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
 
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2"/>
 
  <label for="r2">radio2</label>
</form>

And the following JavaScript code

  function form_serialize(){
      var str = $("form#mi_form").serialize();// aplico el metodo 'serialize' al formulario y lo guardo en la variable str
      $("p#results").text( str );
  }
  $("form#mi_form").on( "change", form_serialize);

  $(document).ready(function(){
    form_serialize();
   });

Demonstration of using jQuery's .serialize() method

Single Single2
Multiple Multiple2 Multiple3
check1 check2
radio1 radio2

As a result we have the text string in URL-encoded notation:

jQuery

Formulario

JavaScript

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy