Detailed summary of web form submission methods

Detailed summary of web form submission methods

Let's first look at several ways to submit a form :
1. <!--General Submit Button-->
<input type="submit" value="Submit">
2. <!--Custom Submit Button-->
<button type="Submit">Submit</button>
3. <!--Image Button-->
<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:

var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
};
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function () {
//Get the event object
event = EventUtil.getEvent(event);
//Prevent default event
EventUtil.preventDefault(event);
});

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:

<script type="text/javascript">
function validateForm(){
if(document.reply.title.value == ""){ //Get the form by form name
alert("please input the title!");
document.reply.title.focus();
return false;
}
if(document.forms[0].cont.value == ""){ //Get form through the forms array
alert("please input the content!");
document.reply.cont.focus();
return false;
}
return true;
}
<form name="reply" method="post" onsubmit="return validateForm();">
<input type="text" name="title" size="80" />

<textarea name="cont" cols="80" rows="12"></textarea>

<input type="submit" value="Submit" >
</form>
Notice:
1. The onsubmit attribute must contain the return keyword, otherwise the function will be executed directly without returning.
2.validateForm must return a boolean return value
3. The submit button should be written as submit type

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:

<script type="text/javascript">
function modifyItem() {
if (trim(document.getElementById("itemName").value) == "") {
alert("Material name cannot be empty!");
document.getElementById("itemName").focus();
return;
}
with (document.getElementById("itemForm")) {
method = "post";
action = "item.do?command=modify&pageNo=${itemForm.pageNo}";
submit();
}
}
//return
function goBack() {
window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";
}
</script>
<form name="itemForm" id="itemForm">
<input name="itemNo" type="text" id="itemNo" value="${ item.itemNo }" >
<input name="itemName" type="text" id="itemName" value="${ item.itemName }" >
<input name="btnModify" type="button" id="btnModify" value="Modify" onclick="modifyItem()">
</form>
Notice:
1. When submitting, set the action and methods attributes of the form, and then submit using the form.submit() function.

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

Recommend

Detailed explanation of querying JSON format fields in MySQL

During the work development process, a requiremen...

How to collect Nginx logs using Filebeat

Nginx logs can be used to analyze user address lo...

Detailed explanation of semiotics in Html/CSS

Based on theories such as Saussure's philosop...

JavaScript using Ckeditor + Ckfinder file upload case detailed explanation

Table of contents 1. Preparation 2. Decompression...

7 interesting ways to achieve hidden elements in CSS

Preface The similarities and differences between ...

Tips for efficient use of CSS style sheets: Take full advantage of the power of style sheets

With the continuous development of the Internet ec...

An article to understand the execution process of MySQL query statements

Preface We need to retrieve certain data that mee...

Example code for implementing WeChat account splitting with Nodejs

The company's business scenario requires the ...

TCP socket SYN queue and Accept queue difference analysis

First we must understand that a TCP socket in the...

Detailed explanation of the role of static variables in MySQL

Detailed explanation of the role of static variab...

How to pass the value of the select drop-down box to the id to implement the code

The complete code is as follows : HTML code: Copy ...

Solution to the problem of Access denied for user'root'@'localhost' (using password: YES) in MySQL 8.0 login under win10

I started learning MySQL recently. The installati...

MySQL 5.7 installation-free configuration graphic tutorial

Mysql is a popular and easy-to-use database softw...

Usage and difference analysis of replace into and insert into on duplicate key update in MySQL

This article uses examples to illustrate the usag...

MySQL SHOW PROCESSLIST assists in the entire process of troubleshooting

1. SHOW PROCESSLIST command SHOW PROCESSLIST show...