javascript - AJAX/JQuery and PHP to send prompt without reload for a contact form -

full website: http://adamginther.com

i've used 2 separate tutorials build this, 1 php , 1 ajax. goal build contact form check errors. if there no errors prompt users message saying message has been sent without refreshing page.

when website run locally not display errors until button pressed, when run on server errors displayed on entering page. when contact button pressed loads php , page goes blank.

html

<form action="contact.php" method="post"> <label name="firstname">name: </label> <input type="text" name="firstname" id="firstname"> <label class="error" for="firstname" id="name_error">i need name.</label> <br id="namebreak"> <br> <label name="email" for="email" id="email_label">e-mail address: </label> <input type="text" name="email" id="email"> <label class="error" for="firstname" id="name_error">i need e-mail.</label> <br id="emailbreak"> <br> <label name="message">message: </label> <textarea name="message" id="message"></textarea> <label class="error" for="firstname" id="name_error">i need message.</label> <br id="messagebreak"> <br> <input type="submit" value="say hello!" id="contactbutton" class="button"> 

javascript

$(function () {     $('.error').hide();     $(".button").click(function () {          $('.error').hide();         var name = $("input#firstname").val();         if (name == "") {             $("label#name_error").show();             $("input#name").focus();             $("#namebreak").hide();             return false;         }         var email = $("input#email").val();         if (email == "") {             $("label#email_error").show();             $("input#email").focus();             $("#emailbreak").hide();             return false;         }         var message = $("input#message").val();         if (message == "") {             $("label#message_error").show();             $("input#message").focus();             $("#messagebreak").hide();             return false;         }          var datastring = 'name=' + name + '&email=' + email + '&phone=' + phone;          $.ajax({             type: "post",             url: "contact.php",             data: datastring,             success: function () {                 $('#contactme').html("<div id='message'></div>");                 $('#message').html("<p>contact form submitted.</p>")                     .append("<p>i shortly.</p>")                     .hide()                     .fadein(1500, function () {                     $('#message').append("<img id='checkmark' src='images/check.png' />");                 });             }         });         return false;      }); }); 

php

<?php $field_firstname = $_post['firstname']; $field_email = $_post['email']; $field_message = $_post['message'];  $mail_to = 'gintherthegreat@gmail.com'; $subject = 'adamginther.com message '.$field_firstname;  $body_message = 'from: '.$field_firstname."\n"; $body_message .= 'e-mail: ' .$field_email."\n"; $body_message .= 'message: '.$field_message;  $headers = 'from: '.$field_email."\r\n"; $headers .= 'reply-to: '.$field_email."\r\n";  $mail_status = mail($mail_to, $subject, $body_message, $headers);  if ($mail_status) { ?>     <script language="javascript" type="text/javascript">     $('#panel').show();     $('#output-inside').text('thank ' + firstname + ', can.');     </script> <?php } else { ?>     <script language="javascript" type="text/javascript">         $('#panel').show();     $('#output-inside').text('i sorry ' + firstname + ', there problem processing request. can contacted e-mail @ gintherthegreat@gmail.com');   </script> <?php } ?> 

i think need prevent default action of submit button.

use,

$(function() {     $('.error').hide();     $(".button").click(function(e) {        e.preventdefault();         // other code      }); });