Blog

jQuery is such a powerful tool, and mastering it will take only a few months at best. Here’s a very simple form that you can use to test out jQuery’s ajax ability. For best practices, you want to make sure that the form still works when javascript isn’t enabled. Why sacrifice functionality?

Before we begin, you need to download jQuery (current release 1.3), otherwise you’ll get a bunch of errors. Also make sure that you’re making a connection to the javascript file. So often the script won’t work because the browser cannot find the jQuery javascript file on the server.

Now once you upload that javascript file and make sure that it’s there, you’re ready for the form.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript">
function ajax_submit(){
var nameField = $("#name").val();
var emailField = $("#location").val();
var commentField = $('comments').val();

 $.ajax({
 type: "POST",
 url: "submit.php",
 data: "name=" + nameField + "&email=" + emailField + "&comments=" + commentField,
 success: function(msg){
 $('#message').html(msg);
 }
 });

}

$(document).ready(function () { //begin document ready
$('#name').focus();
$('#submitbutton').click(function() { ajax_submit(); return false; });
});
</script>
<form method="POST" action="submit.php">
<div id="message"></div><br />
Name: <input type="text" name="name" id="name"><br>
Email: <input type="text" name="email" id="email"><br>
Comments: <br /><textarea id="comments" name="comments"></textarea><br />
<input type="submit" value="Send email" id="submitbutton">
</form>

Now for the submit.php page, which is simplified for the purpose of getting an answer.

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$comments = $_POST['comments'];

if($name) { //if someone typed in a name
echo "Thanks for using the comment form!";
} else {
echo "I don't know who you are...";
}
?>

You can test out the script demo to see what it will look like. You can add more creative stuff to it, but this will get you started.