The submit event of the form does not respond

1. Problem description <br />When JS is used to call the submit method of the form to submit the form directly, the submit event does not respond. Why? Please reply if you know. By analogy, I used input.select() to test, but it was able to respond to the select event. Let’s put this reason aside for now and see how to solve the current problem first.
Code example 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 be issued.
Although using the submit method to submit a form violates the principle of Unobtrustive Javascript, it is sometimes necessary to use it, such as using JS to submit the search form after selecting an item in a search prompt (auto-complete).
2. Problem Analysis <br />Since it does not respond to events, the only way is to trigger these events manually. Before determining the manual triggering solution, let's review the event registration method:
There are two "original" registration methods, see the code examples:
<form id="form1" action="https://www.jb51.net" onsubmit="alert(1)"></form><form id="form1" action="https://www.jb51.net"></form>
<script type="text/javascript">
document.getElementById('form1').onsubmit = function() {
alert(1);
}
</script>
Such a registration event will add a method onsubmit to the form. Therefore, by directly executing this method, it is equivalent to manually triggering the event.
See the code example:
<script type="text/javascript">
form.onsubmit();
</script>
This will get an alert.
However, the "advanced" DOM2 standard registration method and IE's registration method attachEvent are already very commonly used. For these registration methods, the onsubmit method does not exist. If form.onsubmit() is used, an error will be reported directly.
3. Solution <br />Of course, the "advanced" registration method itself also provides a solution for manually triggering events, but different programs need to be written for DOM2 standards and IE. In addition, this program is also effective for the "original" registration method. 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 summary <br />We will not explain the detailed methods here. Friends who are not familiar with it, please refer to the relevant information on your own. Let's string together the entire code:
<!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.jb51.net"></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 in the whole process. Under FX, form.submit() is not needed. The form is submitted directly, so this sentence is omitted. If you know the reason, please reply.
This demo has been tested in IE6/IE7/FX.

<<: Use nexus as a private library to proxy docker to upload and download images

>>: Let's talk about bitwise operations in React source code in detail

How to make ApacheBench support multi-url

The submit event of the form does not respond

How to make ApacheBench support multi-url

Solve the problem of docker images disappearing

js canvas realizes rounded corners picture

How to deploy multiple Vue projects under the same domain name using nginx and use reverse proxy

mysql5.7.18 decompressed version to start mysql service

Summary of common functions of PostgreSQL regular expressions

iview implements dynamic form and custom verification time period overlap

Best Practices for Implementing Simple Jira Projects with React+TS

Solution to the impact of empty paths on page performance

Example of implementing load balancing with Nginx+SpringBoot

Recommend

Detailed explanation of mysql partition function and example analysis

MySql sets the specified user database view query permissions

MySQL 8.0.18 stable version released! Hash Join is here as expected

Solve the installation problem of mysql8.0.19 winx64 version

Detailed tutorial on installing MySQL database in Linux environment

HTML table markup tutorial (40): Dark border color attribute of the header BORDERCOLORDARK

Nginx implements high availability cluster construction (Keepalived+Haproxy+Nginx)

How to find and delete duplicate records in MySQL

Essential tools for web design: Firefox Web Developer plugin CSS tool set tutorial

MySQL performance optimization tips

Solution to the problem that MySQL service cannot be stopped or deleted under Windows

Detailed tutorial on installing Docker on CentOS 8.4

MySQL master-slave synchronization, implementation principle of transaction rollback

Detailed explanation of building Nginx website server based on centos7 (including configuration of virtual web host)

Detailed explanation of how to use the calendar plugin implemented in Vue.js