Comment soumettre un formulaire en utilisant JavaScript

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

//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;

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

4. Vérifier les données du formulaire

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

return false / /Annuler la soumission

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

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!