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

Detailed explanation of the best configuration for Nginx to improve security and performance

The submit event of the form does not respond

Detailed explanation of the best configuration for Nginx to improve security and performance

Introduction and installation of MySQL Shell

How to automatically deploy Linux system using PXE

Complete steps to implement location punch-in using MySQL spatial functions

js array fill() filling method

Detailed explanation of the parsererror error case in JavaScript solution in ajax

Introduction to the visual expression of the core content of web pages (picture and text)

Simple implementation of mini-vue rendering

About the problem of no virtual network card after VMware installation

CentOS 8 officially released based on Red Hat Enterprise Linux 8

Recommend

20 JS abbreviation skills to improve work efficiency

Flash embedded in HTML Solution for embedding Flash files in HTML web page code (Part 1)

Service management of source package installation under Linux

Detailed explanation of JS variable storage deep copy and shallow copy

js to realize payment countdown and return to the home page

A complete tutorial on using axios encapsulation in vue

Simple example of using Docker container

Detailed explanation of the difference between in and exists in MySQL

Summarize several common ranking problems in MySQL

Detailed explanation of where the image pulled by docker is stored

Solution to the failure of loading dynamic library when Linux program is running

Two types of tab applications in web design

Install Python 3.6 on Linux and avoid pitfalls

Linux uses dual network card bond and screwdriver interface

Why is it not recommended to use index as the key attribute value in Vue?