在PHP表单提交加载器

我试图建立一个'Loader'在用户提交表单（PHP）。这是迄今为止我看到的似乎没有工作。在PHP表单提交加载器

请问突出哪里可能是潜在问题？这里脚本之前

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

来源

2016-12-11 Mohan Wijesena

至少其中一个问题是您试图它们加载到DOM之前选择的元素。您可以将文档视为从顶部到底部加载到DOM中。您的脚本位于您正尝试选择的元素之上，因此它们不在DOM中，因此它们不能被执行。

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

否则，如果您想将它留在头部，您将需要准备好文档。

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

这将导致内部的逻辑延迟，直到在页面加载所有标记到DOM，它们将是可利用在该点要被选择并与之交互。

来源

2016-12-11 17:44:37 Taplar

加载jQuery库....

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

来源

2016-12-11 17:34:26

*加载jquery库*？如果它没有加载，那么他的myForm尝试将失败。也许换个话题？ – Taplar

我认为你的意思是“等待文档加载脚本之前” – fredrover

显然他不加载文件..所以 –

在PHP表单提交加载器

回答

相关问题