单击“提交”按钮后弹出成功消息

时间：2019-07-25 10:15:19

标签： php html forms

我创建了一个包含html和php代码的Web php网页，请参见下文。

提交表单时，它会向我发送电子邮件，并显示一条成功失败消息。因此，一切正常。

我的问题：我想弹出成功或失败消息或成为模式消息，但我不知道如何做。我应该在哪里更改代码并添加模态？

我的顶部是php，然后是HTML表单。我的表单还具有Google Recaptcha验证工具。我只想添加一个模式，但是我不知道如何以及在哪里添加代码。

<?php
    error_reporting(0);
    $msg="";

    if (isset($_POST['submit'])) {

        $to = "aleciadeklerk.119@gmail.com";
        $subject = "Form Submission";
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        $check = $_POST['check'];

        $msgBody = 'Name: '.$name.'Message: '.$message.'Subscribe: '.$check.'E-mail: '.$email;
        $headers = 'From: '.$email;

        $secretKey = "6LdXbq8UAAAAAM1B79Yz2IPgcTuIynBXeJMF2ZLY";
        $responseKey = $_POST['g-recaptcha-response'];

        $url = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey";

        $response = file_get_contents($url);
        $response = json_decode($response);

        if ($response->success) {
            if (mail($to, $subject, $msgBody, $headers)) {
                $msg="Message sent successfully!";
            }
            else {
                $msg="Failed to send the message. Please try again.";
            }
        }
        else {
            $msg="Verification Failed";
        }
    }
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

        <link rel="stylesheet" href="style.css">

        <title>Dibene Solutions</title>
        <link rel = "icon" type = "image/png" href = "images/dibene_icon_dark.png">
    </head>

    <body>
        <div>
            <div class="container-fluid" id="contact">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <a name="contact"><h2>Contact us</h2></a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <form action="<?= $_SERVER['PHP_SELF'] ?>" method="post" class="p-2">

                                <div class="form-group">
                                    <input type="text" name="name" class="form-control" placeholder="Enter name" required>
                                </div>

                                <div class="form-group">
                                    <input type="email" name="email" class="form-control" placeholder="Enter e-mail" required>
                                </div>

                                <div class="form-group">
                                    <textarea name="message" rows="4" class="form-control" placeholder="Write your message" required></textarea>
                                </div>

                                <div class="form-group">
                                    <label><input type="checkbox" name="check" class="form-control" checked>Subscribe to monthly newsletter.</label>
                                </div>

                                <div class="form-group">
                                    <div class="g-recaptcha" data-sitekey="6LdXbq8UAAAAAAf7mQJqfbBbLWA36c1Qiin8EhBp"></div>
                                </div>

                                <div class="form-group">
                                    <input type="submit" name="submit" value="Send" class="btn btn-block">
                                </div>
                            </form>
                        </div>
                    </div>    
                </div>
            </div>
        </div>

        <script src="https://www.google.com/recaptcha/api.js" async defer></script>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


    </body>
</html>

我的目的是单击提交按钮，然后弹出一个带有成功或失败消息的模式。

3 个答案:

答案 0 :(得分：0)

如果要将模式用作信息消息，请将模式放在body标记后的html内，然后在事件成功或失败后使用javascript对其进行调用。 用于模式的JavaScript：$('#myModal').modal(options)。

或者，如果您希望使用更简单的方法，则可以使用JavaScript alert()通知事件成功或失败

答案 1 :(得分：0)

我对代码做了很少的更改。我包括了引导程序模式代码和javascript函数来调用弹出窗口。检查此代码。

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

        <link rel="stylesheet" href="style.css">

        <title>Dibene Solutions</title>
        <link rel = "icon" type = "image/png" href = "images/dibene_icon_dark.png">
    </head>

    <body>
    <div>
        <div class="container-fluid" id="contact">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <a name="contact"><h2>Contact us</h2></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <form action="<?= $_SERVER['PHP_SELF'] ?>" method="post" class="p-2">

                            <div class="form-group">
                                <input type="text" name="name" class="form-control" placeholder="Enter name" required>
                            </div>

                            <div class="form-group">
                                <input type="email" name="email" class="form-control" placeholder="Enter e-mail" required>
                            </div>

                            <div class="form-group">
                                <textarea name="message" rows="4" class="form-control" placeholder="Write your message" required></textarea>
                            </div>

                            <div class="form-group">
                                <label><input type="checkbox" name="check" class="form-control" checked>Subscribe to monthly newsletter.</label>
                            </div>

                            <div class="form-group">
                                <div class="g-recaptcha" data-sitekey="6LdXbq8UAAAAAAf7mQJqfbBbLWA36c1Qiin8EhBp"></div>
                            </div>

                            <div class="form-group">
                                <input type="submit" name="submit" value="Send" class="btn btn-block">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p id="txtMsg"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>


    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


    <script>
        function popup(msg){
            document.getElementById("txtMsg").innerHTML = msg;
            $("#myModal").modal();
        }
    </script>
    <?php
    error_reporting(0);
    $msg="";

    if (isset($_POST['submit'])) {

        $to = "aleciadeklerk.119@gmail.com";
        $subject = "Form Submission";
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        $check = $_POST['check'];

        $msgBody = 'Name: ' . $name . 'Message: ' . $message . 'Subscribe: ' . $check . 'E-mail: ' . $email;
        $headers = 'From: ' . $email;

        $secretKey = "6LdXbq8UAAAAAM1B79Yz2IPgcTuIynBXeJMF2ZLY";
        $responseKey = $_POST['g-recaptcha-response'];

        $url = "https://www.google.com/recaptcha/api/siteverify? 
     secret=$secretKey&response=$responseKey";

       $response = file_get_contents($url);
        $response = json_decode($response);


            if ($response->success) {
                if (mail($to, $subject, $msgBody, $headers)) {

            $msg = "Message sent successfully!";

            echo '<script type="text/javascript">',
            'popup("'.$msg.'");',
            '</script>';

        } else {
            $msg = "Failed to send the message. Please try again.";
            echo '<script type="text/javascript">',
                'popup("'.$msg.'");',
            '</script>';
        }
    }
        else {
            $msg="Verification Failed";
echo '<script type="text/javascript">',
                'popup("'.$msg.'");',
            '</script>';
        }
    }
    ?>
    </body>

    </html>

答案 2 :(得分：0)

您可以创建一个隐藏字段，例如：

<input type="hidden" name="msg" id="msg" value="<?php echo $msg ?>">

然后在准备就绪的文档上使用JQuery：

$(document).ready(function() {
    if($('#msg').val() != "")
    {
       alert($('#msg').val()); // or replace with a JQuery modal
    }
});
相关问题
最新问题