Making any form AJAX - The easy way

Forms, forms, forms... This is essential part of the Web and probably main reason why servers-side technology like Perl, PHP appeared. But things didn't change much from the time I wrote my first Form handler using PHP3.0.18.

In this post I want to share some of my tricks of handling forms. Yes, it requires JavaScript enabled, which, truly speaking, is already a must have for 99.99% of sites for a long time.

Big advantages is that it really simplifies things on client and server side. Welcome reading...

# Making form AJAX

AJAX form has several good advantages. Page does not reload - no need to regenerate form values or other elements. User clearly see that something happens after submit is clicked via progress indicator.

For sure, today, its waste of time trying to use one of the following things: XMLHTTPRequest, readyState, etc.. Its framework time, so welcome jQuery Form Plugin.

See the beaaty of this soultion, one call and any form turns into AJAX form.

<form action="comment.php" method="post">       
   Name: <input type="text" name="name" />      
   Comment: <textarea name="comment"></textarea>      
   <input type="submit" value="Submit Comment" />  
</form>

<script>  
$('form').ajaxForm(function() {       
   alert("Thank you for your comment!");     
});  
</script>

Form data is submitted via AJAX and handler is called after success call.

# Data validation in Forms

Why should I call form validation tricky? Good UI immediately shows any error to the user, allowing to fix them before form submit, this requires JavaScript or client-side data validation.

However client-side only  is a very bad idea. Wrong data can still be submitted using other ways like data tamper, javascript debugger, etc.. and it may have a very negative effect on data consistency or data security. So server side validation is a must.

Implementing two sets of validation rules on client and on the server is time consuming, considering different languages are used.

Solution?  AJAX submitted form with server-side validation and client-side UI.

Simplified solution below:

$('form').ajaxForm(function(data) {      
   if (data.error) {
      alert("Please coorect error: " + data.error);     
   } else {
      alert("Thank you for your coment");
      location.href="/comments/list";
   }
});

This way I implement only server-side validation, so its impossible to submit wrong data and still it works without page reload and has good user experience.

Yes, it is very easy to extend it to make UI fancier, like highlighting input boxes with errors or displying additional text messages.

# Easy edit form - JSON deserialize

When editing some data, users expects data-edit-form to be pre-filled with OLD values, that is obvious. What is not good is to write code for this. Its easy for text inputs:

<input type="text" name="company" value="<?php echo $company?>" />

or for those who has security in mind

<input type="text" name="company" value="<?php echo htmlspecialchars($company)?>" />

But not so clear for <select> element.

My solution is: meet the jquery deserialize plugin. Now fill your form is easy:

<?php
$data = array(
  "company" => 'Corporation Inc'
); 
?>

<form action="edit.php" method="post">       
   Company: <input type="text" name="company" />      
   <input type="submit" value="Submit Comment" />  
</form>

<script>  
   $('form').deserialize(<?= json_encode($data) ?>);
</script>

# Conclusion

Combining these three tricks greatly simplifies handling forms using PHP/Javascript.

jQuery ajax form plugin

jQuery deserialize plugin

Making form AJAX
Data validation in Forms
Easy edit form - JSON deserialize
Conclusion