I'm making a simple Php and javascript project where my css design has some overlay design in it. Now I have a button when clicked it displays an overlay div named "myNav" where a div named "req_form" and form are on it where users can fill out inputs and submit them, then my php code will store those data in my database. I just can't figure out how to replace the div and dislpay success on it after successfully submitting the data in my Php code.
<?php
include 'includes/autoloader.inc.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function openNav() {
document.getElementById("myNav").style.width="100%";
}
function closeNav(){
document.getElementById("myNav").style.width = "0";
}
</script>
<link rel="stylesheet" type="text/css" href="css/cssticket.css">
</head>
<body>
<button class="button_a" onclick="openNav()">Create Request</button> //OPENS THE OVERLAY DIV
<div id="myNav" class="overlay"> // THIS IS THE OVERLAY DIV
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<div id="req_form" class="inputs"> // THIS IS THE DIV I WANT TO BE REPLACE BY A MESSAGE SUCCESS
<div id="error"></div>
<form id="form" action="includes/enduser.inc.php" method="POST">
<input type="text" name="userrequester" placeholder="name" >
<br>
<label for="reqtype">Request type:</label>
<select name="priority" required>
<option value="">Select</option>
<option value="High">General</option>
<option value="Low">Urgent</option>
</select>
<br>
<label for="itemtype">Item type:</label>
<input type="radio" name="typeitem" value="Borrowed" required><label>Borrowed</label>
<input type="radio" name="typeitem" value="Replace" required></input><label>Replace</label>
<br>
<label>Summary :</label>
<br>
<textarea name="summary" cols="30" rows="10" required ></textarea>
<br>
<button type="submit" name="sendrequest" class="button_a">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>
here is my php file :
include 'autoloader.inc.php';
$request = new usercontlr;
if (isset($_POST['sendrequest'])) {
$date = date ('F d, Y');
$enduser = $_POST['userrequester'];
$priority = $_POST["priority"];
$itemtype = $_POST["typeitem"];
$summary = $_POST["summary"];
$status = "new";
$request->createticket($enduser, $priority, $itemtype, $status, $summary, $date); // function where my object stores data in my database
What i have tried already is to echo out some javascript that should have change the into a success message after storing the data inside this php file.
echo ' <script type="text/javascript">
document.getElementById('req_form').style.display = "none";
var h1 = document.createElement('h1');
var result = document.createTextNode('Success!');
h1.appendChild(result);
document.getElementById('myNav').appendChild(h1);
</script> ' ;
but when I check the console I got an error (enduser.inc.php:3 Uncaught TypeError: Cannot read property 'style' of null at enduser.inc.php:3 (anonymous) @ enduser.inc.php:3)
Here is also my css if it helps:
.inputs {
padding: 20px;
display: inline-block
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(11, 156, 49);
background-color: rgba(11, 156, 49, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
font-family: monospace;
font-size: 15px;
background-color: white;
border-radius: 2%;
position: relative;
top: 25%;
width: 50%;
margin: 0 auto;
text-align: center;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: red;
}
.overlay .closebtn {
color: white;
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
Aucun commentaire:
Enregistrer un commentaire