用ajax返回提交的html

Now, I know there are several questions that may look like this, but in short, I haven't found quite the functionality I need, let alone getting it working. I want to return a confirmation message from messages sent from the forms in the footer of my site as opposed to returning the user to a new page.

default state

after message has been sent

Form

<form>
     <input type="text" name="field1" placeholder="Form field 1" />
     <input type="text" name="field2" placeholder="Form field 2" />
     <input type="text" name="field3" placeholder="Form field 3" />

     <input type="submit" value="Submit button" />
</form>

AJAX -- this is where I get lost

$('#submit_button').click(function (event)
{
    event.preventDefault();
    $.ajax(
    {
        type: 'POST',
        url: 'parse.php',
        data: $('form').serialize(),
        success: function ()
        {
            alert('form was submitted');
        }
    });
});

In theory, this would call the file parse.php, which validates the information, works with a database, and sends a mail function. The problem I'm running into is the page returns with an empty form and no alert, nor am I getting any other type of response I would want (php header('Location: http://google.com'), etc).

What I'm wondering is, is there something wrong with my javascript, or is it because I need more parameters to my form (method, enctype...) ?

Working solution:

Form

<form>
    <input type="text" name="field1" placeholder="Form field 1" />
    <input type="text" name="field2" placeholder="Form field 2" />
    <input type="text" name="field3" placeholder="Form field 3" />

    <input type="submit" value="Submit button" />
</form>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function()
    {
        $('form').submit(function()
        {
            $.get('parse.php', $(this).serialize(), function(data)
            {
                $('#content').html(data);
            }
            return false;
        }
    }
</script>

parse.php

if( isset($_REQUEST['field1']) and
    isset($_REQUEST['field2']) and
    isset($_REQUEST['field3']) )
{
    // Headers and other parameters
    $sujet = "Email Subject line";
    $mailto = "my@email.com";

    $headers = "";
    $headers .= "MIME-Version: 1.0
";
    $headers .= "Content-type: text/html; charset=UTF-8"."
";
    $headers .= "From: " . $from . "
";
    $headers .= "Organization: ACNE CO.
";
    $headers .= "X-Priority: 3
";
    $headers .= "X-Mailer: PHP". phpversion() ."
";
    $message = "";

    // Info to send
    $field1 = $_REQUEST['field1'];
    $field2 = $_REQUEST['field2'];
    $field3 = $_REQUEST['field3'];

    $message .= "Field 1 description: " . $field1 . "<br />";
    $message .= "Field 2 description: " . $field2 . "<br />";
    $message .= "Field 3 description: " . $field3 . "<br />";

    mail($mailto, $sujet, $message, $headers);

    // Confirmation message
    $confirmation = '<div id="confirmation">Message sent</div>';
    print($confirmation);
}

First. You missed in your html id for element, use this:

<form>
     <input type="text" name="field1" placeholder="Form field 1" />
     <input type="text" name="field2" placeholder="Form field 2" />
     <input type="text" name="field3" placeholder="Form field 3" />    
     <input type="submit"  id="submit_button"  value="Submit button" /> //here set the id to element
</form>

Second. You can use javascript :

success: function ()
{
    window.location.href = 'http://www.google.com/';
}

to redirect to another page