Submit Form without Refresh Help

I am using a mailform which i found on one of the nettuts articles.

It validates the form and using ajax and jquery automatically prompts the user that it sent the data without loading another page or using any popup.

I am having problems getting this to work my form consists of a Name, Email and Message field but when i click send it doesn’t do anything.

Can anyone help me getting this to work?

  <form name="contact" method="post" action="">
      <label for="name" id="name_label">Name</label>
      <input type="text" name="name" id="name" size="30" value="" class="text-input" />
      <label class="error" for="name" id="name_error">required.</label>
      <br />
      <label for="email" id="email_label">Email</label>
      <input type="text" name="email" id="email" size="30" value="" class="text-input" />
      <label class="error" for="email" id="email_error">required.</label>
      <br />
         <label for="message" id="message_label">Message</label>
     <textarea name="message" cols="23" rows="5"></textarea>
      <label class="error" for="message" id="message_error">required.</label>
    	<br />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />

[B]This is the process.php which was included and
also the PHPMailer file which is just a general file -[/B]

if ((isset($_POST['name'])) && (strlen(trim($_POST['name'])) > 0)) {
	$name = stripslashes(strip_tags($_POST['name']));
} else {$name = 'No name entered';}
if ((isset($_POST['email'])) && (strlen(trim($_POST['email'])) > 0)) {
	$email = stripslashes(strip_tags($_POST['email']));
} else {$email = 'No email entered';}
if ((isset($_POST['message'])) && (strlen(trim($_POST['message'])) > 0)) {
	$phone = stripslashes(strip_tags($_POST['message']));
} else {$phone = 'Enter your message';}
<style type="text/css">
<table width="550" border="1" cellspacing="2" cellpadding="2">
  <tr bgcolor="#eeffee">
  <tr bgcolor="#eeeeff">
  <tr bgcolor="#eeffee">
$body = ob_get_contents();

$to = '';
$email = '';
$fromaddress = "";
$fromname = "Online Contact";


$mail = new PHPMailer();

$mail->From     = "";
$mail->FromName = "Contact Form";
$mail->AddAddress("","Name 1");
$mail->AddAddress("","Name 2");

$mail->WordWrap = 50;

$mail->Subject  =  "Demo Form:  Contact form submitted";
$mail->Body     =  $body;
$mail->AltBody  =  "This is the text-only body";

if(!$mail->Send()) {
	$recipient = '';
	$subject = 'Contact form failed';
	$content = $body;	
  mail($recipient, $subject, $content, "From:\\r\
Reply-To: $email\\r\
X-Mailer: DT_formmail");

Where’s your javascript?

function runOnLoad(f) {
    if (runOnLoad.loaded) f();    // If already loaded, just invoke f() now.
    else runOnLoad.funcs.push(f); // Otherwise, store it for later

runOnLoad.funcs = []; // The array of functions to call when the document loads
runOnLoad.loaded = false; // The functions have not been run yet.

// Run all registered functions in the order in which they were registered.
// It is safe to call more than once: invocations after the
// first do nothing. It is safe for an initialization function to call
// runOnLoad() to register another function. = function() {
    if (runOnLoad.loaded) return;  // If we've already run, do nothing

    for(var i = 0; i < runOnLoad.funcs.length; i++) {
        try { runOnLoad.funcs[i](); }
        catch(e) { /* An exception in one function shouldn't stop the rest */ }
    runOnLoad.loaded = true; // Remember that we've already run once.
    delete runOnLoad.funcs;  // But don't remember the functions themselves.
    delete;    // And forget about this function too!

// Register as the onload event handler for the window
if (window.addEventListener)
    window.addEventListener("load",, false);
else if (window.attachEvent) window.attachEvent("onload",;
else window.onload =;

$(function() {

  $(".button").click(function() {
		// validate and process form
		// first hide any error messages
	  var name = $("input#name").val();
		if (name == "") {
      return false;
		var email = $("input#email").val();
		if (email == "") {
      return false;
		var phone = $("input#phone").val();
		if (phone == "") {
      return false;
		var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
		//alert (dataString);return false;
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
    return false;

You should bind the submit event on your form, not the click event on class “button”.
You can also do error checking on the server-side rather than checking the values within javascript.
You don’t have to construct the string for the POST data, you can also use an object and jQuery’s $.param() function to make the whole code you got a bit more readable.

Can you check whether the $.ajax() gets called at all? It looks to me like it’s a URL issue here, use absolute URLs rather than relative ones.

I’m a total noob with forms, etc.

I just downloaded the tuts source files are tried uploading it to my server but no success there. I haven’t really got any experience in JS or PHP so i wouldnt know.