どのようにJavaScriptを使ってウェブページのフォームを捉えて処理してイベントを提出しますか?

1814 ワード

JavaScript IE

1.フォーム(form)において、ラベル＜input type=「submit」/>をフォームとして提出するトリガとして使用すると、ブラウザがウェブページを提出する前にフォーム(form)のonsubmitイベントがトリガされます.このようにフォーム(form)のonsubmit属性にコードを入れるだけでフォーム提出イベントのキャプチャと処理が完了します.

<html>
<body>
	<form action="." method="GET" onsubmit="alert('catch and do something')">
		<input type="submit"/>
	</form>
</body>
</html>

提出ボタンをクリックすると、ポップアップボックスが表示されます.

2.フォームの提出方法が直接フォームを呼び出すためのsumbit方法である場合、フォームのonsubmitメソッドはトリガされません.このように、第1の点で述べた捕捉方法は無効になる.

<html>
<body>
	<form id="form1" action="." method="GET" onsubmit="alert('catch and do something')">
		<input type="button" value="    " onclick="form1.submit();"/>
	</form>
</body>
</html>

提出ボタンをクリックしたら、ポップアップボックスの表示がありません.

解決策: フォームのsubmit属性をハイジャックして、カスタム関数を指します.この関数でフォームのonsubmitメソッドを手動で呼び出して、元に指していたsubmit方法もあります.

<html>
<body>
	<form id="form1" action="." method="GET" onsubmit="alert('catch and do something')">
		<input type="button" value="    " onclick="form1.submit();"/>
	</form>
	<script>
		var func = document.forms[0].submit;
		document.forms[0].submit=function(){
			if(this.onsubmit() != false)
				func.apply(this); // IE8     IE6,7   func();
		}
	</script>
</body>
</html>

*以上のコードサンプルは、イベントの捕捉及び処理の原理を説明するためにのみ最適ではない.上記のサンプルコードを引用する場合、具体的な状況によっては、いくつかの変更が必要となります.

太閤坊開発言語solity入門