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 d5fd7aea971a85678ba271703566ebfd, 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 23efcc05e98690ceeb219581933e4231, et un bouton utilisé pour soumettre un formulaire peut utiliser la balise 54b28e0e73a12e4a8ed487872a6fb5b8 Voici quelques contrôles de formulaire couramment utilisés et leurs types :

1. Zone de texte

b97cf5df8b28e4a76caaaadaf8e76d05

2. " name="mot de passe">

3. Case à cocher

080aa84ddd67e3439c119fb62ffcc860Natation

4. Bouton radio

e89762f38a95be6bdc928409c586efa5Male

5. Liste déroulante

cb5717696690b32b90435f5f68a1e8e1

1ce0228a93b5a6b254ce1df3c39bf506Beijingaa187436c3f950a1b498aa456a98a45e

aa0a9f38537fae184d8689c927ff3b02Shanghai4afa15d3069109ac30911f04c56f3338
df9b1a06c7c7872194b28a87d3374989Guangzhou4afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341

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