dongyoudi1342 2016-06-07 07:30
浏览 43
已采纳

如何在php中显示div中的div

I have index.php, in index.php there is a login form with session. If username and password are correct, it would go to home.php. But if username or password is incorrect I want to show div above login form that contains an error message like this Error Message.

I want this warning div is hidden and it will be shown only if username or password is incorrect. I've tried some other solution but none of them work, first If I put div in else condition, it will appear above login form no matter what the condition are. Second, if I put javascript to change style display = block, it won't appear in index page. Please help me to solve this problem. Thanks.

Index.php

       <?php
          session_start();
          if(isset($_POST['login']))   
          {
            $user = $_POST['user'];
            $pass = $_POST['pass'];
            if($user == "admin" && $pass == "admin") 
            {                                      
              $_SESSION['user']=$user;
            ?>
              <script language="javascript">window.location.href='home.php' </script>
            <?php
            } else {
            //What should I do here?                
            ?>
              <script language="javascript">document.getElementById("warning").style.display = "block" </script>
            <?php
            }
          }
        ?>

        <!-- Warning that I want to show if username or password is incorrect -->
        <div id="warning" class="w3-container w3-red w3-text-white w3-card-2 w3-animate-opacity" style="position: relative;margin-top: 20px;display:none">
            <span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
            <strong>Warning!</strong> Incorrect Username or Password!
        </div>
        <!-- Login form -->
        <form class="w3-container" action="" method="post">
        </form>

[EDIT]

I finally solved the problem by following Sharky's suggesstion to put php code below warning div. In else case I'm still using javascript that will change style display of warning div to block. Thanks for all your help :)

  • 写回答

3条回答 默认 最新

  • dongnan4571 2016-06-07 08:48
    关注

    The reason why your div is not showing, is because your javascript which sets the display:block; is being executed BEFORE that div is generated in your markup.

    Simple scenario (which fails):

        <html>
        <head>
            <script language="javascript">
                document.getElementById("warning").style.display = "block";
            </script>
        </head>
        <body>
            <div id="warning" style="display:none;">hello</div>
        </body>
    </html>

    this will result to Uncaught TypeError: Cannot read property 'style' of null because the moment javascript tries to get the element with id warning there is only this markup "existing" in the browser:

    <html>
    <head>
        <script language="javascript">
            document.getElementById("warning").style.display = "block";
        </script>

    do you see any div with id warning on the above markup? no, there isn't any div at all. in fact there is no <body> yet!

    So in order for this to work, your javascript must go after that div. put it at the bottom just before the </body>. See the following, which works:

        <html>
        <head>
        </head>
        <body>
            <div id="warning" style="display:none;">hello</div>
            <script language="javascript">
                document.getElementById("warning").style.display = "block" 
            </script>
        </body>
    </html>

    Now, about your code: if you do not want to move that big block of if you can just set a flag variable like

    $need_to_show_warning = false;
if($user == "admin" && $pass == "admin") 
{                                      
    $_SESSION['user']=$user;
?>
<script language="javascript">window.location.href='home.php' </script>
<?php
} else {
//What should I do here?                
$need_to_show_warning = true;
}

    then, AFTER your div:

        <!-- Warning that I want to show if username or password is incorrect -->
    <div id="warning" class="w3-container w3-red w3-text-white w3-card-2 w3-animate-opacity" style="position: relative;margin-top: 20px;display:none">
        <span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
        <strong>Warning!</strong> Incorrect Username or Password!
    </div>
<?php 
    if($need_to_show_warning)
    {
?>
<script language="javascript">document.getElementById("warning").style.display = "block"; </script>
<?php
    }

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • php将div转图片不显示,base64图片,在background-image中不显示问题解析 - 哦吆～Blog
    2021-03-23 20:57
    dfz1108的博客 当我们使用PHP将线上图片资源转换为base64图片编码后，图片编码放在 img src中可以正常展示，但如果将其放入CSS样式background-image中时，会出现图片不能正常显示问题，此问题是因为网络上的生成代码往往都使用...
  • ajax控制div窗口显示和隐藏
    2012-12-11 02:00
    要使用Ajax来控制div的显示，首先需要在JavaScript中创建一个Ajax请求。在接收到服务器响应后，根据返回的数据决定是否显示或隐藏特定的div。例如，服务器可能返回一个JSON对象，其中包含一个布尔值，表示是否显示...
  • PHP、web前端开发-布局系统.pptx
    2022-12-16 12:38
    在PHP和Web前端开发中，布局系统是构建网站界面的关键组成部分。这主要涉及到如何有效地组织和展示内容，以便在各种设备上提供良好的用户体验。这里我们将深入探讨两种主要的布局工具：容器（container）和栅格系统...
  • 在html显示数据库的信息,从数据库中提取信息并将其显示在HTML div
    2021-06-23 05:44
    weixin_39602967的博客 我正在尝试从数据库中获取信息并使用唯一ID将信息放入不同的div中 - 我的意思是，例如：分配给ID 1的div将显示该ID的条目，div = ID 2将执行相同的操作，依此类推。这是我到目前为止所拥有的：包含Article类的...
  • php layui实现前端多图上传实例
    2021-01-02 12:17
    php结合layui前端实现多图上传 前端html代码 <div class=layui-upload> <button type=button class=layui-btn layui-btn-normal id=testList>请选择图片</button> <span class=num_pic></span> ...
  • jquery实现可拖动DIV自定义保存到数据的实例
    2020-10-26 15:30
    文档中的HTML部分显示了一个简单的前端页面布局示例，使用了ul和li标签来布局多个可拖动的DIV元素。还包含了一些基本的样式定义，比如为DIV设置宽度、高度、边框等。此外，还定义了一个占位符模板，当拖动元素时，...
  • 买的php视频教程，PHP+MYSQL+实战项目开发，CSS+DIV WEB前端开发视频教程
    2016-09-26 22:39
    《PHP+MYSQL+实战项目开发，CSS+DIV WEB前端开发视频教程》是一套全面而深入的IT学习资源，旨在帮助初学者和有一定基础的开发者提升技能，掌握网站开发的核心技术。该教程涵盖了从基础到高级的PHP编程、MySQL数据库...
  • ajax实现从后台拿数据显示在HTML前端的方法
    2020-12-29 23:31
    拿到的数据会显示在这里 <div id=test></div> ajax源码： $(document).ready(function() { $.ajax({ url : admin/get_online_ganbu.php,//后台请求的数据，用的是PHP dataType : json,//数据格式 type : post,...
  • javascript怎么隐藏显示div
    2022-08-01 17:15
    m0_54850467的博客 先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。设置方法1、使用style对象的display属性，值为“none”可隐藏div元素，值为“block”可显示元素；2、使用...
  • html页面循环div,jquery 循环数组输出显示在html页面
    2021-06-11 12:48
    akun 75的博客 jquery 没有双向数据绑定，但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上，这时我们可以用字符串拼接，元素添加的方法去实现js部分如下：$(function(){var a=["1aa","2bb","3cc"];...
  • 没有解决我的问题, 去提问