We are going to use $.getJSON() function, you have something like:

$.getJSON("readJSON.php",function(data){
    $.each(data.posts, function(i,post){
          content = '
\n';
	  content += '
' + post.author + '

\n';
	  content += '+ post.date_added + '\n';
          content += '' + post.post_content + ';
	  content += ''
';
	  $("#contents").append(content).fadeIn("slow");
   });
});

And example of JSON from the PHP page could look like:

{ posts: [{"id":"151","date_added":"2009-05-05 13:40:34","post_content":"This is a test post. jQuery!","author":"Ryan"},
{"id":"152","date_added":"2009-05-05 13:40:55","post_content":"Hey, you got to love Ajax","author":"John"}] }

That JSON above loads two records that will be displayed on to the page.

The results are being pulled from a MySQL database with tables: id, author, post_content, date_added, and author.

I am going to wrap up and article on the jQuery/PHP/JSON comment form with the results loaded on to the page after form submission, stay tuned for a much more in depth explanation of using JSON with PHP and jQuery.

Related posts:

1. Use jQuery To Submit Form To PHP/MySQL Learn to submit a form using jQuery without a page...
2. How to use jQuery to Serialize Ajax Forms When I first started working with jQuery and submitting forms...
3. Time for another iGoogle theme? Thinking about making another iGoogle theme and almost done with...

Instead of declaring all of your data to be sent using something like:

var fname     = $('#fname').attr('value');
var lname     = $('#lname').attr('value');
$.ajax({
     data: “fname=”+ fname + “& lname=” + lname,
});

For a couple of fields above, that is fine, but what if you were creating a form with a large amount of fields. The last thing you would want to do is want to copy/paste that line 20 times for your field. Instead of grabbing each value of each form field we can use jQuery’s .serialize() to do the dirty work for us, which is a huge time saver. We can use something like:

$(function() {
     $('form').bind('submit',function() { showValues(); return false; });
});
function showValues() {
     var str = $("form").serialize();
     $(".results-box").fadeIn();
     $(".results").text(str);
}

The first section binds the submit to a function. When a user submits the form call the function showValues(), the next bit. We grab the form and attach .serialize() to it. We want to serialize all fields within this form and display what data is going to be sent to the sever. A working demo has been uploaded.

Now with our data serialized it is ready to be sent over to the server side. Using jQuery .serialize() is much more effiecient compared to retrieving the value using .val().

Related posts:

1. Use jQuery To Submit Form To PHP/MySQL Learn to submit a form using jQuery without a page...
2. How to load data using JSON/PHP using jQuery I have seen a good amount of people wanting to...
3. jQuery Search And Highlight Work with the jQuery framework to create a fast Ajax...

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

• submit() – documentation
• jQuery.ajax – documentation

XHTML OUTLINE

		

			
Enter Information
			Client First Name:


			Client Last Name:


			  Add Client 
		
	
Client has been added.

JQUERY TO COOK IT ALL

$(document).ready(function(){
	$("form#submit").submit(function() {
	// we want to store the values from the form input box, then send via ajax below
	var fname     = $('#fname').attr('value');
	var lname     = $('#lname').attr('value');
		$.ajax({
			type: "POST",
			url: "ajax.php",
			data: "fname="+ fname +"& lname="+ lname,
			success: function(){
				$('form#submit').hide(function(){$('div.success').fadeIn();});

			}
		});
	return false;
	});
});

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

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:

success: function(){
     $('form#submit').hide(function(){$('div.success').fadeIn();});
}

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.

<?php

	include ("../../inc/config.inc.php");

	// CLIENT INFORMATION
	$fname        = htmlspecialchars(trim($_POST['fname']));
	$lname        = htmlspecialchars(trim($_POST['lname']));

    $addClient  = "INSERT INTO clients (fname,lname) VALUES ('$fname','$lname')";
    mysql_query($addClient) or die(mysql_error());

?>

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.

Related posts:

1. How to use jQuery to Serialize Ajax Forms When I first started working with jQuery and submitting forms...
2. How to load data using JSON/PHP using jQuery I have seen a good amount of people wanting to...
3. jQuery Search And Highlight Work with the jQuery framework to create a fast Ajax...