Question

我正在尝试在用户提交表单（PHP）时建立一个“Loader”。这是我迄今为止所做的，似乎没有效果。

您能否强调哪里可能存在潜在问题？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">
     $('#myForm').submit(function() {
       $('#loaderImg').show(); 
       return true;
     });
    </script>
</head>

<body>
<div class="wrapper">
    <form action="" method="post" id="myForm" name="myForm">
        <img src="../images/loader.gif" alt="loader1" style="display:none; height:30px; width:auto;" id="loaderImg">
        <input type="submit" id="clicknow" value="Click the button to go to another page">
    </form>

</div>
</body>
</html>

Answer 1

在编写脚本之前加载jquery库....

    <script type="text/javascript">
$(document).ready(function(){
    $('#myForm').submit(function() {
     $('#loaderImg').show(); 
      return true;
    });
});
  </script>

Answer 2

这里至少有一个问题是你在加载到DOM之前尝试选择元素。您可以将文档视为从顶部到底部加载到DOM中。您的脚本位于您尝试选择的元素之上，因此它们尚未在DOM中，因此它们无法执行。

有两种方法可以解决此问题。第一个（也可能是最简单的）是在</body>之前简单地将脚本移动到页面底部。这将导致它在目标元素位于DOM之后执行。

否则，如果您想将其保留在头部，则需要准备好文件。

$(function(){
  $('#myForm').submit(function() {
    $('#loaderImg').show(); 
    return true;
  });
});

这将导致内部逻辑延迟，直到页面将所有标记加载到DOM中，此时它们可供选择并与之交互。

PHP表单上的Loader提交

2 个答案: