在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表單提交加載器

回答

相關問題