The submit event of the form does not respond

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

Recommend

React implements the sample code of Radio component

This article aims to use the clearest structure t...

Apache Calcite code for dialect conversion

definition Calcite can unify Sql by parsing Sql i...

JavaScript object built-in objects, value types and reference types explained

Table of contents Object Object Definition Iterat...

JavaScript Basics: Immediate Execution Function

Table of contents Immediately execute function fo...

Troubleshooting and solutions for MySQL auto-increment ID oversize problem

introduction Xiao A was writing code, and DBA Xia...

How to implement Echats chart large screen adaptation

Table of contents describe accomplish The project...

Detailed explanation of Vue's monitoring properties

Table of contents Vue monitor properties What is ...

Web Design: Web Music Implementation Techniques

<br />When inserting music into a web page, ...

Five solutions to cross-browser problems (summary)

Brief review: Browser compatibility issues are of...

Migrate virtual machines between VMware Workstation and vSphere (picture and text)

1. Change the virtual machine hardware version in...

MySQL index principle and query optimization detailed explanation

Table of contents 1. Introduction 1. What is an i...

MySQL 5.6.22 installation and configuration method graphic tutorial

This tutorial shares the specific code of MySQL5....

Detailed explanation of the implementation of WeChat applet track playback and the pitfalls encountered

WeChat applet trajectory playback mainly uses pol...

HTML page common style (recommended)

As shown below: XML/HTML CodeCopy content to clip...

MySQL code execution structure example analysis [sequence, branch, loop structure]

This article uses an example to describe the MySQ...