【发布时间】：2021-08-29 04:11:56
【问题描述】：
我目前正在开发一个小型 PHP 项目，其中包括一个使用 xampp 服务器的简单表单。该表单正在运行，但我面临的问题是我希望在用户提交表单时出现“表单提交成功”文本。
现在的问题是，一旦有人第一次访问我的页面，它是不可见的，但一旦他提交了，即使重新加载页面多次，它也不会消失。
下面是我的PHP代码：
我已经声明了一个变量'insert'，我首先将它声明为false，然后在成功插入数据时将其值更改为true。我在我的 HTML 文件中说，如果 'insert' 值为 true，则打印此内容。
<?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;
}
【问题讨论】：
-
您正在重新加载页面吗？可能使用
F5或ctrl+F5或点击浏览器中的刷新按钮？ -
@endeavour 是的，我尝试过使用普通重载（Ctrl+R）重新加载它，我什至尝试了硬重载，以及开发人员工具中的“空缓存和硬重载”。但它总是可见的，一旦有人提交表单。
-
警告：您对SQL Injections 持开放态度，应该使用参数化的prepared statements，而不是手动构建查询。它们由PDO 或MySQLi 提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行，you are still in risk of corrupting your data。 Escaping is not enough!