Я делаю простой проект Php и javascript, в котором мой css дизайн имеет некоторый оверлейный дизайн. Теперь при нажатии кнопки у меня отображается наложенный div с именем «myNav», где находится div с именем «req_form» и форма, где пользователи могут заполнять входные данные и отправлять их, тогда мой код php сохранит эти данные в моем база данных. Я просто не могу понять, как заменить div и успешно завершить успешную отправку данных после успешной отправки данных в моем коде Php.
мой оверлейный div
<?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>
вот мой php файл:
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
Я уже пытался вывести javascript, которое должно было бы превратиться в сообщение об успешном завершении после сохранения данных внутри этот php файл.
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> ' ;
, но когда я проверяю консоль, я получаю сообщение об ошибке (enduser.in c. php: 3 Uncaught TypeError: Невозможно прочитать свойство 'style' для null в enduser.in c. php: 3 (анонимно) @ enduser.in c. php: 3)
Вот и мой css, если это поможет:
.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;
}
}