Step 1: Including the jQuery library on your web page

Create a page called "example.html" and save it. To get started the first thing you will need is to include the jQuery library on your page. You can include this script in one of two ways:

1. Download jQuery (latest build) from www.jquery.com and include the JavaScript in-between your head tags.
2. Include the following script in your head tags:
   

Step 2: Create your HTML form

Below I have set up a simple form that will be used to submit the information to the PHP controller which can then submit the information to a MySQL database to store the information. For the example below the end result will be pre-pended onto the results area.

  

    
Nickname: 
    

  
  

    
Message: 
    

  

Step 3: Add your JavaScript to the page

Add the below javascript to your page once you have created your HTML form. The JavaScript can be added in the head tag AFTER the JavaScript you added in Step 1.

//open script
function submit_form() {
	//retrieve the values from your input fields using the ID element
	var nickname = $('#nickname').val();
	var message = $('#message').val();
	//check if the values are not empty
	if(nickname == "") {
		alert('Please enter your nickname!');
		$('#nickname').focus();
		return false;
	}
	if(message == "") {
		alert('Please enter a message!');
		$('#message').focus();
		return false;
	}
	//the page you would like to send the information to
	var page = "test.php";
	//below the form will get submitted to your specified page
	$.post(page, { value1: nickname, value2: message },
	function(data){
		$('#result').prepend(data);
	});
}
//close script

Step 4: Create the PHP controller

Before testing the form we need to setup the PHP controller page where the information will get submitted (posted) to. The PHP controller will handle the requests sent and return the data back to your website.

The PHP controller can also further be modified to save the data to your database, email the data to your email address or anything else you need it to do.

Create a PHP page called "controller.php" and save it in the same directory as your html form. Add the following code to your PHP document.

//open PHP tag
//POSTING THE INFORMATION 
$nickname 	= htmlspecialchars(trim($_POST['value1']));  
$message	= htmlspecialchars(trim($_POST['value2']));  

/*
Here you can setup your mysql information to save the queries to your database, or set-up an emailer or anything you want to do with the submitted information.
*/

//RETURN THE DATA YOU WISH TO DISPLAY OR TEST ETC
echo '
'.$nickname.' says:
'.$message.'
';
exit(0);
//close PHP tag

Step 5: Testing your form and displaying the results

Now that you have set up your PHP controller and HTML form, you are now ready to test it. Try it! Type in something under nickname and message and click the submit button. You should now see your results below the HTML form.

If your form is not working, please make sure that you have read every step properly. You can also download a copy of this tutorial to use on your website.

Click here to view a live example of this tutorial

Click here to download this tutorial

Enjoy your new jQuery based form! :)