JA

• ARعربي
• DADansk
• ENEnglish
• ESEspañol
• FAفارسی
• FRFrançais

• IDIndonesia
• ITItaliano
• JA日本語
• KO한국어
• RUРусский
• TRTürkçe

• UKУкраїнська
• UZOʻzbek
• ZH简体中文

私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。

購入するEPUB/PDF

検索

検索

チュートリアルマップ

Light themeDark theme

シェア

عربيDanskEnglishEspañolفارسیFrançaisIndonesiaItaliano日本語한국어РусскийTürkçeУкраїнськаOʻzbek简体中文

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>

<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();

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

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