Question

在下面的代码中，当用户点击提交时，它会将用户重定向到页面mywebsite / form-to-email.php

但我正在寻找的是当用户点击提交按钮时，它只显示一个简单的弹出窗口（5秒），通知用户“我们已收到您的信息”。那我该如何实现呢？

这是我的HTML联系表单。

<form action="/wp-content/themes/writee/templates/form-to-email.php" method="POST">
        <ol>
            <li>How would you like me to call you? <input name="name" type="text" placeholder="Big Jack" /> </li>

            <li>Pick Up Address
                <ul> <li style="list-style-type: none;"></li>
                    <li>Number and Street or Site Name <input type="text" name="pickupadd" placeholder="5600 American Dr or Toronto Pearson Airport Terminal 3"/> </li>
                    <li>Post Code <input type="text" name="pickuppc" placeholder="L4W 1S9" /></li>
                </ul>

            </li>
            <li>Drop Off Address
                <ul>
                    <li>Number and Street or Site Name <input type="text" name="dropoffadd" placeholder="40 Bay Street or Air Canada Centre"/> </li>
                    <li>Post Code <input type="text" name="dropoffpc" placeholder="M5J 2X2"/> </li>
                </ul>
            </li>

            <li>Your Contact
                <ul>
                    <li>Phone Number <input type="number" name="phonenumber" placeholder="1 416 123 4567" /></li>
                    <li>Email <input type="email" name="useremail" placeholder="youremail@gmail.com"/> </li>
                </ul>
            </li>

        </ol>

        Message 
        <textarea style="height: 200px" name="message" placeholder="Anything I should know such as how big your"></textarea>
        <input type="submit" value="send"/>
    </form>

这是我的.php联系表格

<?php
$name = $_POST['name'];
$pickupadd = $_POST['pickupadd'];
$pickuppc= $_POST['pickuppc'];
$dropoffadd= $_POST['dropoffadd'];
$dropoffpc= $_POST['dropoffpc'];
$phonenumber= $_POST['phonenumber'];
$useremail = $_POST['email'];
$message = $_POST['message'];
$formcontent=" From: $name \n Pick Up Address: $pickupadd \n Pick Up Post  Code: $pickuppc\n Drop Off Address: $dropoffadd\n Drop Off Post Code $dropoffpc\n Fone Number: $phonenumber\n Email: $useremail\n  Message: $message";
$recipient = "admin@mydomain.com";
$subject = "Pickup Request";
$headers = "Bcc: myemail@gmail.com";
mail($recipient, $subject, $formcontent,$headers) ;
echo "Thank You!";
?>

Answer 1

有很多方法可以通过简单的方式完成您想要的任务。

＃1 发布任何内容时，.php不是您拥有的唯一解决方案，但您也可以拥有.php?email=sent，这甚至可以取代您的一些输入值。 ;重新使用，并可能节省一些脚本空间。此外，此方法允许您使用GET，以后可以包含在header('Location: /?email=sent');中，然后在您选择返回的位置，然后您可以获取该GET语句并使用它在实际页面上显示您的消息它是从一些外部.php文件发送的，人们甚至不打算看。但是过于简单可能会导致PHP注入的风险。因此，请确保并研究如何保护代码免受注入。

＃2 另一种解决方案是在JavaScript中使用AJAX将所有信息发送到form-to-email.php，您也可以使用POST代替GET。因此，这样您就可以避免使用header('Location: ');，而是在成功获取时通过AJAX检索所有信息。然后你可以使用alert（）甚至在屏幕上显示一个简单的DIV框，并显示已发送电子邮件的消息。然后使用JS在一段时间后使用setTimeout()函数关闭div。

＃3 此解决方案是上述两种方案的组合。它是使用header('Location: ?email=sent')然后当你返回它发送的页面时，你可以使用<?=$_GET['email']?>并将它放入你的JS代码中，你可以在其中创建一个条件{{1} 1}}。

希望这对你有所帮助。祝你好运！

Answer 2

访问https://www.w3schools.com/howto/howto_js_snackbar.asp 弹出窗口并提交使用jquery 访问Submit a form using jQuery

在你的html文件中添加snackbar html css并让它们显示：none ...点击提交按钮后进行处理，当ajax请求的http响应成功时....它显示Snackbar的帮助showPop（）函数

        <ol>
            <li>How would you like me to call you? <input id="nme" name="name" 
type="text" placeholder="Big Jack" /> </li>

            <li>Pick Up Address
                <ul> <li style="list-style-type: none;"></li>
                    <li>Number and Street or Site Name <input type="text" name="pickupadd" placeholder="5600 American Dr or Toronto Pearson Airport Terminal 3"/> </li>
                    <li>Post Code <input type="text" name="pickuppc" placeholder="L4W 1S9" /></li>
                </ul>

            </li>
            <li>Drop Off Address
                <ul>
                    <li>Number and Street or Site Name <input type="text" name="dropoffadd" placeholder="40 Bay Street or Air Canada Centre"/> </li>
                    <li>Post Code <input type="text" name="dropoffpc" placeholder="M5J 2X2"/> </li>
                </ul>
            </li>

            <li>Your Contact
                <ul>
                    <li>Phone Number <input type="number" name="phonenumber" 
    placeholder="1 416 123 4567" /></li>
                    <li>Email <input type="email" name="useremail" 
    placeholder="youremail@gmail.com"/> </li>
                </ul>
            </li>

        </ol>

        Message 
        <textarea style="height: 200px" name="message" placeholder="Anything 
 I should know such as how big your"></textarea>
        <input type="submit" value="send" onclick="fsubmit();"/>
    <
<script>
function fSubmit(){
    var name = document.getElementById("nme").value;
    //take all value same as name by giving id
    var dataString = 'name='+ name + '&message=' + message;
    //make data String as above addding all field element
    jQuery.ajax({
        url: "/wp-content/themes/writee/templates/form-to-email.php",
        data: dataString,
        type: "POST",
        success: function(data){
           showPop();
        },
        error: function (){}
    });
return true;
}
function showPop(){

    var x = document.getElementById("snackbar")

    x.className = "show";

    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 
3000);
}
</script>

使提交按钮成为HTML联系表单

2 个答案: