I'm currently working on a small PHP project, which includes a simple form using xampp server. The form is working but the issue that I'm facing is that I want a text "form submission successful" to appear when a user submits the form.
Now the problem is that once someone visits my page for the first time it is not visible but once he submits it then even after reloading the page for several times, it is not disappearing.
Below is my PHP code:
I have declared a variable 'insert', I've first declared it to be false, then I'm changing its value to be true when data is inserted successfully. I'm saying in my HTML file that if the 'insert' value is true then print this.
<?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>
Below is my CSS file:
*{
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;
}
