Question

单击按钮提交时，我需要显示进度条。下面是代码，当我单击按钮时，控制台正在打印消息，但div元素converting_prog未显示。

以下代码有什么问题？

<!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>

Answer 1

运行时，DOM还没有加载。尝试将整个PHP if块移动到页面末尾，以便JS可以稍后运行。

或者您可以将该脚本包装在window.onload = function(){}处理程序中。

Answer 2

由于您在提交表单后检测到发布按钮（异常），因此在生成页面时您已经知道是否提交了表单。因此，您不需要JS代码来隐藏块 - 只是在不需要时不打印它。

-----------------------
2016-05-09 12:26:00.000

所以，只需在现有的进度条形码周围添加即可。

Answer 3

在脚本代码之间使用此代码：

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

Answer 4

我使用以下代码更改$ _POST检查状态和位置，该代码正常工作：

<!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
} ?>

POST时显示div元素的php

4 个答案: