一、问题描述
当用JS调用form的方法submit直接提交form的时候，submit事件不响应。为什么？知道的请回复。类比一下，我用input.select()做了测试，却能响应select事件。这个原因先放一边，我们看看先怎么把眼下的问题解决了。
不响应事件的代码示例：
<form id="form1" action="http://www.koubei.com"></form>
<script type="text/javascript">
var form = document.getElementById('form1');
form.onsubmit = function() {
alert(1);
};
form.submit();
</script>实际运行，不会有alert出来。
虽然用submit方法来提交表单有违Unobtrustive Javascript的原则，但有时候不得不用，比如做搜索提示（auto-complete)选中Item之后就需要用JS来提交搜索表单。
二、问题分析
既然本身不响应事件，那只有手工触发这些事件了，确定手工触发方案之前先回顾一下事件的注册方式：
“原始”的注册方式有两种，看代码示例：
<form id="form1" action="http://www.koubei.com" onsubmit="alert(1)"></form><form id="form1" action="http://www.koubei.com"></form>
<script type="text/javascript">
document.getElementById('form1').onsubmit = function() {
alert(1);
}
</script>这样的注册事件，会给form增加了一个方法onsubmit。所以，可以通过直接执行这个方法，等同于手工触发了事件。
看代码示例：
<script type="text/javascript">
form.onsubmit();
</script>这样可以得到一个alert。
但是在如今“先进”的DOM2标准注册方式以及IE的注册方式attachEvent已经很常用。这些注册方式，onsubmit方法是不存在的，如果使用form.onsubmit()会直接报错。
三、解决方案
当然“先进”的注册方式本身也提供了手工触发事件的解决方案，只是要针对DOM2标准和IE写不同的程序，另外这个程序，对“原始”的注册方式也一样有效。请看代码示例：
<script type="text/javascript">
//IE fire event
if (form.fireEvent) {
form.fireEvent('onsubmit');
form.submit();
//DOM2 fire event
} else if (document.createEvent) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('submit', false, true);
form.dispatchEvent(ev);
}
</script>四、代码总结
这里不再对各细节方法做说明，不熟悉的朋友请自行查阅相关资料。我们把整个代码串起来：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>submit</title>
<script type="text/javascript" src="http://k.kbcdn.com/js/yui/build/utilities/utilities.js"></script>
</head>
<body>
<form id="form1" action="http://www.koubei.com"></form>
<script type="text/javascript">
var form = document.getElementById('form1');
//YUI register event
YAHOO.util.Event.on('form1', 'submit', function() {
alert('yui');
});
//DOM0 register event
form.onsubmit = function() {
alert(1);
};
//DOM2 register event
if (form.addEventListener) {
form.addEventListener('submit', function() {
alert(2);
}, false);
//IE register event
} else if (form.attachEvent) {
form.attachEvent('onsubmit', function() {
alert(2);
});
}
//IE fire event
if (form.fireEvent) {
form.fireEvent('onsubmit');
form.submit();
//DOM2 fire event
} else if (document.createEvent) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('submit', false, true);
form.dispatchEvent(ev);
}
</script>
</body>
</html>整个跑下来有个小问题，FX下，不需要form.submit()，直接把表单给提交出去了，所以这句也省掉了，原因知道的请回复。
这个demo在IE6/IE7/FX下测试通过。
分享到：
相关推荐
submit表单提交，onsubmit验证拦截 免去了用button按钮click点击事件ajax请求
当用JS调用form的方法submit直接提交form的时候，submit事件不响应。为什么？知道的请回复。类比一下，我用input.select()做了测试，却能响应select事件。这个原因先放一边，我们看看先怎么把眼下的问题解决了。不...
在网页开发中，表单（Form）是用户与服务器交互的重要工具，而`submit`方法和`onsubmit`事件则是表单控制的核心部分。本文将深入探讨这两个概念及其在实际应用中的注意事项。 首先，`submit()`方法是HTML表单元素的...
在网页设计中，表单（Form）是收集用户输入数据的重要工具，而Submit按钮则是将这些数据发送到服务器的关键组件。通常，一个表单只有一个Submit按钮，但有时根据设计需求，我们可能需要在同一个表单中添加多个Submit...
当直接使用JavaScript中的`form.submit()`方法提交表单时，`submit`事件并不会被触发。这与`input.select()`能够触发`select`事件的行为形成对比。此问题违反了非侵入式JavaScript（Unobtrusive Javascript）的编程...
本文实例讲述了JS定义网页表单提交（submit）的方法。分享给大家供大家参考。具体如下： 这段代码表示网页表单提交时不是提交到指定的页面，而是执行一个特定的函数 [removed] function saveInfo() { localStorage...
### 页面提交submit的几种方法 在网页开发过程中，表单数据的提交是非常常见的操作之一，而如何有效地实现页面提交则是前端开发人员需要掌握的重要技能。本文将详细介绍几种页面提交的方法，帮助开发者更好地理解和...
`onsubmit`事件会在用户点击表单内的提交按钮（`<input type="submit">`）或者通过JavaScript调用`form.submit()`时触发。需要注意的是，如果表单提交是通过一个普通按钮（`<input type="button">`）的`onclick`...
如果不需要这些坐标，可以在`onsubmit`事件中阻止默认行为，防止表单被自动提交两次。 2. **JavaScript处理**： 可以使用JavaScript来监听用户的点击事件，并在合适的时候提交表单。为了避免双重提交，我们需要...
通过form.on("submit(formConfig)",function(data){...})的调用，开发者可以指定当具有特定lay-filter属性的表单触发提交事件时，执行相应的函数。在这个函数内部，返回false可以阻止表单的提交，即阻止表单数据被...
这种方式是在form标签上设置onsubmit事件处理函数。 ```html function check() { var form = document.forms[0]; if (form.userId.value == '') { alert("请输入用户帐号!"); form.userId.focus(); return ...
第一：action是form的属性，html5已经将其定义为必需的属性值，onSubmit为事件，通过<input type=submit />提交时进行一个函数验证。。 第二：要说执行的先后顺序，个人理解是onSubmit在先，先验证，验证返回...
在`<form>`标签中添加`onsubmit`事件，当表单提交时，将submit按钮置为禁用状态，从而防止用户再次点击提交。 2. **使用Token机制**：在每次表单提交前，服务器会生成一个唯一的Token，并将其发送到客户端。客户端...
在这个示例中，`submitForm`函数会在表单数据验证通过后调用`submit`方法，从而实现异步提交或者其他自定义操作。而`validateForm`函数用于检查表单数据的有效性。 总之，当遇到使用`submit`方法无法提交表单的问题...
使用JavaScript中的form元素的submit方法进行提交时，JavaScript会立即处理提交操作，而不会触发表单元素上的onsubmit事件处理器。这意味着如果表单上有onsubmit事件处理器用于进行数据验证或执行其他操作，开发者...
你还可以监听表单的提交事件，例如，添加`onSubmit`回调函数来处理表单提交后的逻辑。 8. **表单重定向** 在处理完表单数据后，可以通过`redirect()`方法指定用户应被重定向到哪个URL。 9. **可排序列** 如果...
另外，JQuery的`submit([[data],fn])`方法添加的事件可以被`$().submit()`触发，这意味着你可以使用`submit()`方法既注册事件处理程序，又手动触发事件： ```javascript var form = $('form:first'); form.submit...
document.form1.submit(); } function delete() { document.form1.action = "delete.jsp"; document.form1.submit(); } <form name="form1" action=""> 修 改" onclick="modify()"> 删 除" onclick="delete...
在本主题中，我们将深入探讨JavaScript中的事件、字符串长度控制以及如何对Form表单进行提交控制。 首先，我们来讨论JavaScript事件。事件是用户与网页进行交互时产生的动作，比如点击按钮、滚动页面或填写表单。...