`
nswish
  • 浏览: 108138 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

javascriptie 
阅读更多

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>

 

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

0
顶
2
踩
分享到：
| 在Windows中调用命令关机或是重启
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript表单事件汇总

    在深入探讨《javascript表单事件汇总》这一主题之前，我们首先需要理解JavaScript作为一种广泛应用于网页开发的脚本语言，如何通过处理各种事件来增强用户体验、实现动态交互效果。本文将详细解析一系列重要的...

    说说回车键触发表单提交的问题

    在实际开发中，考虑到不同浏览器的兼容性和用户习惯，开发者需要谨慎处理回车提交事件，确保功能的稳定性和用户体验的一致性。同时，利用源码分析工具，如提供的`submit.html`文件，可以帮助我们更深入地理解和调试...

    js 验证表单 动态提示

    1. **事件监听**：在JavaScript中，我们可以利用事件监听来捕捉用户的输入行为，如`input`事件，当表单字段内容改变时触发；`blur`事件，当元素失去焦点时触发；以及`submit`事件，当表单被提交时触发。通过这些事件...

    Javascript鼠标事件汇总

    4. **`onSubmit`**：当表单提交时触发。 - **用途**：用于验证表单数据。 - **示例代码**： ```javascript document.getElementById('form').onsubmit = function(e) { if (!validateForm()) { e....

    JavaScript捕捉事件和阻止冒泡事件实例分析

    标题中提到的“JavaScript捕捉事件和阻止冒泡事件实例分析”，明确指出了本文将涉及两个关键的JavaScript事件处理机制：事件捕捉和阻止事件冒泡。在描述中，提到了冒泡原理和相关的操作技巧，这说明将通过对实例的...

    jQuery拖动设置时间段表单提交.zip

    在这个项目中，jQuery被用来监听拖动事件，动态更新时间段显示，并处理表单提交。 - 使用`$(document).ready()`函数确保页面加载完成后执行相关的JavaScript代码。 - `$(selector).on('event', function)`用于绑定...

    ajax验证表单

    在"ajax验证表单"中，可能使用了JavaScript事件监听器来捕捉用户的输入行为，如`onkeyup`或`onblur`事件。当用户在输入框中键入内容或离开输入框时，触发验证函数。 4. **Ajax调用**： 当用户输入满足触发验证的...

    JavaScript网页设计300例

    JavaScript通过事件监听和事件处理函数，可以捕捉并响应这些动作，实现交互效果。 4. **AJAX**：AJAX（异步JavaScript和XML）允许在不刷新整个页面的情况下，从服务器获取数据并更新部分网页。这对于创建动态、无...

    javascript实现自动填写表单实例简析

    例如，对于跨域请求，需要服务器端支持CORS（跨源资源共享），而对于表单验证，可能需要在JavaScript脚本中进行一些逻辑判断，或者使用事件监听来捕捉错误提示。 此外，需要注意的是，自动填写表单虽然能够提高用户...

    鼠标点击按钮弹出层可以写from表单登陆框弹出层

    表单可以包含`&lt;input&gt;`元素（例如`type="text"`和`type="password"`）和一个提交按钮`&lt;button&gt;`。 2. **CSS样式**：使用CSS将表单设置为隐藏（例如，通过`display:none`）。同时，定义弹出层的样式，包括位置、大小...

    使用JavaScript的电影座位预订应用程序.zip

    尽管项目标签为“java”，但考虑到标题中的“JavaScript”，这里可能是指应用使用了服务器端的Java技术，如Spring Boot或Node.js，来处理后端逻辑，如处理用户请求、连接数据库、验证和储存用户订单等。后端开发通常...

    Javascript实现登录记住用户名和密码功能

    - 使用*** MVC的HtmlHelper方法(@Html.AntiForgeryToken(), @Html.ValidationSummary()等)来构建表单，并且使用@using Html.BeginForm()来定义表单提交的控制器和动作。 - 表单内包含账号和密码输入框，以及一个复...

    一款html5带步骤提示的问卷表单提交实例.zip

    这款资源是一个基于HTML5技术构建的带有步骤提示的问卷表单提交实例，主要适用于前端开发。HTML5是超文本标记语言的最新版本，它引入了许多新的功能和改进，旨在提高用户体验和开发者的工作效率。这个实例可能包含了...

    javascript

    事件监听器可以捕捉用户与表单元素的交互，如onClick、onSubmit等。表单元素如input、select和textarea可以通过ID、name属性被JavaScript选择并操作。通过DOM（Document Object Model）接口，JavaScript可以创建、...

    javascript鼠标事件大全

    #### 表单提交与重置事件 这些事件主要用于处理表单的提交和重置行为。 1. **`onreset`**：当表单被重置时触发。 - 支持浏览器：IE4、Netscape 3、Opera 3。 2. **`onsubmit`**：当表单被提交时触发。 - 支持...

    layui插件表单验证提交触发提交的例子

    这里的`submit(*)`表示捕捉所有匹配`lay-filter`的表单提交事件。通过编写AJAX请求，我们可以实现异步提交表单数据。代码如下： ```javascript form.on('submit(*)', function(data){ $.ajax({ url: data.form....

    S2使用JavaScript增强交互效果 上机练习 操纵表格order.html

    `addEventListener('submit', function(event) {...})`可以监听表单提交事件，阻止默认行为并进行验证。 7. **AJAX异步请求**：如果需要从服务器获取或发送数据，可以使用AJAX（Asynchronous JavaScript and XML）...

    购物商城首页登录注册页面代码含部分JavaScript代码

    - JavaScript 代码负责页面的动态行为，如表单验证、按钮点击事件处理、数据提交等。例如，登录时可能会验证用户名和密码的输入，注册时检查邮箱格式，确保所有必填字段已填写。 4. **表单处理**： - 在登录和...

    javascript学习视频

    "javascript学习视频"这个资源，尤其是“妙味课堂原创JavaScript视频教程——事件详解3课资料”，旨在帮助学习者深入理解JavaScript中的事件处理机制，这对于创建交互式网页至关重要。 事件是JavaScript的核心特性...

Magicbox
Global site tag (gtag.js) - Google Analytics