Search

Sunday, November 6, 2011

submit form without page refreshing using jquery, ajax and php

Ajax request is the most powerful feature of jquery, it helps to send data over the cross domain in the backend. In this post i give the very basic idea to submit a form with page refreshing and get the result. In this script i use some basic jquery and php. If you will apply this script in your own page then, I request you to validate all the data. Lets beautify the form with some CSS codes:

label{
 font: 13px/18px Verdana, Arial, Helvetica, sans-serif;
 color: #666666;
}
.inpbox{
 border: 1px solid #999999;
 padding: 2px;
 height:20px;
}
.txtbox{
 border: 1px solid #999999;
 padding: 2px;
 resize: none;
}
.buttn{
 border: 1px solid #999999;
 font: bold 13px/18px Verdana, Arial, Helvetica, sans-serif;
 color: #666666;
 padding: 3px 10px;
}

Here is the basic form layout:

 

I use table to prevent the browser confliction bug. Now lets start with some jquery stuff, before applying this stuff please insert the jquery source file from jquery official site or form ajax google api.

$('input[name="send"]').click(function(){
  var query = $('#myform').serialize();
  
  $.ajax({
   url: 'ajaxForm.php',
   data: query,
   success: function(data){
      if(data == 'send'){
       $('.result').html('Data Send Successfully!');
       
       $('input[name="name"]').val('');
       $('input[name="email"]').val('');
       $('input[name="subject"]').val('');
       $('textarea[name="query"]').val('');
      }
      else{
       $('.result').html('Error to Send Data!');
      }
     }
  });
 });

Now as you see in the above jquery codes that i request the a ajaxForm.php page through ajax request which handles all the data and return the result.

 $name = (isset($_REQUEST['name'])) ? $_REQUEST['name'] : NULL;
 $email = (isset($_REQUEST['email'])) ? $_REQUEST['email'] : NULL;
 $subject = (isset($_REQUEST['subject'])) ? $_REQUEST['subject'] : NULL;
 $query = (isset($_REQUEST['query'])) ? $_REQUEST['query'] : NULL;
 
 if( !empty($name) && !empty($email) && !empty($subject) && !empty($query) ){
  echo 'send';
 }

2 comments:

jacob said...

i also want to submit form data with jquery and i did, but i didn't use .serialize() which is more form data friendly and built a query string with param and value, and the rest work with $.ajax(), which helps to send data without page refresh, i mean in the backend to the other server or page :)

SHAKHER DEVAL said...

Its a professional work. It is very useful for php developers and designers . Thanks - to share your experience with us .

Related Posts Plugin for WordPress, Blogger...