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

A must-read career plan for web design practitioners

Original article, please indicate the author and ...

A simple LED digital clock implementation method in CSS3

This should be something that many people have do...

Mysql 5.6.37 winx64 installation dual version mysql notes

If MySQL version 5.0 already exists on the machin...

Book page turning effects made with CSS3

Result:Implementation code: html <!-- Please h...

How to change the character set encoding to UTF8 in MySQL 5.5/5.6 under Linux

1. Log in to MySQL and use SHOW VARIABLES LIKE &#...

HTML hyperlink a tag_Powernode Java Academy

Anyone who has studied or used HTML should be fam...

A brief analysis of the use of zero copy technology in Linux

This article discusses several major zero-copy te...

Linux uses Rsync+Inotify to achieve real-time synchronization of local and remote data

0x0 Test Environment The headquarters production ...

Detailed Analysis of Event Bubbling Mechanism in JavaScript

What is bubbling? There are three stages in DOM e...

Share some uncommon but useful JS techniques

Preface Programming languages ​​usually contain v...

About the "occupational disease" of designers

I always feel that designers are the most sensiti...

Detailed View of Hidden Columns in MySQL

Table of contents 1. Primary key exists 2. No pri...

Detailed tutorial on installing Docker and docker-compose suite on Windows

Table of contents Introduction Download and insta...

Let's talk in detail about whether setState in React is a macro task or a micro task

Table of contents Preface Is the interviewer aski...

Detailed explanation of how to pass values ​​between react hooks components (using ts)

Table of contents From father to son From son to ...