POST时显示div元素的php

I need to show the progress bar when I click the button submit. Below is the code, when I click the button the console is printing the message but, the div element converting_prog is not showing.

What wrong with below code?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
        <?php
            //process the forms and upload the files
            if ($_POST) {
                //specify folder for file upload
                $user = $_GET["user"];
                ?>
                <script>
                    console.log("posting...");
                </script>
                <script type="text/javascript">document.getElementById('converting_prog').style.display = 'block';</script>
                <?php
            }
        ?>
    </head>
    <body>
        <div id="outPopUp">
            <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
                <input class="btn" name="submit" type="submit" id="submit" value="Submit"/>
            </form>
            <div id="converting_prog" class="progress" style="display:none; margin-right:20px;margin-left:20px;margin-top:20px;width:auto">
                <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
                    Converting %
                </div>
            </div>
        </div>
    </body>
</html>
douyi7283
douyi7283 一般来说,最好在关闭正文之前将所有<script>代码放在页面底部。
大约 4 年之前 回复
doudi2431
doudi2431 您可以在conversion_prog元素之后移动脚本。
大约 4 年之前 回复

4个回答



运行时,DOM尚未加载。 尝试将整个PHP if </ code>块移动到页面末尾,以便JS可以稍后运行。</ p>

或者你可以将该脚本包装在 window.onload = function(){} </ code> handler。</ p>
</ div>

展开原文

原文

When it runs, the DOM hasn't loaded yet. Try moving the whole PHP if block to the end of the page, so that the JS can run later.

Or you could wrap that script in a window.onload = function(){} handler.

dst2017
dst2017 我认为总是打印HTML然后根据服务器端(php)上也可用的条件隐藏JS没有意义。
大约 4 年之前 回复
douzhoulei8959
douzhoulei8959 在服务器端做什么? 我提供了一个解决方案 - 你可以(我看到你做的)提供替代方案。
大约 4 年之前 回复
duanfei8897
duanfei8897 为什么不在服务器端呢?
大约 4 年之前 回复
doutan2111
doutan2111 是的将POST检查移动到页面的末尾解决了问题。
大约 4 年之前 回复



在脚本标记之间使用此代码:</ p>

  document.getElementById(“id 您的按钮“)。addEventListener(”click“,function(){
document.getElementById(”converting_prog“)。style.display =”block“;});
</ code> </ pre>
< / DIV>

展开原文

原文

Use this code between your script tags :

document.getElementById("id of your button").addEventListener("click", function(){
document.getElementById("converting_prog").style.display = "block";});

I change your $_POST checking status and position with following code which is working fine :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
   </head>
   <body>
      <div id="outPopUp">
         <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
            <input class="btn" name="submit" type="submit" id="submit" value="Submit" />
         </form>
         <div id= "converting_prog" class="progress" style="display:none; margin-right:20px;margin-left:20px;margin-top:20px;width:auto">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
               Converting %
            </div>
         </div>
      </div>
   </body>
</html>
<?php
//process the forms and upload the files
if (isset($_POST['submit'])) { 
    //specify folder for file upload
    //$user = $_GET["user"];
    ?>
  <script>
     $('#converting_prog').show();
  </script> 
  <?php
} ?>

Since you are detecting post button after form is submitted (unusual) then at time when page is generated you already know if form is submitted or not. Because of that you don't need that JS code to hide the block - just simply don't print it when it's not needed.

if (!$_POST) {
?>
  <div id= "converting_prog" class="progress" style="margin-right:20px;margin-left:20px;margin-top:20px;width:auto">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
      Converting %
    </div>

</div>
<?php 
}

So just add that if around your existing progress bar code.

douzhengyi5022
douzhengyi5022 更多的想法 - 检查$ _POST数组并依赖于它的值打印或不是额外的块。 我没有环境来测试它。 但是如果你打算用它做一些额外的工作。 打印$ _POST,查看第一次打开页面时的内容以及提交表单时的内容。
大约 4 年之前 回复
duanbu9345
duanbu9345 现在它只会在您单击提交之前打印。
大约 4 年之前 回复
dongqucheng3851
dongqucheng3851 我认为仅打印div if($ _POST),然后不显示display:none是有意义的。
大约 4 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问