Use jQuery To Submit Form To PHP/MySQL


หน้าแรก jQuery Use jQuery To Submit Form To PHP/MySQL

Written on Tuesday, November 4th, 2008 at 1:27 pm and is filed under jQuery.

Using jQuery to submit a form, is something you are seeing more and more of as jQuery’s popularity builds. When I first started reading about jQuery and Ajax all I wanted to do was learn how to submit a form using jQuery.

I was so confused and lost, seeing the code was so abstract to me. So in this tutorial, I want to show you how to use the jQuery framework to submit data through a form using jQuery to a PHP page that submits to a database.

We are going to take form data and submit it to a jQuery Ajax call then send that to a PHP page with the data. Check out a live example of this post.

YOU SHOULD HAVE AN IDEA OF

  • Some principles of PHP
  • Basic knowledge of JavaScript and/or jQuery framework
  • MySQL
  • XHTML to build the form

JQUERY FUNCTIONS

XHTML OUTLINE

view plaincopy to clipboardprint?
  1. <div class="container">  
  2. <form id="submit" method="post">  
  3. <fieldset>  
  4. <legend>Enter Information</legend>  
  5.   
  6.             <label for="fname">Client First Name:</label>  
  7. <input id="fname" class="text" name="fname" size="20" type="text">  
  8.   
  9.             <label for="lname">Client Last Name:</label>  
  10. <input id="lname" class="text" name="lname" size="20" type="text">  
  11.   
  12.             <button class="button positive"> <img src="../images/icons/tick.png" alt=""> Add Client </button>  
  13. </fieldset>  
  14. </form>  
  15. <div class="success" style="display: none;">Client has been added.</div>  
  16. </div>  

JQUERY TO COOK IT ALL

view plaincopy to clipboardprint?
  1. $(document).ready(function(){  
  2.     $("form#submit").submit(function() {  
  3.     // we want to store the values from the form input box, then send via ajax below  
  4.     var fname     = $('#fname').attr('value');  
  5.     var lname     = $('#lname').attr('value');  
  6.         $.ajax({  
  7.             type: "POST",  
  8.             url: "ajax.php",  
  9.             data: "fname="+ fname +"& lname="+ lname,  
  10.             success: function(){  
  11.                 $('form#submit').hide(function(){$('div.success').fadeIn();});  
  12.   
  13.             }  
  14.         });  
  15.     return false;  
  16.     });  
  17. });  

We need to capture the values of the form and we do this by:

view plaincopy to clipboardprint?
  1. var fname     = $('#fname').attr('value');  

We are storing it in the variable called “fname” and we are taking it from the input field with the id of “fname” and the “.attr(‘value’) tells jQuery to take the value from the attribute of the value from the input field.

The next section is the bulk of the code. jQuery makes it very nice and easy to create Ajax calls. As you see, we have type, url, data, and success. These are pretty self explanatory.

  • TYPE – Are you going to use POST or GET
  • URL – What is the URL you are sending the data to
  • DATA – The data that you are sending the the URL to be processed
  • SUCCESS – What should the function do after the call has been executed

Remember that all of these are explained at the jQuery page, you can find the documentation for the Ajax calls here. There is a slew of options you can run within this one jQuery.ajax() function.

The success part:

view plaincopy to clipboardprint?
  1. success: function(){  
  2.      $('form#submit').hide(function(){$('div.success').fadeIn();});  
  3. }  

Once the form is successfully submitted, the form will hide and thanks to jQuery callbacks, we then show the success message.

THE BACKEND – AJAX.PHP

Below is what our ajax.php file will look like, this will carry out the submission. Save this as ajax.php.

view plaincopy to clipboardprint?
  1. <?php  
  2.   
  3.     include ("../../inc/config.inc.php");  
  4.   
  5.     // CLIENT INFORMATION  
  6.     $fname        = htmlspecialchars(trim($_POST['fname']));  
  7.     $lname        = htmlspecialchars(trim($_POST['lname']));  
  8.   
  9.     $addClient  = "INSERT INTO clients (fname,lname) VALUES ('$fname','$lname')";  
  10.     mysql_query($addClient) or die(mysql_error());  
  11.   
  12. ?>  

There you have it, a straight forward guide to to using jQuery, PHP, and a simple HTML form to submit a form. Hopefully this will be a help to users new to the jQuery/Ajax world! If you have any comments or questions get in touch with me, by emailing me or leaving a comment below.


refer: http://www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form/



ขึ้นไปด้านบน