1

完整网站：http ://adamginther.com

我使用了两个单独的教程来构建它，一个用于 PHP，一个用于 AJAX。我的目标是建立一个可以检查错误的联系表格。如果没有错误，那么它将提示用户一条消息，说明该消息已发送而无需刷新页面。

当网站在本地运行时，在按下按钮之前它不会显示错误，当在服务器上运行时，错误会在进入页面时显示。当按下联系按钮时，它会加载 PHP，页面变为空白。

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 = 'gintherthegreat@gmail.com';
$subject = 'AdamGinther.com message from '.$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 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 GintherTheGreat@Gmail.com');   </script>
<?php
}
?>
4

5 回答 5

1

我认为您需要防止提交按钮的默认操作。

利用，

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

       // Other code
     });
});
于 2013-05-13T07:32:28.173 回答
0

Instead of using a form, why not just have an external .php (e.g. sendmail.php) script that handles your php, and then use jQuery to handle the POST. 

$.post('sendmail.php',{
   mail:mail,
   message:message
}, function(data) {
   //Echo either "success" or "false" in the sendmail.php script
   if(data == "success"){
      //Do something - e.g. (alert('Message has been sent');)
   }else{
      //Do something
   }
});
于 2013-05-14T12:34:21.223 回答
0

改变

<form action="contact.php" method="post">

至

<form action="contact.php" method="post" id="form_id">

和改变

$(".button").click(function () { 至

$('#form_id').submit(function (event) {
event.preventDefault();
...
...
于 2013-05-13T07:52:48.020 回答
0

只需简单地将按钮类型从提交更改为按钮，这样它就不会提交表单并默认进入php空白页面并为你调用该函数。

于 2013-05-13T09:56:27.040 回答
0

尝试以下操作：

<form action="contact.php" method="post" onsubmit="return false;">
于 2013-05-13T22:35:22.200 回答