AJAX / JQuery和PHP发送提示而无需重新加载联系表单

Question

Full website: http://adamginther.com

I've used two separate tutorials to build this, one for the PHP and one for the AJAX. My goal is to build a contact form that will check for errors. If there are no errors then it will prompt users with a message saying that the message has been sent without refreshing the page.

When the website is run locally it does not display the errors until the button is pressed, when run on the server the errors are displayed on entering the page. When the contact button is pressed it loads PHP and the 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 your 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 your 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 your 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 will get back to you 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 = '[e-mail]';
$subject = 'AdamGinther.com message from '.$field_firstName;

$body_message = 'From: '.$field_firstName."
";
$body_message .= 'E-mail: ' .$field_email."
";
$body_message .= 'Message: '.$field_message;

$headers = 'From: '.$field_email."
";
$headers .= 'Reply-To: '.$field_email."
";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
    <script language="javascript" type="text/javascript">
    $('#panel').show();
    $('#output-inside').text('Thank you ' + firstName + ', I will get back to you as soon as I can.');
    </script>
<?php
}
else { ?>
    <script language="javascript" type="text/javascript">
        $('#panel').show();
    $('#output-inside').text('I am sorry ' + firstName + ', but there was a problem processing your request. I can be contacted by e-mail at [e-mail]');   </script>
<?php
}
?>

Answer 1

I think you need to prevent default action of the submit button.

Use,

$(function() {
    $('.error').hide();
    $(".button").click(function(e) {
       e.preventDefault();

       // Other code
     });
});