Fatal编程技术网
  • javascript/
  • Javascript 如何从表单发送邮件并显示弹出窗口 我想要达到的目标

Javascript 如何从表单发送邮件并显示弹出窗口 我想要达到的目标

javascript php jquery html email

Javascript 如何从表单发送邮件并显示弹出窗口 我想要达到的目标,javascript,php,jquery,html,email,Javascript,Php,Jquery,Html,Email,从HTML表单发送电子邮件并显示弹出窗口，告知用户输入是否有效 背景 我正在开发一个网站，用户可以在联系人表单上输入他们的电子邮件地址，并将其提交到特定的电子邮件地址。此外，我想显示一个弹出窗口，让用户知道输入的电子邮件地址是否有效，即在这种情况下不是空的 这里有一个图表来说明它是什么样子的 具体步骤如下 <html> <style type="text/css"> <!-- #gray-panel{ background : #000; opacity : 0

从HTML表单发送电子邮件并显示弹出窗口，告知用户输入是否有效

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

这里有一个图表来说明它是什么样子的

具体步骤如下

<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>
  • 用户在表单中输入电子邮件地址
  • 用户单击提交按钮
  • 如果电子邮件地址有效，即不为空，则会将其发送到某个电子邮件地址，然后会显示一个弹出窗口，告知用户该电子邮件地址已成功发送
  • 如果电子邮件地址为空，则应显示带有错误消息的弹出窗口
    • 流程图如下

    经过数小时的搜索，我决定实现上述功能，如下所示

    <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="send_mail.php" method="post">
  Email <input type="text" name="email">
  <input type="submit" value="Submit">
</form>

    <?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>

    
这是一个弹出窗口！
变量left_position=$（“body”）.width（）/2-$（“#popup”）.width（）/2；
$（“灰色面板”）.fadeIn（“慢速”）；
$（“弹出窗口”）
.css（“左”，左位置）
.fadeIn（“慢”）；
$（“#弹出窗口”）。单击（函数（）{
$（“灰色面板”）。淡出（“缓慢”）；
$（“弹出”）.fadeOut（“缓慢”）；
});
    但也有一些问题

  • 单击“提交”按钮后，用户将被发送到新页面。我想在同一页中显示一个弹出窗口。我在谷歌上搜索了“表单操作php非转换”，但找不到任何有用的资源
  • 无法从PHP调用弹出窗口的jQuery，因为它们位于不同的页面上<代码>回显“函数（）；”或
    echo”“似乎不适用于这种情况
    • 我该怎么办？任何帮助都将不胜感激。

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

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

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

    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");
            }
       }
   });

    });
});
    此代码基本上执行以下操作：提交表单后，它使用
    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");
         }
      });
  });
    请注意，您需要将
    注册表单
    类添加到您的表单中，使其看起来像这样：

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

    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");
            }
       }
   });

    });
});

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

    ，首先您需要防止使用此

    $(".form").click(function(e){
      e.preventDefault();
    如果你不想让css弄脏你的手，我建议你使用sweet alert插件，如果你使用sweet alerts，那么你的ajax代码应该是这样的：

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

    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>

    

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