How to submit a form using JavaScript

In web development, a form is a common element that allows users to submit data to the web server. When the user enters data into the form and clicks the submit button, the form sends a request to the server, and the server processes the request and responds with the result. In this process, JavaScript can be used to listen to the form submission event so that the form data can be processed and verified without refreshing the page. In this article, we'll cover how to submit a form using JavaScript.

1. Form controls

Before using JavaScript to submit a form, we first need to understand some knowledge about HTML form controls. Form controls include input boxes, drop-down boxes, radio buttons, check boxes, etc. In HTML, these controls are defined with d5fd7aea971a85678ba271703566ebfd tags, and each tag has a type attribute to indicate its type. For example, an input box used to enter text can use the 23efcc05e98690ceeb219581933e4231 tag, and a button used to submit a form can use the 54b28e0e73a12e4a8ed487872a6fb5b8 tag. The following are some commonly used form controls and their types:

1. Text box

b97cf5df8b28e4a76caaaadaf8e76d05

2. Password box

941744aa44fdd721c0b67eb5ad94b319

3. Checkbox

ab268299b5e7674ec0bc5b840c827437Swimming

4. Radio button

cb136f4facccb7e48fa76e34d3c08152Male

5. Drop-down box

27635b6fcc057cb18cd9e06a4cbf5a69
1ce0228a93b5a6b254ce1df3c39bf506Beijing4afa15d3069109ac30911f04c56f3338
aa0a9f38537fae184d8689c927ff3b02Shanghai4afa15d3069109ac30911f04c56f3338
df9b1a06c7c7872194b28a87d3374989Guangzhou4afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341

2. Monitoring Form Submit event

To process form data in JavaScript, we need to listen to the form's submit event first. In HTML, the form submission event is defined by the ff9c23ada1bcecdd1a0fb5d5a0f18437 tag, and you can use JavaScript's addEventListener() method to listen to it. For example, the following code will listen for events when the submit button is clicked:

var btnSubmit = document.getElementById("btnSubmit");
btnSubmit.addEventListener("click", function(event) {
//Process form data
event.preventDefault(); //Prohibit default submission behavior
});

In this example, we first obtain the element of the submit button through the getElementById() method , and call the addEventListener() method to listen for its click event. In the event handler function, we can obtain the form data and process it. Finally, in order to prevent the form's default submission behavior from occurring, we call the event.preventDefault() method to cancel it.

3. Obtain form data

After listening to the form submission event, we need to obtain the form data for processing. In JavaScript, you can use the document.forms[] collection to get form elements. For example, the following code will obtain the input box elements representing the username and password:

var txtUsername = document.forms[0].username;
var txtPassword = document.forms[0].password;

In this example, we use document.forms[0] to get the form element of the first ff9c23ada1bcecdd1a0fb5d5a0f18437 tag, and then get the elements of the username and password input box through the name attribute.

Another way to obtain form data is to use the FormData object. FormData is a new API that can be used to build form data and send it to the server. For example, the following code will use a FormData object to pass user information:

var formData = new FormData();
formData.append("username", txtUsername.value);
formData.append(" password", txtPassword.value);

In this example, we first create a new FormData object, and then use the append() method to add form data to the FormData object. Finally, pass the FormData object to the send() method of the XMLHttpRequest object to send the form data to the server.

4. Verify form data

Before submitting the form, we need to verify the form data. For example, we can check if the username and password are empty:

if(txtUsername.value == "") {
alert("Please enter the username");
txtUsername.focus() ;
return false; //Cancel submission
} else if(txtPassword.value == "") {
alert("Please enter your password");
txtPassword.focus();
return false; //Cancel submission
} else {
//Submit form
return true;
}

In this example, we first check whether the username input box Is empty, if it is empty, a prompt box will pop up and the cursor will be moved to the user name input box. If the username is not empty, we continue to check whether the password input box is empty. If the password is not empty, we allow form submission.

5. Complete JavaScript code example

Now, we have learned how to use JavaScript to submit a form. Here is a complete JavaScript code example that will listen for the form's submit event, get the form data, validate the data, and send it to the server:

var frmLogin = document.getElementById("frmLogin");
frmLogin.addEventListener("submit", function(event) {
var txtUsername = document.forms[0].username;
var txtPassword = document.forms[0].password;

if(txtUsername.value == "") {

alert("请输入用户名");
txtUsername.focus();
event.preventDefault();

} else if(txtPassword.value == "") {

alert("请输入密码");
txtPassword.focus();
event.preventDefault();

} else {

var formData = new FormData();
formData.append("username", txtUsername.value);
formData.append("password", txtPassword.value);

var xhr = new XMLHttpRequest();
xhr.open("POST", "login.php", true);
xhr.onload = function() {
  if(xhr.status == 200) {
    alert(xhr.responseText);
  } else {
    alert("请求失败：" + xhr.status);
  }
};
xhr.send(formData);

event.preventDefault();

}
});

In this example, we first get the element representing the login form through the getElementById() method and call addEventListener () method to listen for its submission event. In the event handling function, we obtain the input box elements of the user name and password and make a judgment. If the requirements are not met, a prompt box will pop up and the default submission behavior of the form will be cancelled. If neither username nor password is empty, a FormData object is created and the data is added to it. Finally, use the XMLHttpRequest object to send the FormData object to the server, and display the response result in the prompt box.

The above is the detailed content of How to submit a form using JavaScript. For more information, please follow other related articles on the PHP Chinese website!