ywork2020.com

Title

要素にサブミットイベントを登録する

目次 (INDEX)

submitとは

ここで説明する submit とは次の語句からなるjQueryのメソッドです。
submit
読み: サブミット
意味: 送信

目次に戻る

submitメソッドの概要

このメソッドは、セレクタに該当する既存要素にサブミットイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているサブミットイベントを呼び出します。

サブミットイベントは、 input 要素 submit 型button 要素 submit 型 のクリックよってのデータの送信が行われたとき、またはプログラムによって意図的にイベントを呼んだときに発生します。

このイベントは、バブリングを起こしますのでセレクターが上記の要素である必要はありません。

イベントのバブリングとは子要素にバインドしているイベントの発生が先祖要素や親要素に伝播して、先祖・親要素にバインドしている同種イベントも同時(子要素から順次)に発生する現象のことを言います。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

Selector.submit(Handler(EventObject));
Selector.submit([EventData], Handler(EventObject));
Selector.submit();
  • 01: サブミットイベントが発生した時点でハンドラーが実行されます。
  • 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
  • 03: セレクタにバインドしているサブミットイベントを呼び出します。

目次に戻る

サンプルコードと実行結果

ここでは、ダイアログ要素の送信フォームを使って送信を行うサンプルを作成してみました。

ダイアログの送信ボタンをクリックした時点でサブミットイベントが発生します。 それが先祖要素である、ダイアログ要素へとバブリングで伝わり、ダイアログ要素のサブミットイベントで「送信確認」の処理を実行するというものです。

サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<button id="idButton">Dialog Open</button>
	<dialog id="idDialog">
		<form method="dialog">
			<div>
				<select id="idSelect">
					<option>Item-1</option>
					<option>Item-2</option>
					<option>Item-3</option>
				</select>
			</div>
			<div>
				<button id="idSubmit" type="submit">Submit (送信)</button>
			</div>
		</form>
	</dialog>
	<output id="idOutput">送信された値が出力されます</output>
	<script>...</script>
</body>
  • 06: button (ボタンです。ここでは、ダイアログを開くために使用します。)
  • 07-20: dialog (ダイアログです。この要素の子要素群がダイアログ内の各パーツとして働きます。)
  • 08-19: form (フォームです。method は通常、送信手段を設定するための属性ですが、ここでは method="dialog" としてダイアログでの使用を設定しています。)
  • 10-14: select (セレクトです。この要素の子要素である option がセレクトメニューのアイテムになります。)
  • 17: button (ボタンの送信型です。この要素がクリックされるとサブミットイベントが発生します。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		if(typeof $("#idDialog").get(0).showModal === "function"){
			$("#idDialog").get(0).showModal();
		}
		else{
			window.alert("このブラウザはdialogをサポートしていません");
		}
	});
	$("#idDialog").submit(function(){
		let result = window.confirm($("#idSelect").val() + " を送信します。よろしいですか?");
		if(result == true){
			$("#idSubmit").val($("#idSelect").val());
		}
		else{
			$("#idSubmit").val("送信されませんでした。");
		}
	});
	$("#idDialog").on("close", function(){
		$("#idOutput").text($(this).get(0).returnValue);
	});
</script>
  • 02-09: dialog 要素に対応しているブラウザかを判定しています。
  • 10-18: .submit(Handler(){処理}) (submit()を使ってHandlerをバインドします。ハンドラーには関数を指定しています。イベントが発生すると {処理} の部分が実行されます。)
  • 19-21: .on("close", Handler(){処理}) (クローズイベントに Handler をバインドします。ハンドラーには関数を指定しています。イベントが発生すると {処理} の部分が実行されます。)
  • 20: .returnValue (プロパティです。クローズイベント発生時に 送信に使ったボタンのvalueの値を返します。)
実行結果:
送信された値が出力されます

目次に戻る