【问题标题】：How to send a mail from a form and show a popup如何从表单发送邮件并显示弹出窗口
【发布时间】：2019-01-26 17:37:43
【问题描述】：

我想要实现的目标

从 HTML 表单发送电子邮件并显示一个弹出窗口来告诉用户输入是否有效。

背景

我正在开发一个网站，用户可以在其中在联系表单上输入他们的电子邮件地址并将其提交到某个电子邮件地址。此外，我想显示一个弹出窗口，让用户知道输入的电子邮件地址是否有效，即在这种情况下不为空。

这里有一张图表来展示它的样子。

具体流程如下。

用户在表单中输入电子邮件地址
用户点击提交按钮
如果电子邮件地址有效（即不为空），则会将其发送到某个电子邮件地址，然后会显示一个弹出窗口，告诉用户电子邮件地址已成功发送。
如果电子邮件地址为空，则应显示带有错误消息的弹出窗口。

流程图如下。

经过几个小时的搜索，我决定实现上述功能如下。

对于用户输入，<form> 和 action 属性将被用作：

<form action="send_mail.php" method="post">
  Email <input type="text" name="email">
  <input type="submit" value="Submit">
</form>

要发送邮件，PHP 中的mail() 函数将被用作：

<?php
$sender = 'from@websiteform.com';
$recipient = 'recipient@recip.com';
$subject = "from website";
$message = $_POST['email'];
$headers = 'From:' . $sender;
mail($recipient, $subject, $message, $headers)
?>

弹出的代码如下。

<html>
<style type="text/css">
<!--
#gray-panel{
background : #000;
opacity  : 0.5;
width  : 100%;
height  : 99999;
position : fixed;
top   : 0;
left  : 0;
display  : none;
z-index  : 50;
}

#popup{
height: 200px;
width: 400px;
border: solid 2px black;
background: yellow;
display: none;
z-index : 51;
position: fixed;
top: 70;
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<body>
<form>
    <input type="text" name="email"/>
    <input type="submit" value="Send"/>
</form>

<div id="gray-panel"></div>
<div id="popup">this is a pop up window!<div>

<script>
var left_position = $("body").width()/2 - $("#popup").width()/2;
$("#gray-panel").fadeIn("slow");
$("#popup")
    .css("left", left_position)
    .fadeIn("slow");

$("#popup").click(function(){
    $( "#gray-panel" ).fadeOut("slow");
    $( "#popup" ).fadeOut("slow");
});
</script>


</body>
</html>

但是有一些问题。

用户在单击提交按钮后被发送到一个新页面。我想在同一页面中显示一个弹出窗口。我用谷歌搜索了“form action php not transition”，但找不到任何有用的资源。
无法从 PHP 调用弹出窗口的 jQuery，因为它们位于不同的页面上。 echo "<script> function(); </script>"; 或 echo "<script src=\"popup.js\"></script>"; 似乎不适用于这种情况。

我该怎么办？任何帮助将不胜感激。

【问题讨论】：

#1：使用 Ajax 将电子邮件地址发送到 PHP。您需要阻止使用preventDefault() 提交正常表单。 #2 您将能够显示 Ajax 成功的弹出窗口。

标签： javascript php jquery html email

【解决方案1】：

要解决您的第一个问题，您需要通过 AJAX 提交表单。这将阻止页面刷新。

要做到这一点，您需要jQuery，我可以看到您已经在使用它，这非常好。要进行基本的 AJAX 调用，您需要执行以下操作：

这段代码基本上做了以下事情：当表单提交后，它会阻止使用event.preventDefault();刷新页面，然后将以下数据发送到使用post请求指定的脚本。

  jQuery('.sign-up-form').on('submit', function(event){
      event.preventDefault();
      jQuery.ajax({
         type : 'POST',
         url  : '/path/to/file.php',
         data : jQuery('.sign-up-form').serialize(),
         beforeSend: function(){
         jQuery("#error").fadeOut();
      },
         success :  function(response){
           var left_position = $("body").width()/2 - $("#popup").width()/2;
           $("#gray-panel").fadeIn("slow");
           $("#popup").css("left", left_position).fadeIn("slow");
         }
      });
  });

请注意，您需要将sign-up-form 类添加到您的表单中，使其看起来像这样：

  <form class="sign-up-form" method="post">
    Email <input type="email" name="email">
    <input type="submit" value="Submit">
  </form>

对于验证电子邮件地址的功能，您需要在 php 文件中添加一些额外的逻辑（取决于您需要验证的程度）。如果只是为了确保发送的内容是电子邮件格式，那么您会看到我已将您的输入从 text 类型更改为 email 类型。

【讨论】：

【解决方案2】：

首先你需要阻止默认的表单提交

$(".form").click(function(e){
      e.preventDefault();

如果你不想弄脏css，我建议你使用sweet alert插件，如果你使用的是sweet alerts，那么你的ajax代码应该是这样的：

swal({
    title: "Are you sure you want to send us a mail?",
    text: "You will get a feedback in 24hrs",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, Please!",
    closeOnConfirm: false
}, function (isConfirm) {
    if (!isConfirm) return;
$.ajax({type: "post",
        url: "sendmail.php",
        data: $('.form').serialize(),
        success: function (response) {
            var res = JSON.parse(response);
            var strres =JSON.stringify(res);
            console.log(strres);
            if(strres === '"Sent"'){
                swal("Sent" ,"Email sent sucessfully" ,"success");
            }
            else{
                swal( "An error occurred!!!", "Please try again" ,"error");
            }
       }
   });

    });
});

那么你的 html 将是：

<form class="form" method="post">
    Email <input type="email" name="email" pattern="^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$" required">
    <input type="submit" value="Send">
  </form>

然后您可以进一步验证并在 php 中发送。

希望对你有帮助。

【讨论】：