2016-12-11 12 views
0

フォーム(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> 

答えて

1

少なくとも一つは、あなたがそれらがDOMにロードされる前に、要素を選択しようとしているです。ドキュメントが上から下に向かってDOMに読み込まれると考えることができます。あなたのスクリプトは、あなたが選択しようとしている要素の上にあります。したがって、それらはDOMにまだありません。したがって、それらはまだ動作できません。

この問題を解決するには2通りの方法があります。最初の(そしておそらく最も簡単な)方法は、単にスクリプトをページの一番下に移動することです(</body>の直前)。これは、対象とする要素がDOM内にある場合に実行されます。

それ以外の場合は、頭に置いておきたい場合は、ドキュメントを用意しておく必要があります。

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

このページは彼らが選択し、相互作用するために利用できるようになります、その時点でDOMにすべてのマークアップを、ロードするまで内部のロジックが遅れることになります。

1

ロードjQueryライブラリ....

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

* load jquery library *?ロードされていなければ、myFormの試行は失敗します。多分言い換えれば? – Taplar

+0

私はあなたが "ドキュメントがスクリプトの前にロードされるのを待つ"ということを意味すると思います – fredrover

+0

彼はドキュメントを読み込まないようにしています.so –