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

JavaScript to achieve simple drag effect

The submit event of the form does not respond

JavaScript to achieve simple drag effect

Detailed tutorial on installing Docker and docker-compose suite on Windows

CSS clicks on the radio to switch between two image styles and only one of the multiple radios can be checked

MySQL full-text search Chinese solution and example code

How to add a column to a large MySQL table

CSS implements Google Material Design text input box style (recommended)

MySQL variable principles and application examples

Learn about CSS label display mode in one article

8 essential JavaScript code snippets for your project

Solve the problem of changing the password when logging in for the first time after installing MySQL 8.0

Recommend

Elementui exports data to xlsx and excel tables

Background image cache under IE6

Design: A willful designer

Learn to deploy microservices with docker in ten minutes

Express implements login verification

Graphic tutorial for installing MySQL 5.6.35 on Windows 10 64-bit

The specific use and difference between attribute and property in Vue

Solution for Tomcat to place configuration files externally

Zen Coding Easy and fast HTML writing

Solve the problem of MySql client exiting in seconds (my.ini not found)

Examples of using && and || operators in javascript

The difference between MySQL count(1), count(*), and count(field)

How to deploy egg applications on self-built Windows servers (with pictures and text)

Learn about CSS label display mode in one article

Summary of various ways to create objects in js and their advantages and disadvantages