Easily submit form using serialize jQuery function and Ajax

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Thanks to Ajax, now we can submit forms without page refresh. And by using Ajax with jQuery we can make any code a lot simpler and easier to manage.

Form submission can also be made easier by using Ajax and jQuery in conjunction.

Problems with Conventional method

When we submit a form using Ajax, we have to construct a long parameter before making Ajax GET/POST Request.

Easily submit form using serialize jQuery function and Ajax

Smaller strings can be handled but problem arises when we have to work with string with some 15-20 values. A slightest of mistake in syntax can render the entire program unusable. Debugging is gruesome too.

This is where jQuery comes to the rescue. The function ‘serialize()’ of jQuery automatically builds the same parameter string before sending with the Ajax GET/POST Request, no need to build them explicitly. All form inputs values – text, password, select, radio buttons, checkboxes and others can be handled by the ‘serialize’ jQuery function.

Here is an explanation of how this can be done,

Creating forms with text, radio buttons, checkboxes

The code is self-explanatory. Here we are creating a few form elements.


<form name="form" id="form1" method="POST">
<h3>Sending form data using serialize jQuery function</h3>

<table>
<tr><td>Name: <td><input type='text' name='uname' placeholder='Your name'>

<tr><td>Gender: <td><input type='radio' name='gen' value='Male' checked='checked' />Male
<input type='radio' name='gen' value='Female' />Female

<tr><td>Age: <td><select name='age'>
<option>10-15</option>
<option>16-20</option>
<option>20-25</option>
<option>25+</option>
</select>

<tr><td>Interests <td><input type='checkbox' name='cb[]' value='Cricket' checked='checked'>Cricket
<input type='checkbox' name='cb[]' value='Football'>Football
<input type='checkbox' name='cb[]' value='Chess'>Chess
<input type='checkbox' name='cb[]' value='Tennis'>Tennis
<input type='checkbox' name='cb[]' value='Cards'>Cards

<tr><td><td><input type='button' value='Post' id='sub'>
</table>

</form>

Styling Form with some CSS code

This code is optional. It just stylizes the appearance of the form.


<style>

form#form1
{
width:500px;
padding:10px;
margin:50px 300px;
border:1px solid #F1f1f1;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:1px 1px 10px 2px #F1F1F1;
-webkit-box-shadow:1px 1px 10px 2px #F1F1F1;
box-shadow:1px 1px 10px 2px #F1F1F1;
}

h3
{
margin:5px;
margin-bottom:10px;
font-size:12px;
font-family:Tahoma;
}

table tr td
{
padding:5px;
font-family:Tahoma,Verdana;
font-size:12px;
}

#sub
{
margin-top:20px;
background:#5B74A8;
border:1px solid #1A356E;
font-size:11px;
color:white;
font-weight:bold;
}

</style>

The jQuery code with serialize() jQuery function


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script language='Javascript'>

$('#sub').click(function(){
$.post('backend.php', $('#form1').serialize(), function(data){$('table').html("<p style='font-family:Tahoma;font-size:12px;margin:5px;'>"+data+"</p>");});
});

</script>

In the code, we receive the ‘click’ event when submit button is clicked. An Ajax POST Request is made to the ‘backend.php’ file.

See the ‘serialize()’ function called on the form ‘form1’. This will save the state of form and transfers input values to the ‘backend.php’ file.

backend.php file at server

This file receives the passed parameter built by serialize() jQuery function and displays back to the user. Here is the code,


<?php

echo "Name: ".$_POST['uname']. "</br></br>";
echo "Gender: ".$_POST['gen']. "</br></br>";
echo "Age: ".$_POST['age']. "</br></br>";
$val=$_POST['cb'];
$val_num=count($val);
echo "Interests: ";
for($i=0;$i<$val_num;$i++)
{
if($i<($val_num-1))
{
echo $val[$i].", ";
}
else
{
echo $val[$i];
}
}

?>

The code is simple. The only thing to understand is of getting the values of checked checkboxes. As multiple checkboxes can be checked by a user, their values are sent in array. So, checkbox values are read in the same way as arrays.

blog comments powered by Disqus