私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
購入するEPUB/PDF
チュートリアルマップ
  1. チュートリアル
  2. ブラウザ: ドキュメント, イベント, インタフェース
  3. フォーム, コントロール
2018年9月24日

フォームの送信: submit のイベントとメソッド

See More

submit イベントはフォームが送信されたときにトリガされます。通常、フォームをサーバーに送信する前に検証したり、送信を中止したり、JavaScriptで処理したりするために使用されます。

メソッド form.submit() で JavaScript からのフォーム送信を開始することができます。独自のフォームを動的に作成してサーバーに送信するために使用できます。

それらの詳細を見てみましょう。

イベント: submit

フォームを送信する方法として、主に2つあります。:

  1. 1つ目 – <input type="submit"> または <input type="image"> をクリックします。
  2. 2つ目 – input フィールドで Enter を押します。

両方のアクションは、フォーム上で submit イベントにつながります。ハンドラはデータのチェックができ、もしエラーがあればそれらを表示し event.preventDefault() を呼び出すと、フォームはサーバには送られません。

以下のフォームで:

  1. テキストフィールドで Enter を押します。
  2. <input type="submit">

両方のアクションは alert を表示し、return false としているためフォームはどこにも送られません。:

<form onsubmit="alert('submit!');return false">
  First: Enter in the input field <input type="text" value="text"><br>
  Second: Click "submit": <input type="submit" value="Submit">
</form>
submit と click の関係

input フィールド上で Enter を使ってフォームが送信されるとき、<input type="submit"> で click イベントがトリガされます。

まったくクリックしていないにもかかわらず起きるので、面白いです。

デモです:

<form onsubmit="return false">
 <input type="text" size="30" value="Focus here and press enter">
 <input type="submit" value="Submit" onclick="alert('click')">
</form>

メソッド: submit

form.submit() を呼びだすことで、手動でサーバにフォームを送信することができます。

その後、submit イベントは生成されません。プログラマが form.submit() を呼び出す場合、スクリプトはすでにすべての関連する処理は行われたものとみなされます。

手動でフォームを作成して送信するために使われることがあります。このようになります:

let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';

form.innerHTML = '<input name="q" value="test">';

// submit するためにフォームはドキュメント内になければなりません
document.body.append(form);

form.submit();

タスク

モーダルフォーム

重要性: 5

メッセージ html 入力フィールドとボタン OK/CANCEL を持つフォームを表示する関数 showPrompt(html, callback) を作成してください。

  • ユーザテキストフィールドに何か入力し、Enter または OK ボタンをクリックする必要があります。その後、入力された値を一緒に callback(value) が呼ばれます。
  • そうではなく、ユーザが Esc ã‚„ CANCEL を押した場合、callback(null) が呼ばれます。

どちらの場合も、入力プロセスが終了したらフォームが削除されます。

要件:

  • フォームはウィンドウの中央です。
  • フォームは モーダル です。つまり、ユーザがそれを閉じるまではページの残り部分とのやりとりはできません。
  • フォームが表示されたとき、ユーザのためにフォーカスは <input> の中であるべきです。
  • キー Tab/Shift+Tab はフォームフィールド間でフォーカス移動し、他のページの要素へ移らないようにします。

使用例:

showPrompt("Enter something<br>...smart :)", function(value) {
  alert(value);
});

iframe でのデモ:

P.S. ソースドキュメントは固定された位置付けのフォーム用のHTML / CSSがありますが、それをモーダルにするのはあなた次第です。

タスクのためのサンドボックスを開く

モーダルウィンドウは、次のようにウィンドウ全体をカバーする半透明の <div id="cover-div"> を使って実装できます。:

#cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}

<div> がすべてをカバーするので、すべてのクリックを取得します。

また、body.style.overflowY='hidden' の設定により、ページスクロールを防ぐこともできます。

フォームは <div> の中ではなく、その隣です。なぜならそれには opacity をもたせたくはないからです。

サンドボックスで解答を開く

前のレッスン次のレッスン
チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。

チャプター

レッスンナビゲーション

シェア
GitHubで編集