6

驚いたことに、JS からフォームを送信しているときに、この奇妙な問題が発生しました。

問題：

ボタンsubmitとanchor link

<form method="POST" action="page.html" name="foobar" id="test">
  <input type="text" />
  <input type="submit" />
</form>

<a href="#" onclick="document.getElementById('test').submit();">click me</a>

submit イベントをキャッチする関数

document.getElementById('test').onsubmit = function() {
   // Same result with 
   //     * document.foobar.onsubmit
   //     * document.forms['foobar'].onsubmit

   alert('foobar');
   return false;
}

これで、ボタンをクリックしてフォームが送信されるとsubmitアラートが表示されますが、リンクをクリックしたときは表示されません。これはなぜそうしているのでしょうか？

問題を示すフィドル

4

2 に答える 2

12

合理的に決定的な回答を提供するために、HTML フォーム送信アルゴリズムの項目 5 では、submit メソッドを呼び出してフォームが送信されなかった場合にのみ、フォームが送信イベントを送出すると述べています (つまり、ボタンまたはその他の暗黙的な方法で送信された場合にのみ、送信イベントを送出します)。メソッド (例: フォーカスが入力タイプのテキスト要素にあるときに Enter キーを押す)。

submit イベントが送出されない場合、submit ハンドラは呼び出されません。

これは、サブミット メソッドがサブミット ボタンと同じことを行う必要があると述べたDOM 2 HTML 仕様とは異なります。

したがって、スクリプトを使用してフォームを送信する場合は、送信リスナーを手動で呼び出す必要があります。リスナーがaddEventListenerを使用して追加された場合は、フォームを調べても検出できないため、それを覚えて呼び出す必要があります (以下に示すように)。

リスナーがインラインに設定されているか、DOM のonsubmitプロパティに追加されている場合は、次のようなことができます。

<form onsubmit="return validate(this);" ...>
  ...
</form>
<button onclick="doSubmit()">submit form</button>

<script>
function doSubmit() {
  var form = document.forms[0];

  if (form.onsubmit) {
    var result = form.onsubmit.call(form);
  }

  if (result !== false) {
    form.submit();
  }
}
</script>

パラメータを渡したり、他のことをしたりする必要がある場合、生活はより困難になります。

于 2012-10-10T13:42:05.437 に答える
1

それがどのようform.submitに動作するかです。

フォームの onsubmit イベント ハンドラー (たとえば、onsubmit="return false;")は、Gecko ベースのアプリケーションからこのメソッドを呼び出したときにトリガーされません。一般に、HTML ユーザー エージェントによって呼び出されることは保証されていません。

関数onsubmitを呼び出して、それも呼び出すonclickだけです。

于 2012-10-10T12:34:44.033 に答える