我要实现的目标

Question

我要实现的目标

要从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”，但找不到任何有用的资源。
用于弹出窗口的jQuery无法从PHP调用，因为它们位于不同的页面上。 echo "<script> function(); </script>";或echo "<script src=\"popup.js\"></script>";在这种情况下似乎不适用。

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

Answer 1

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

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

此代码基本上执行以下操作：提交表单后，它防止使用event.preventDefault();刷新页面，然后将以下数据发送到使用post请求指定的脚本。 / p>

  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。

Answer 2

首先，您需要使用此选项阻止默认表单提交

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

如果您不想让css麻烦您，我建议您使用甜蜜警报插件，如果您使用甜蜜警报，那么您的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。

希望对您有帮助。

如何从表单发送邮件并显示弹出窗口

我要实现的目标

背景

2 个答案: