Comment soumettre un formulaire en utilisant JavaScript

Dans le développement Web, un formulaire est un élément commun qui permet aux utilisateurs de soumettre des données à un serveur Web. Lorsque l'utilisateur saisit des données dans le formulaire et clique sur le bouton Soumettre, le formulaire envoie une demande au serveur, et le serveur traite la demande et répond avec le résultat. Dans ce processus, JavaScript peut être utilisé pour écouter l'événement de soumission du formulaire afin que les données du formulaire puissent être traitées et vérifiées sans actualiser la page. Dans cet article, nous verrons comment soumettre un formulaire à l'aide de JavaScript.

1. Contrôles de formulaire

Avant d'utiliser JavaScript pour soumettre un formulaire, nous devons d'abord comprendre certaines connaissances sur les contrôles de formulaire HTML. Les contrôles de formulaire incluent des zones de saisie, des listes déroulantes, des boutons radio, des cases à cocher, etc. En HTML, ces contrôles sont définis avec des balises , et chaque balise possède un attribut type pour indiquer son type. Par exemple, une zone de saisie utilisée pour saisir du texte peut utiliser la balise , et un bouton utilisé pour soumettre un formulaire peut utiliser la balise Voici quelques contrôles de formulaire couramment utilisés et leurs types :

1. Zone de texte

2. " name="mot de passe">

3. Case à cocher

Natation

4. Bouton radio

Male

5. Liste déroulante

Beijing

Shanghai
Guangzhou


2. Surveiller les événements de soumission de formulaire

Pour traiter les données du formulaire en JavaScript, nous devons d'abord écouter l'événement de soumission du formulaire. En HTML, l'événement de soumission du formulaire est défini par la balise

et vous pouvez utiliser la méthode addEventListener() de JavaScript pour l'écouter. Par exemple, le code suivant écoutera les événements lorsque vous cliquerez sur le bouton de soumission :

var btnSubmit = document.getElementById("btnSubmit");

btnSubmit.addEventListener("click", function(event) {

//Formulaire de processus data
event .preventDefault(); //Désactiver le comportement de soumission par défaut
});

Dans cet exemple, nous obtenons d'abord l'élément du bouton de soumission via la méthode getElementById(), et appelons la méthode addEventListener() pour écouter son événement de clic. Dans la fonction de gestionnaire d'événements, nous pouvons obtenir les données du formulaire et les traiter. Enfin, afin d'éviter que le comportement de soumission par défaut du formulaire ne se produise, nous appelons la méthode event.preventDefault() pour l'annuler.

3. Obtenir les données du formulaire

Après avoir écouté l'événement de soumission du formulaire, nous devons obtenir les données du formulaire pour le traitement. En JavaScript, vous pouvez utiliser la collection document.forms[] pour obtenir des éléments de formulaire. Par exemple, le code suivant obtiendra les éléments de la zone de saisie représentant le nom d'utilisateur et le mot de passe :

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

var txtPassword = document.forms[0].password; , nous utilisons document.forms[0] pour obtenir l'élément de formulaire de la première balise , puis obtenons les éléments des zones de saisie du nom d'utilisateur et du mot de passe via l'attribut name.

Une autre façon d'obtenir des données de formulaire consiste à utiliser un objet FormData. FormData est une nouvelle API qui peut être utilisée pour créer des données de formulaire et les envoyer au serveur. Par exemple, le code suivant utilisera un objet FormData pour transmettre les informations utilisateur :

var formData = new FormData();

formData.append("username", txtUsername.value); .value);

Dans cet exemple, nous créons d'abord un nouvel objet FormData, puis utilisons la méthode append() pour ajouter des données de formulaire à l'objet FormData. Enfin, transmettez l'objet FormData à la méthode send() de l'objet XMLHttpRequest pour envoyer les données du formulaire au serveur.

4. Vérifier les données du formulaire

Avant de soumettre le formulaire, nous devons vérifier les données du formulaire. Par exemple, nous pouvons vérifier si le nom d'utilisateur et le mot de passe sont vides :

if(txtUsername.value == "") {

alert("Veuillez entrer le nom d'utilisateur");

txtUsername.focus();

return false / /Annuler la soumission

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

alert("Veuillez entrer votre mot de passe");
txtPassword.focus();
return false; //Annuler la soumission
} else {
// Soumettre le formulaire
return true;
}

Dans cet exemple, nous vérifions d'abord si la zone de saisie du nom d'utilisateur est vide. Si elle est vide, une boîte de dialogue apparaîtra et le curseur sera déplacé vers la zone de saisie du nom d'utilisateur. Si le nom d'utilisateur n'est pas vide, nous continuons à vérifier si la zone de saisie du mot de passe est vide. Si le mot de passe n'est pas vide, nous autorisons la soumission du formulaire.

5. Exemple de code JavaScript complet

Maintenant, nous avons appris comment soumettre un formulaire en utilisant JavaScript. Voici un exemple de code JavaScript complet qui écoutera l'événement de soumission du formulaire, obtiendra les données du formulaire, validera les données et l'enverra au serveur :

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();

}
});

dans ce Dans l'exemple, nous obtenons d'abord l'élément représentant le formulaire de connexion via la méthode getElementById() et appelons la méthode addEventListener() pour écouter son événement de soumission. Dans la fonction de gestion des événements, nous obtenons les éléments de la zone de saisie du nom d'utilisateur et du mot de passe et portons un jugement si les exigences ne sont pas remplies, une boîte de dialogue apparaîtra et le comportement de soumission par défaut du formulaire sera annulé. Si ni le nom d'utilisateur ni le mot de passe ne sont vides, un objet FormData est créé et les données y sont ajoutées. Enfin, utilisez l'objet XMLHttpRequest pour envoyer l'objet FormData au serveur et affichez le résultat de la réponse dans la zone d'invite.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!