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 events and methods to 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.
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.
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>
</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>
</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¶
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.
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.
The method form.submit() is useful for launching the form to send from JavaScript.
It can be efficiently used to create and send its own forms to the server.
0 Comments
CAN FEEDBACK
Emoji