Question

I’d like to create a very basic contact form. I’ve got the HTML, Javascript, and PHP written using what little knowledge I know of the language, but it apparently doesn’t work. What’s missing?

The HTML:

    <form>
    <fieldset>
        <fieldset>
            <input name="name" value="John Doe" size="30" /><br />
            <input name="email" value="[e-mail]" size="40" /><br />
        </fieldset>
        <fieldset>
            <input type="text" name="subject" value="Subject" size="60" /><br />
            <textarea name="message" rows="15" cols="100"></textarea><br /><br />
            <input type="submit" value="Submit" />
            <input type="button" value="Cancel" />
        </fieldset>
    </fieldset>
</form>

The Javascript:

$('form').submit( function() {

    $.ajax({
        type: "POST",
        url: "bin/process.php",
        data: $(this).serialize(),
        success: function() {
            // Update page with success message
        }
    });
    return false;
});

The PHP:

<?php 

$recipient = "[e-mail]"; //recipient 

$Name = ($_POST['name']); //senders name 
$email = ($_POST['email']); //senders e-mail adress 
$mail_body = ($_POST['message']); //mail body 
$subject = ($_POST['subject']); //subject 

$header = "From: ". $Name . " <" . $email . ">\r\n"; //optional headerfields 

mail($recipient, $subject, $mail_body, $header); //mail command :) 
?>

Answer 1

Update for edited question/comments:
Are you sure your code is running in a document.ready handler?, like this:

$(function() {
  $('form').submit( function() {
    $.ajax({
        type: "POST",
        url: "bin/process.php",
        data: $(this).serialize(),
        success: function() {
            // Update page with success message
        }
    });
    return false;
  });
});

From your comments, it appears your .submit() handler isn’t rigged up at all, and it’s doing the default GET browser behavior.