Forms event and method submit
JavaScript Forms: event and method submit
As we already know, forms are an extremely significant part of HTML, JavaScript, and of course, Web Platform. The reason is that it enables the user interaction with the page: it helps the user to search anything on the site, trigger filters or send information.
This chapter is dedicated to the research of event and method submit in JavaScript. The submit event occurs when the form is submitted. As a rule, it is used for validating the form before sending it to the server or for canceling the submission and processing it in JavaScript. （本章专门研究在JavaScript中提交的事件和方法。 提交表单时发生提交事件。 通常，它用于在发送到服务器之前验证表单，或用于取消提交并在JavaScript中处理表单。）
The method form.submit() helps to launch form sending from JavaScript. You can easily use it for creating and sending your own forms to the server. Let’s explore that in detail. （Form.submit ()方法有助于启动从JavaScript发送的表单。 您可以轻松地使用它来创建自己的表单并将其发送到服务器。 让我们详细探讨一下。）
Event: submit
Event: submit
Two primary ways of submitting a form exist:
Clicking either <input type=“submit”> or <input type=“image”>. Pressing Enter on an input field.
Both of the actions above leads to submit an event on the form. The handler is capable of checking the data. In case there are errors, it will show them and call event.preventDefault(). Then, the form will not be sent to the server. In the example below, both of the actions show an alert, and due to the return false, the form isn’t sent anywhere:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<form onsubmit="alert('Submit!');return false">
Enter in the input field:
<input type="text" value="text">
<br> Click "Submit":
<input type="submit" value="Submit">
</form>
</body>
</html>
So, in this case, it is necessary to go into the text field and press Enter, then click <input type=“submit”>.
Relation between Submit and Click
At the time a form is sent inserting Enter on an input field, a click event occurs on the <input type=“submit”>.
This situation can look a little funny, as no click was performed at all. （这种情况看起来有点滑稽，因为根本没有点击。）
It is illustrated in the demo below:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<form onsubmit="return false">
<input type="text" size="40" value="Write here and press enter">
<input type="submit" value="Submit" onclick="alert('Clicked!')">
</form>
</body>
</html>
Method: submit
Method: submit
You can call form.submit() for submitting a form manually. But, then the submit event may not be created. It is supposed that if the developer calls form.submit() then the script has already done all the processing related to it. （您可以调用form.submit ()手动提交表单。但是，则可能不会创建提交事件。假设开发人员调用form.submit () ，则脚本已经完成了与其相关的所有处理。）
So, sometimes it is necessary to manually create and send a form, as follows:
let form = document.createElement('form');
form.action = 'https://www.w3cdoc.com/';
form.method = 'GET';
form.innerHTML = '<input name="q" value="test">';
// the form must be in the document for submitting it
document.body.append(form);
form.submit();
Summary
Summary （概要）
To summarize the chapter, let’s note that the event and method submit relate to the most important parts of a programmer’s daily routine. （总结本章，让我们注意到提交的事件和方法与程序员日常工作中最重要的部分有关。）
In brief, the submit event triggers when the form is already submitted. Normally, developers use it to validate the form before sending it to the server or to cancel the submission and process it in JavaScript. （简而言之，提交事件在表单已提交时触发。通常，开发人员在发送到服务器之前使用它来验证表单，或者取消提交并在JavaScript中处理它。）
The method form.submit() is useful for launching the form to send from JavaScript. （Form.submit ()方法对于启动要从JavaScript发送的表单非常有用。）
It can be efficiently used to create and send own forms to the server. （它可以有效地用于创建自己的表单并将其发送到服务器。）