Javascript 发布时php显示div元素_Javascript_Php_Html

Javascript 发布时php显示div元素

javascript php html

Javascript 发布时php显示div元素,javascript,php,html,Javascript,Php,Html,我需要在单击“提交”按钮时显示进度条。下面是代码，当我单击按钮时，控制台正在打印消息，但是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-

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

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>


控制台日志（“发布…”）；
document.getElementById（'converting_prog'）.style.display='block'；
换算%

运行时，DOM尚未加载。尝试将整个PHP

if

块移动到页面的末尾，以便稍后运行JS

或者您可以将该脚本包装到

window.onload=function（）{}

处理程序中。

当它运行时，DOM尚未加载。尝试将整个PHP

if

块移动到页面的末尾，以便稍后运行JS

或者您可以将该脚本包装在

window.onload=function（）{}

处理程序中。

由于您在表单提交后检测到post按钮（异常），所以在生成页面时，您已经知道表单是否已提交。正因为如此，您不需要JS代码来隐藏块——只要在不需要的时候不打印就行了

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 
}

if（！$\u POST）{
?>
换算%
由于您在表单提交后检测到post按钮（不常见），所以在生成页面时，您已经知道表单是否已提交。因此，您不需要JS代码来隐藏块，只需在不需要时不打印即可
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 
}

if（！$\u POST）{
?>
换算%
在脚本标记之间使用以下代码：
document.getElementById("id of your button").addEventListener("click", function(){
document.getElementById("converting_prog").style.display = "block";});

在脚本标记之间使用以下代码：
document.getElementById("id of your button").addEventListener("click", function(){
document.getElementById("converting_prog").style.display = "block";});

我使用以下代码更改您的$\ 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
} ?>


换算%
$（“#转换_prog”）.show（）；
我使用以下代码更改您的$\u 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
} ?>


换算%
$（“#转换_prog”）.show（）；
您可以在转换\u prog元素后移动脚本。通常，在关闭正文之前，将所有
代码放在页面底部是一个很好的做法。您可以在转换\u prog元素后移动脚本。通常，在关闭正文之前，将所有
代码放在页面底部是一个很好的做法。是的将POST检查移动到页面末尾解决了问题。为什么不在服务器端执行此操作？@MilanG在服务器端执行什么操作？我提供了一个解决方案——您可以（我看到您确实）提供另一个解决方案。我认为始终打印HTML，然后根据服务器端（php）提供的条件隐藏JS没有任何意义。是的，将POST检查移到页面末尾解决了问题。为什么不在服务器端执行此操作？@MilanG在服务器端执行什么操作？我提供了一个解决方案——您可以（我看到您确实）提供另一个解决方案。我认为始终打印HTML，然后根据服务器端（php）也可用的条件隐藏JS没有任何意义。我认为只打印divif（$\u POST）是有意义的
，然后没有显示：无
。现在它只会在您单击提交之前打印。这更像是一个想法-检查$\u POST数组，并根据它的值打印或不打印额外的块。我没有环境来测试它。但是如果您要使用它，请执行一些额外的工作。打印出$\u POST，查看页面打开时的内容第一次和什么时候提交表单。我认为只打印divif（$\u POST）是有意义的
，然后没有显示：无
。现在它只会在您单击提交之前打印。这更像是一个想法-检查$\u POST数组，并根据它的值打印或不打印额外的块。我没有环境来测试它。但是如果您要使用它，请执行一些额外的工作。打印出$\u POST，查看页面打开时的内容第一次和什么时候提交表格。