如何在使用Jquery将邮件发送给收件人后才显示成功消息

Question

这是我的联系表格。我使用ajax post发送数据。下面是密码。

HTML:

<div class="col-lg-7 well">


                        <h4 style="padding-top:8px;">Your email address will not be published. Required fields are marked <font color="red">*</font></h4>
                            <label>Name<font color="red">*</font></label><br>
                            <input class="form-control" style="height:35px;width:230px;border-radius:4px;" required type="text" name="name" id="name"/><br>
                            <label>Phone<font color="red">*</font></label><br>


        <span>

            <input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value=""  type="text"> -

        </span>
        <span>
            <input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"> -

        </span>
        <span>
            <input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value=""  type="text" required >

        </span>

<br><br>
                            <label>Email<font color="red">*</font></label><br>
                            <input id="email" class="form-control" style="height:35px;width:230px;border-radius:4px;" required type="email" name="text"/><br>
                            <label for="input4">Message</label>
                            <textarea name="contact_message" class="form-control" rows="4" id="input4"></textarea>
                            <p>&nbsp;</p>
                            <button type="submit" style="margin-left:65px;"class="btn btn-large btn-info" id="button">Submit</button>

                    </div>  

Jquery :

<script>
$(document).ready(function(){
console.log( "ready!" );
  $("#button").click(function(){
console.log("ready2");

                  $.ajax({

                    url: './contact.php',
                    type: "POST",
                    data: {
                        "name": $("#name").val(),
                        "element_4_1": $("#element_4_1").val(),
                        "element_4_2": $("#element_4_2").val(),
                        "element_4_3": $("#element_4_3").val(),
                        "email": $("#email").val(),
                        "input4": $("#input4").val(),

                    },                    
                    success: function(data){
                    $("#stage").text("Thank you for contacting us. We will get back to you shortly.");

                    }
                });
  });
});
</script>  

contact.php

<?php

ini_set('display_errors','On');
 error_reporting(E_ALL);

$name=$_POST['name'];
$phone=chop($_POST['element_4_1']);
$phone.=chop($_POST['element_4_2']);
$phone.=chop($_POST['element_4_3']);
$email=chop($_POST['email']);
$message1=chop($_POST['input4']);

if ($name && $phone && $email) { 

$headers  = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
$headers .= "From: sales@test.com \n";
$recipient= "test@test.in";



$subject="Online Enquiry  ";


$message.="\nName                   : $name\n";

 $message.="\nPhone                  : $phone\n";

 $message.="\nEmail ID               : $email\n";

 $message.="\nMessage                : $message1\n";


 //send auto-reply
$subject_reply="Thank you for contacting";
$message_reply="Thank you for contacting us. We will get back to you shortly.";
mail($email, $subject_reply, $message_reply, $headers);


if(mail($recipient, $subject, $message, $headers)) {
echo "Thank you for contacting us. We will get back to you shortly.";
}
}

?>  

现在我的问题是：

1. HTML表单中所需的属性无法工作。即使字段为空，它也不会显示任何消息。
2. 如何在从联系人.php发送邮件时在主页中显示成功消息。现在，当我点击submit时，我会收到“谢谢”的消息，但我只想在将邮件发送给收件人之后才能收到。 我该怎么做呢。

Answer 1

这里有很多要解决的问题。首先，我们将从您的HTML问题开始，因为它们将帮助您更容易地解决两个问题。

<form> 缺少标签。您还没有将表单包装在表单标签中--请执行以下操作！理想情况下，您还应该使表单在没有JS的情况下工作，但这是一个单独的问题，所以我们暂时不讨论这个问题。

<form class="contact-form">
    // REST OF HTML HERE 
</form>

缺失验证。--您已经放置了必需的属性，它通知您的代码应该填写字段，但实际上还没有在任何地方进行测试。您可以编写如下简单的验证函数：

function validate($form) {
    $form.find('[required]').each(function() {
        if ($(this).val() == '') {
            return false;
        }
    }
    return true;
}

然后，您可以使用以下调用调用该函数：

if (validate($(".contact-form"))) {
    // Do your AJAX stuff
} else {
    // Inform the user that they have missed a field
}

编辑:对于记录，您还应该执行相同的验证服务器端。我刚刚将这种方法作为验证和最佳实践，围绕着说到验证是一个巨大的主题，您可能应该通过Google来了解更多的具体信息。

缺少状态响应。您的PHP没有向JS代码返回任何关于电子邮件发生了什么的指示，从而使您无法处理任何错误。这一点很容易加进去：

if(mail($recipient, $subject, $message, $headers)) {
    echo '{"status":"OK","message":"Thank you for contacting us. We will get back to you shortly."}';
} else {
    echo '{"status":"Error","message":"Email was not sent - an error occurred."}';
}

你可以根据你的意愿来扩展它，我只是给你一个最起码的工作例子。然后，您将在jQuery中判断回调过程的成功与否。

success: function(data){
    if (data.status == "OK") {
        $("#stage").text(data.message);
    } else {
        // Something bad happened, inform the user
    }
}

Answer 2

1:你确定吗？你用的是什么浏览器？

2：JS修改：

<script>
$(document).ready(function(){
console.log( "ready!" );
  $("#button").click(function(){
console.log("ready2");

                  $.ajax({

                    url: './contact.php',
                    type: "POST",
                    data: {
                        "name": $("#name").val(),
                        "element_4_1": $("#element_4_1").val(),
                        "element_4_2": $("#element_4_2").val(),
                        "element_4_3": $("#element_4_3").val(),
                        "email": $("#email").val(),
                        "input4": $("#input4").val(),

                    },                    
                    success: function(data){
                    $("#stage").text(data);

                    }
                });
  });
});
</script> 

PHP修改：

<?php

ini_set('display_errors','On');
 error_reporting(E_ALL);

$name=$_POST['name'];
$phone=chop($_POST['element_4_1']);
$phone.=chop($_POST['element_4_2']);
$phone.=chop($_POST['element_4_3']);
$email=chop($_POST['email']);
$message1=chop($_POST['input4']);

if ($name && $phone && $email) { 

$headers  = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
$headers .= "From: sales@test.com \n";
$recipient= "test@test.in";



$subject="Online Enquiry  ";


$message.="\nName                   : $name\n";

 $message.="\nPhone                  : $phone\n";

 $message.="\nEmail ID               : $email\n";

 $message.="\nMessage                : $message1\n";


 //send auto-reply
$subject_reply="Thank you for contacting";
$message_reply="Thank you for contacting us. We will get back to you shortly.";
mail($email, $subject_reply, $message_reply, $headers);


if(mail($recipient, $subject, $message, $headers)) {
echo "Thank you for contacting us. We will get back to you shortly.";
} else echo "There was an error. Please try again.";
}

?>