在 php 端更改 div 属性答案

【问题标题】：change a div properties in php side在 php 端更改 div 属性
【发布时间】：2020-03-22 15:34:15
【问题描述】：

我正在制作一个简单的 Php 和 javascript 项目，其中我的 css 设计中有一些覆盖设计。现在我有一个按钮，单击它会显示一个名为“myNav”的覆盖 div，其中有一个名为“req_form”的 div 和表单，用户可以在其中填写输入并提交它们，然后我的 php 代码将这些数据存储在我的数据库中。在我的 Php 代码中成功提交数据后，我只是不知道如何替换 div 并在其上显示成功。

my overlay 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()">&times;</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

我已经尝试过的是在将数据存储在此 php 文件中之后，回显一些应该将其更改为成功消息的 javascript。

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.inc.php:3 Uncaught TypeError: Cannot read property 'style' of null 在 enduser.inc.php:3 (匿名)@enduser.inc.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;
 }
 }

【问题讨论】：

所以您想在客户提交表单并且没有问题后向他们发布成功？那是表单所在的模态吗？另外，我认为帖子将转到另一个页面进行处理，您需要将成功消息放回表单页面正确吗？

标签： javascript php css web

【解决方案1】：

在成功查询并将输入成功添加到数据库后，您将需要创建一个 header() 重定向到您的原始页面。

类似这样的：

if (isset($_POST['sendrequest'])) {

    $date = date ('F d, Y');
    $enduser =  $_POST['userrequester'];
    $priority = $_POST["priority"];
    $itemtype = $_POST["typeitem"];
    $summary = $_POST["summary"];
    $status = "new";


    // Pretty sure this can be wrapped in your if statement, may need to test that.
    // --> $request->createticket($enduser, $priority, $itemtype, $status, $summary, $date); 
    if($request->createticket($enduser, $priority, $itemtype, $status, $summary, $date)){
        $postMSG = "success"; // sending the success message over url as $_GET
        $host  = $_SERVER['HTTP_HOST']; // SERVER
        $uri   = rtrim(dirname($_SERVER['PHP_SELF']), '/\\'); // Directory
        $extra = 'ticketformpage.php'; // the page your form is on
        header("Location: http://$host$uri/$extra?$postMSG"); // header redirect with url post added
    }

现在在您希望显示成功消息的页面上，我们检查 GET 全局 isset 是否成功 $_GET['success'] 如果是，那么我们设置变量并显示它们并添加一些 css。

<?php 
$msg = NULL; // we set to NULL for when the message is not needed
if(isset($_GET['success'])){
  $msg = "Thank you for submitting through our ticket system.";
}else{
  $msg = NULL;
}

注意：我在<span>标签中添加了成功，并添加了padding和边界半径，limegreen bg em> 和 darkgreen color 与成功相关联。 10px margin-top 用于表单。

 <div id="req_form" class="inputs">
    <span class="success"><?=$msg?></span> <!--// add the success variable here-->
    <div id="error"></div>
    <form id="form" action="inputtest.php" method="POST">

CSS：

form {
  margin-top: 10px;
}
.success {
   background-color: limegreen;
   color: darkgreen;
   padding: 10px;
   border-radius: 5px;
}

【讨论】：