When the form method submitted directly by calling JS, the submit event does not respond. Why? If you know, please reply. For an analogy, I used input.select() to test it, but it was able to respond to the select event. Let’s put this reason aside, let’s see how to solve the current problem first.
Example of code that does not respond to events:
<form id=form1 action=http://www.jb51com></form>
<script type=text/javascript>
var form = document.getElementById('form1');
form.onsubmit = function() {
alert(1);
};
form.submit();
</script>
In actual operation, no alert will come out.
Although using the submit method to submit a form violates the principle of Unobtrusive Javascript, sometimes you have to use it. For example, after selecting Item, you need to use JS to submit the search form.
2. Problem analysisSince the event itself does not respond to, it is only possible to trigger these events manually. Before determining the manual triggering plan, let’s review the registration method of the event:
There are two original registration methods, see the code example:
<form id=form1 action=https://www.VeVb.com onsubmit=alert(1)></form><form id=form1 action=https://www.VeVb.com></form>
<script type=text/javascript>
document.getElementById('form1').onsubmit = function() {
alert(1);
}
</script>
Such registration event will add a method onsubmit to form. Therefore, it is possible to directly execute this method, which is equivalent to manually triggering the event.
See the code example:
<script type=text/javascript>
form.onsubmit();
</script>
This gives you an alert.
However, the advanced DOM2 standard registration method and IE registration method attachEvent are already very commonly used. The onsubmit method does not exist in these registration methods. If form.onsubmit() is used, an error will be reported directly.
3. SolutionOf course, the advanced registration method itself also provides a solution to manually trigger events, but it only needs to write different programs for the DOM2 standard and IE. In addition, this program is also effective for the original registration method. Please see the code example:
<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>
4. Code summaryI will no longer explain the details here. Friends who are not familiar with it, please check the relevant information by yourself. Let's string the whole code together:
<!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=https://www.VeVb.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>
There is a small problem with the whole run. Under FX, form.submit() is not needed. I directly submitted the form, so this sentence is also saved. Please reply if you know the reason.
This demo was tested under IE6/IE7/FX.