Contact Form Script not sending the form - php

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">