如何使用JavaScript捕捉和处理网页表单提交事件-CSDN博客

本文介绍了如何通过HTML和JavaScript捕捉并处理表单提交事件。详细解释了使用<input type=submit/>和form.submit()两种提交方式下onsubmit事件的不同行为，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 在表单(form)中，如果以标签<input type="submit"/>作为表单提交的触发方式，那么在浏览器提交网页之前，会触发表单(form)的onsubmit事件。这样只要在表单(form)的onsubmit属性中加入代码即可完成表单提交事件的捕捉和处理。

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

点击提交按钮后，会有弹出框显示。

2. 如果表单的提交方式是直接调用表单的sumbit方法，那么表单的onsubmit方法将不会被触发。这样第1点所述的捕捉方法就会失效。

<html>
<body>
	<form id="form1" action="." method="GET" οnsubmit="alert('catch and do something')">
		<input type="button" value="提交查询" οnclick="form1.submit();"/>
	</form>
</body>
</html>

点击提交按钮后，不会有弹出框显示。

解决办法：劫持表单的submit属性，使其指向自定义函数，在这个函数中手动调用表单的onsubmit方法以及原先指向的那个submit方法。

<html>
<body>
	<form id="form1" action="." method="GET" οnsubmit="alert('catch and do something')">
		<input type="button" value="提交查询" οnclick="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>

* 以上代码样例仅为配合解释事件捕捉及处理的原理，并非最优。在引用上述样例代码时，根据具体的情况，可能需要做一些改动才能使其正常运转。