个人中心
gpt4 book ai didi

javascript - 更改 php 端的 div 属性

转载 作者：行者123 更新时间：2023-11-28 03:03:28 26 4
gpt4 key购买 nike

我正在制作一个简单的 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

我已经尝试过的是回显一些 javascript，在将数据存储在此 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;
 }
 }

最佳答案

成功查询并将输入成功添加到数据库后，您将需要创建一个 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 全局设置是否成功 $_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> 中添加了成功标记并添加了填充和边框半径、石灰绿背景和深绿色以与成功相关联。表单顶部边距为 10 像素。

 <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;
}

关于javascript - 更改 php 端的 div 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60795344/

26 4 0
文章推荐： javascript - CSS 效果适用于静态表格数据，但当表格数据由 javascript 添加时效果不佳
文章推荐： c++ - gcc-via-nvcc 是否对这些总和和最大缩减进行矢量化？
文章推荐： c++ - 模糊的 C++ 编译错误
文章推荐： javascript - javascript添加和删除列表、输入框、选项选择等新元素的方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com