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 tags, and each tag has a type attribute to indicate its type. For example, an input box used to enter text can use the tag, and a button used to submit a form can use the tag. The following are some commonly used form controls and their types:

1. Text box

2. Password box

3. Checkbox

Swimming

4. Radio button

Male

5. Drop-down box

Beijing
Shanghai
Guangzhou

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

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 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!