Detailed summary of web form submission methods

Let's first look at several ways to submit a form :
1. 
<input type="submit" value="Submit">
2. 
<button type="Submit">Submit</button>
3. 
<input type="image" src = "btn.png">
Description: When the user clicks a button or image button, the form is submitted. A submit button can be defined using either <input> or <button> by setting its attribute value to "submit", while an image button is defined by setting the type attribute value of <input> to "image". So, as long as we click the button generated by the code, we can submit the form.
4. Prevent form submission: As long as any of the buttons listed above exists in the form, when the corresponding form control has focus, pressing the Enter key can submit the form. If there is no Submit button in the form, pressing the Enter key will not submit the form.
When you submit a form in this way, the browser fires the submit event before sending the request to the server. This gives us the opportunity to validate the form data and decide whether to allow the form submission. Preventing the default behavior of this event will cancel the form submission. For example, the following code will prevent the form from being submitted:

Copy code

The code is as follows:

Calling the preventDefault() method prevents the form from being submitted. Generally, this technique is used when the form data is invalid and cannot be sent to the server.
5. In JavaScript, you can also submit a form by calling the submit() method programmatically.
This method does not require the form to contain a submit button, and the form can be submitted normally at any time. Let’s look at an example:
var form = document.getElementById("myForm");
//Submit the form
form.submit();
When a form is submitted by calling the submit() method, the submit event is not triggered, so remember to validate the form data before calling this method.
The biggest problem that can occur when submitting a form is submitting it repeatedly. Users may become impatient if there is no response for a long time after submitting the form for the first time. At this point, they may click the Submit button repeatedly. The result is often trouble (because the server has to handle duplicate requests) or errors (if an order is placed, several extra copies may be ordered).
There are two ways to solve this problem :
Disable the submit button after the form is submitted for the first time;
Use the onsubmit event handler to cancel subsequent form submission operations.
Next, we will introduce several methods of submitting through the form in detail .<br />Method 1: Use the onsubmit() function of the form (often used), the code is as follows:

Copy code

The code is as follows:

Method 2: Use the onclick() function of the input type submit component to remove the onsubmit="return validateForm()" attribute in the form tag above.
Add an onclick event to the "Submit" button as follows:
<input type="submit" value="Submit" onclick="return validateForm();">
Method 3: Use the onclick() function of the button component to submit manually. The code is as follows:

Copy code

The code is as follows:

The specific implementation of the above code can be referred to as follows:
http://www.bjp111.com/zhshlist.aspx
http://www.bjp111.com/huixiaolist.aspx
http://www.bjp111.com/daililist.aspx
Novice summary :
When validating components in a form, the first two use the name attribute, including the form itself.
If there is no response when submitting the form, and you are sure that there is no problem with the code for submitting the form, please check the js code before submitting the form. Sometimes errors in the previous js code will cause inexplicable problems.

<<: Several specific methods of Mysql space cleaning

>>: How to receive binary file stream in Vue to realize PDF preview