19 February 2011

This tutorial shows how to send a single form field/input of a form. We are going to use jQuerys ajax features to do that.

First you need a form and don't forget to include jQuery library.
Source code viewer
  1. <form action="form_action.php" id="form-id" method="post">
  2. First name: <input type="text" name="fname" /><br />
  3. Last name: <input type="text" name="lname" /><br />
  4. <input type="submit" value="Submit" />
  5. </form>
Programming Language: HTML
If you leave a text field the blur funtion of jquery will occur. You can do some really cool things with it. For an example send the field data to your server.
Source code viewer
  1. <script type="text/javascript">
  2. // jquery page ready function
  3. $().ready(function(){
  4. //do the funcion when you leave an input field(press tab or leave active textbox by mouse click)
  5. $("form#form-id > input, textarea, select").blur(function() {
  6. //send data using post
  7. $.post(
  8. //url where the post will be sent
  9. "form_action.php",
  10. //data whitch will be sent
  11. $(this),
  12. //this funcion is will be called on return, here we make an alert whitch contains retured data
  13. function(data){alert(data);}
  14. }
  15. });
  16. });
  17. </script>
Programming Language: Javascript