时间戳

首页 > 解决方案 > 提交是成功的文本即使重新加载后也不去

php - 提交是成功的文本即使重新加载后也不去

问题描述

我目前正在开发一个小型 PHP 项目，其中包括一个使用 xampp 服务器的简单表单。该表单正在运行，但我面临的问题是我希望在用户提交表单时出现“表单提交成功”文本。
现在的问题是，一旦有人第一次访问我的页面，它是不可见的，但是一旦他提交了它，即使在重新加载页面几次之后，它也不会消失。 下面是我的 PHP 代码： 我声明了一个变量“insert”，我首先声明它为 false，然后在成功插入数据时将其值更改为 true。我在我的 HTML 文件中说，如果“插入”值为真，则打印此内容。
标记的文本没有消失 

            <?php
        $insert= false;
        if (isset($_POST['name'])){

            //Connection Variables
            $server= "localhost";
            $username="root";
            $password="";

            //Create a database connection
            $con = mysqli_connect($server,$username,$password);

            //Check for Connection success
            if(!$con){
                die("Connection to this database failed due to".mysqli_connect_error());
            }

            //Collect Post var
            $name = $_POST['name'];
            $email = $_POST['email'];
            $age = $_POST['age'];
            $gender = $_POST['gender'];
            $phone = $_POST['phone'];
            $desc = $_POST['desc'];

            $sql= " INSERT INTO `trip`.`trip` (`name`, `age`, `gender`, `email`, `phone`, `desc`, `date`) 
            VALUES ('$name', '$age', '$gender', '$email', '$phone', '$desc', current_timestamp()); ";


            //Execute query

            if($con->query($sql)==true){
                // echo "Successfully inserted";
                $insert= true;

            }
            else{
                echo "Error: $sql <br> $con->error";
            }


            //Close connection
            $con-> close();

        }
        ?>


        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="https://fonts.googleapis.com/css?family=Roboto|Sriracha&display=swap" rel="stylesheet">
            <title>Trip Form</title>
            <link rel="stylesheet" href="styles.css">
        </head>
        <body>
            <img class="bg" src="bg.jpg" alt="Travel">
            <div class="container">
                <h1>Welcome to Book Karo Apni Trip</h1>
                <p>Enter your Details to confirm your participation.</p>
                <?php
                if($insert==true){
                echo "<p class='submitMsg'>Thanks for submitting your form. We are happy to see you joining us for the trip</p> ";
                }
                ?>
                <form action="index.php" method="post">
                    <input type="text" name="name" id="name" placeholder="Enter your name">
                    <input type="text" name="age" id="age" placeholder="Enter your age">
                    <input type="text" name="gender" id="gender" placeholder="Enter your gender">
                    <input type="email" name="email" id="email" placeholder="Enter your email">
                    <input type="phone" name="phone" id="phone" placeholder="Enter your mobile number">
                    <textarea name="desc" id="desc" cols="30" rows="10"placeholder="Enter any other information here"></textarea>
                    <button class="btn">Submit</button>
                    <!-- <button class="btn">Reset</button> -->
                    </form> 


            </div>

            <script type="text/javascript">
        window.onbeforeunload = function(e) {
            document.cookie = 'cookiename=; expires=' + d.toGMTString() + ';';
        };
            </script>
        </body>
        </html>

下面是我的 CSS 文件： 
        *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
    }
    .container{
        max-width: 80%;
        /* background-color: rgb(229, 145, 229); */
        padding:34px;
        margin: auto;
    }
    .container h1,p{
        text-align: center;
        font-family: 'Sriracha', 'cursive';
        font-size: 40px;
    }
    p{
        font-size: 20px;
        text-align: center;
        font-family: 'Sriracha', 'cursive';
    }
    .submitMsg{
        font-size: 18px;
        color: green;
        background-color:#ccc;
        
    }
    input,textarea{
        width: 80%;
        margin: 11px auto;
        padding:7px;
        font-size: 16px;
        border: 2px solid black;
        border-radius: 6px;
        outline: none;

    }
    form{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .btn{
        color: white;background: purple;
        padding: 8px 12px;
        font-size: 20px;
        border: 2px solid white;
        border-radius: 14px;
        cursor: pointer;
    }

    .bg{
        position: absolute;
        width: 100%;
        z-index: -1;
        opacity: 0.7;
    }

标签： phpmysqlixamppbackend

解决方案

重新加载页面时会重新post发送数据。您可能已经注意到许多银行或电子商务网站都显示不重新加载页面的通知。那是因为与表单相关的操作被重新处理（尽管他们有保护）。

因此，每次重新加载网页时都会重新提交表单。如果您提供了完整的代码，那么每次重新加载都会插入一个新行。

有很多方法可以在不重新提交数据的情况下重新加载。一些例子是

  1. 将用户重定向到不同的页面。
  2. 使用ajax处理提交
  3. 在将数据插入 mysql 之前检查重复值。

这些可能是基本方法。这些中的每一个都是关于 SO 以及外部的非常好的文档。

推荐阅读