web-dev-qa-db-ja.com

フォームの「アクション」と「onsubmit」：どちらが最初に実行されますか？

私はウェブページをデバッグしようとしていますが、その開口部が

<form name="aspnetForm" method="post" action="default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">

Web formsの基本的な知識しか持っていないので、actionとonsubmitの実行順序はどうなっているのだろうと思います。

javascripthtmlformspost
10
Not John Skeet

actionが最初に解決された場合、ブラウザーはページを離れ、JS実行環境がなくなり、onsubmitでJSを実行する場所がないため、そうではありません。

イベントハンドラーは、デフォルトのアクションの前に実行されます。デフォルトのアクションをキャンセルできます。

21
Quentin

これはHTML5仕様で説明されています：

4.10.22.3フォーム送信アルゴリズム

form 要素formが要素からsubmittedである場合submitter （通常はボタン）、オプションでsubmit() methodから送信されるフラグセットを使用して、ユーザーエージェントは次の手順を実行する必要があります。

  1. form documentをformの Document とします。

  2. フォームドキュメントに関連付けられていない場合 ブラウジングコンテキスト または アクティブなサンドボックスフラグセット に サンドボックスフォームのブラウジングコンテキストフラグ セットがある場合、次に何もせずにこれらの手順を中止します。

  3. フォームブラウジングコンテキストをフォームドキュメントの ブラウジングコンテキスト とします。

  4. submit() methodフラグが設定されていない場合、およびsubmitter要素の no-validate状態 がfalseの場合、 インタラクティブに制約を検証するformの結果を調べ、結果が否定的である場合（制約の検証により、無効なフィールドがあると結論され、おそらく通知されますこれのユーザー）次に 単純なイベントを発生させるform要素でinvalidという名前を付けて、これらの手順を中止します。

  5. submit() methodフラグから設定されていない場合、 単純なイベントを発生させる そのバブリングし、submitという名前でキャンセル可能、formにあります。イベントのデフォルトアクションが阻止された場合（つまり、イベントがキャンセルされた場合）、これらの手順を中止します。それ以外の場合は続行します（事実上、デフォルトのアクションは送信を実行することです）。

  6. フォームデータセットを フォームデータセットの作成 の結果としますフォーム送信者のコンテキストで。

  7. actionをsubmitter要素の action とします。

  8. actionが空の文字列である場合、actionを ドキュメントのアドレスform documentとします。

  9. Resolvesubmitter要素に対するURL action。これが失敗した場合は、これらの手順を中止してください。

  10. actionを結果の 絶対URL とします。

  11. アクションコンポーネントを結果の 解析されたURL とします。

  12. schemeを、結果の parsed URL の scheme とします。

  13. enctypeをsubmitter要素の enctype とします。

  14. メソッドを送信者要素の メソッド とします。

  15. targetをsubmitter要素の target とします。

  16. ユーザーがフォームの送信時に使用する特定の ブラウジングコンテキスト を指定した場合は、ターゲットブラウジングコンテキストを ブラウジングコンテキスト にします。それ以外の場合は、 ブラウジングコンテキスト名を指定してブラウジングコンテキストを選択するルール を適用しますtargetを名前として使用し、フォームブラウジングコンテキストを使用するコンテキストとしてアルゴリズムが実行され、ターゲットブラウジングコンテキストを結果の ブラウジングコンテキスト とします。

  17. ターゲットブラウジングコンテキストが前の手順で作成された場合、またはフォームドキュメントがまだ作成されていない場合 完全にロードされた およびsubmit() methodから送信されたフラグが設定され、次にreplaceをtrueにします。それ以外の場合は、falseにします。

  18. それ以外の場合は、各行の最初のセルで指定されたschemeの値に基づいて、以下の表で適切な行を選択します。次に、各列の最初のセルに指定されているmethodの値に基づいて、その行の適切なセルを選択します。次に、そのセルで名前が付けられ、表の下に定義されているステップにジャンプします。

               |        GET        |         POST
-------------------------------------------------------
http       | Mutate action URL | Submit as entity body
https      | Mutate action URL | Submit as entity body
ftp        | Get action URL    | Get action URL
javascript | Get action URL    | Get action URL
data       | Get action URL    | Post to data:
mailto     | Mail with headers | Mail as body

    schemeがこの表にリストされているものではない場合、動作はこの仕様では定義されていません。ユーザーエージェントは、これを定義する別の仕様がない場合、同様のスキームに対してこの仕様で定義されているのと同様の方法で動作する必要があります。

したがって、手順5でsubmitが発生し、キャンセルしてフォームの送信を防ぐことができます。その後アクションは解決されます。

9
Oriol

onsubmitmust最初に実行されます。フォームからfalseを返すと、フォームの送信が停止され、actionが要求されなくなるためです。

9
Jamiec

onsubmitは、フォーマットなどを確認するために最初に実行されます。次に、actionが実行され、バックエンドにデータを取得/ポストします。

0
Searene