0

タグからフォームを送信する JavaScript コードをいくつか作成しました。コードは次のとおりです。

<script type="text/javascript">
var myForm = document.forms['myForm'];

var formSubmit = document.getElementById('formSubmit');


formSubmit.onclick = function(){
myForm.submit();
}
</script>

<form name="myForm" action="http://msn.com" method="post"> 
</form>
<div id="formSubmit"><button>Click me</button></div>

http://jsfiddle.net/HrCxz/でこのコードを試すと、正常に動作します。しかし、このコードを HTML ファイルに追加してページを実行すると、機能しません。コードの何が問題になっていますか? これを修正してください。事前に感謝します。

4

4 に答える 4

3

フィドルでは、コードはonloadハンドラー内で実行されます。これはデフォルトのオプションですが、左側のパネルで変更できます。で実行するように変更すると<head>、フィドルも機能しません: http://jsfiddle.net/HrCxz/1/

独自のハンドラーを追加するかonload、スクリプト ブロックを操作しようとする要素の後に移動する必要があります。スクリプト ブロックは、ブラウザーがページを上から下に解析するときに見つかった順序で実行されます。特定のスクリプト ブロック内の JS は、イベントから呼び出されるイベント ハンドラーにコードを配置しない限り、既に解析された要素、つまりソースの先頭近くに表示される要素のみを操作できonloadます。それをサポートするか、それを提供するライブラリを使用するか、それ以外の場合は自分でコーディングします)。

于 2012-12-04T11:45:00.863 に答える
0

ブラウザーが DOM 要素をロードする前に JavaScript が処理されているため、コード サンプルは機能しません。body 終了タグの直前に JavaScipt スニペットを配置する (DOM 要素がロードされた後に処理されるようにする) か、「on load」または「on ready」イベント ハンドラーを使用して DOM がいつロードされるかを検出する必要があります。次に、Javascriptを起動します。

DOM 要素がロードされたときに JavaScript を起動する方法の 3 つの例を次に示します。

1) jQuery を使用している場合は、Javascript を $(document).ready() イベント ハンドラに貼り付けます。

$(document).ready(function() {
  // Handler for .ready() called.
  var myForm = document.forms['myForm'];
  var formSubmit = document.getElementById('formSubmit');

  formSubmit.onclick = function(){
    myForm.submit();
  }
});

2) ドキュメントの「準備完了」に jQuery の代替構文を使用できます。

$(function() {
  // Handler for .ready() called.
  var myForm = document.forms['myForm'];
  var formSubmit = document.getElementById('formSubmit');

  formSubmit.onclick = function(){
    myForm.submit();
  }
});

2) ウィンドウの「load」イベントにバインドされたコールバック関数に JavaScript を追加します。これはイベント ハンドラでもあります。

window.addEvent('load', function() {
  var myForm = document.forms['myForm'];
   var formSubmit = document.getElementById('formSubmit');

   formSubmit.onclick = function(){
     myForm.submit();
   }
})

乾杯！

于 2012-12-04T12:04:36.177 に答える
0

JSFiddle はonloadイベントを使用しています。

ステップ1：

JS を<form>タグの下に移動して、これを試してください。

<form name="myForm" action="http://msn.com" method="post"> 
</form>
<div id="formSubmit"><button>Click me</button></div>

<script type="text/javascript">
   var myForm = document.forms['myForm'];

   var formSubmit = document.getElementById('formSubmit');


   formSubmit.onclick = function(){
      myForm.submit();
   }
</script>

ステップ2：

onloadまたは、このようにイベントを添付することもできます。

<script type='text/javascript'>//<![CDATA[ 
  window.addEvent('load', function() {
     var myForm = document.forms['myForm'];

     var formSubmit = document.getElementById('formSubmit');

     formSubmit.onclick = function(){
         myForm.submit();
     }
  });//]]>  

</script>

<form name="myForm" action="http://msn.com" method="post">
</form>

<div id="formSubmit"><button>Click me</button></div>
于 2012-12-04T11:45:29.357 に答える
0

div 要素でクリック関数を呼び出していますが、ボタンでこれを行う必要がありましたか?var formSubmit = document.getElementById('BUTTONIDHERE');

于 2012-12-04T11:46:54.083 に答える