Contact Form Script not sending the form

Question

I have this PHP contact form script (as shown below) which I have used before so I know works, BUT, due to that I have hidden the html form inside of a new jQuery powered div: ( <div class="toggle hidemail" id="drop-button" href=""> Email us here </div> <div class="hidden hiddenform"> ) that toggles up and down, I cant seem to send the form at all, the form when sent is supposed to fade out then give the user a confirmation message (as shown in the script) but it doesn't do anything, I don't suppose anyone would know whats going wrong here so I can get this form working again?

<?php

    $to = 'example@gmail.com';
    $subject = 'Company Name';

    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    $body = <<<EMAIL
        Hello my name is $name.
        $message
        From $name
        my email address is $email

    EMAIL;

    if($name == '' || $email == '' || $message == "") {
        echo "<h5>Sorry, I think you missed  bit....</h5>";
        $error = true;
    } else {
        $error = false;
        mail("example@gmail.com", $name, $email, $message);
        echo "<h5>Thank you for getting in touch. I'll get back to you ASAP.</h5>";
    }

    if($error == true):
?>

<article id="contact-form">             
    <article id="load_area">
        <form id="my-form">                     
            <input type="text" name="name" placeholder="Name" />
            <input type="text" name="email" placeholder="Email" />
            <textarea name="message" placeholder="Message" /></textarea>
            <input type="button" class="submit_button" value="Send" name="send_button" />                           
        </form>     
    </article>                              
</article>
<?php 
    endif; 
?>

Here is the HTML :

<div class="toggle hidemail" id="drop-button" href=""> Email us here </div>
    <div class="hidden hiddenform">
        <article id="contact-form">
            <article id="load_area">
                <form id="my-form">         
                    <input type="text" name="name" placeholder="Name" />
                    <input type="text" name="email" placeholder="Email" />
                    <textarea name="message" placeholder="Message" /></textarea>
                    <input type="button" class="submit_button" value="Send" name="send_button" />                   
                </form>
            </article>          
        </article>
    </div>

$(document).ready(function() {
    $(".submit_button").live("click", function() {
        $("#load_area").fadeOut('slow', function() {
            $("#load_area").fadeIn();
            $.post("process.php", $("#my-form").serialize(), function(data) {
                $("#load_area").html(data);
            })
        });
    })
})

Answer 1

Try using

$(".submit_button").on("click", function(){

instead of '$(".submit_button").live("click", function(){

From jQuery Docs:

As of jQuery 1.7, the .live() method is deprecated

also try to use

$('#my-form').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

and set an action in your html form like so:

<form id="my-form" action="process.php">