jquery - ajax $.post example

The main aim is to be able to just drop the javascript on top of the HMTL form in a progressive enhancement style so that the underlying HTML form would work even if the javascript is turned off.
1. html:




2. jquery to overriding the form’s submit event so that it will use the AJAX post rather than the normal POST:
function submitAjax()
{
   $('#submit').val('Logging In...');
   $.post($("#html-form").attr('action'), $("#html-form").serialize(),function(data){
      $('#submit').val('Login');
      if(data == 'success'){
         $('#message').html('Successfully Completed the Form').removeClass('error').css('visibility','visible');
      } else {
         $('#message').html('Error: ' +  data).addClass('error').css('visibility','visible');
      }
   });
}

3. in the process.php :
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
   //Do AJAX reply's in here
} else {
   //Do normal form processing here
}

example:full reference : http://blog.gilbertpellegrom.co.uk/post/565731118/html-forms-to-ajax-forms-the-easy-way

0 comments:

Post a Comment