La manipulation des formulaires Javascript est une tâche fréquente lors du développement web. JavaScript offre des fonctionnalités puissantes pour récupérer les valeurs saisies par l’utilisateur dans un formulaire HTML. Dans ce guide, nous explorerons différentes méthodes pour récupérer ces valeurs à l’aide de JavaScript.
Dans cette méthode, nous accédons directement aux éléments du formulaire en utilisant leur identifiant (ID) ou leur nom (Name) pour récupérer les valeurs. Voici un exemple :
<form id="monFormulaire">
<input type="text" name="nom" />
<input type="email" name="email" />
<button >
querySelector
La méthode querySelector
permet de sélectionner des éléments HTML en utilisant des sélecteurs CSS. Cela offre une manière plus flexible de récupérer les valeurs du formulaire. Voici un exemple :
<form id="monFormulaire">
<input type="text" name="nom" />
<input type="email" name="email" />
<button >
Une approche courante est d’utiliser l’événement onSubmit
du formulaire pour récupérer les valeurs avant la soumission. Voici comment cela peut être fait :
<form id="monFormulaire" onsubmit="return recupererValeurs()">
<input type="text" name="nom" />
<input type="email" name="email" />
<button type="submit">Soumettre</button>
</form>
<script>
function recupererValeurs() {
var nom = document.getElementById("monFormulaire").elements["nom"].value;
var email = document.getElementById("monFormulaire").elements["email"].value;
console.log("Nom: " + nom);
console.log("Email: " + email);
return false; // Pour éviter la soumission du formulaire
}
</script>
Voici les exemples réécrits avec des sous-titres pour une meilleure organisation :
HTML :
<form id="monFormulaire">
<input type="text" id="nom" name="nom" placeholder="Votre nom">
<input type="email" id="email" name="email" placeholder="Votre email">
<button type="button" >
JavaScript :
function recupererValeurs() {
// Récupérer les éléments du formulaire par leur ID
var nom = document.getElementById("nom").value;
var email = document.getElementById("email").value;
// Afficher les valeurs récupérées
console.log("Nom :", nom);
console.log("Email :", email);
// Vous pouvez maintenant utiliser ces valeurs comme vous le souhaitez
// Par exemple, les envoyer à un serveur via une requête AJAX
}
HTML :
<form id="monFormulaire">
<input type="text" id="prenom" name="prenom" placeholder="Votre prénom">
<input type="text" id="age" name="age" placeholder="Votre âge">
<button type="button" >
JavaScript :
function afficherValeurs() {
// Récupérer les éléments du formulaire par leur ID
var prenom = document.getElementById("prenom").value;
var age = document.getElementById("age").value;
// Afficher les valeurs récupérées
alert("Prénom : " + prenom + "\nÂge : " + age);
// Vous pouvez utiliser ces valeurs comme vous le souhaitez
}
Ces exemples présentent deux façons différentes de récupérer et d’utiliser les valeurs d’un formulaire en JavaScript, en mettant l’accent sur la clarté et la lisibilité du code.
Voici chaque cas particulier isolé avec un sous-titre et un commentaire explicatif :
// Supposons que "nouveauFormulaire" est une fonction qui génère un nouveau formulaire dynamiquement
function nouveauFormulaire() {
var nouveauForm = document.createElement("form");
nouveauForm.innerHTML = '<input type="text" name="nouveauChamp">';
document.body.appendChild(nouveauForm);
}
// Supposons un formulaire avec une liste déroulante multiple
var selectElement = document.getElementById("maListe");
var valeursSelectionnees = [];
for (var i = 0; i < selectElement.options.length; i++) {
if (selectElement.options[i].selected) {
valeursSelectionnees.push(selectElement.options[i].value);
}
}
console.log("Valeurs sélectionnées:", valeursSelectionnees);
var emailInput = document.getElementById("email");
var emailValue = emailInput.value;
if (!isValidEmail(emailValue)) {
alert("Veuillez entrer une adresse email valide.");
}
// Supposons que vous vouliez éviter de récupérer les valeurs préremplies par le navigateur
var nomInput = document.getElementById("nom");
nomInput.addEventListener("input", function() {
// Vérifier si la valeur est vide ou suggérée par le navigateur
if (nomInput.value !== "") {
// La saisie est l'utilisateur
console.log("Nom entré par l'utilisateur:", nomInput.value);
}
});
// Supposons une fonction de nettoyage pour prévenir les attaques XSS
function nettoyerValeur(valeur) {
// Implémentez votre logique de nettoyage ici
// Par exemple, vous pourriez utiliser des expressions régulières ou des bibliothèques de nettoyage
return valeur;
}
var inputInsecure = document.getElementById("insecureInput");
var valeurSecurisee = nettoyerValeur(inputInsecure.value);
console.log("Valeur sécurisée:", valeurSecurisee);
En abordant chaque cas particulier individuellement avec des sous-titres et des commentaires explicatifs, vous pouvez mieux comprendre comment les traiter dans votre application JavaScript.
Conclusion
Dans ce guide, nous avons exploré différentes méthodes pour récupérer les valeurs d’un formulaire en JavaScript. Que ce soit en accédant directement aux éléments du formulaire, en utilisant querySelector
ou en exploitant l’événement onSubmit
, vous avez maintenant plusieurs approches à votre disposition pour gérer les données des formulaires dans vos projets web. Choisissez celle qui convient le mieux à votre cas d’utilisation et commencez à interagir avec les formulaires de manière dynamique grâce à JavaScript.
Pour qu'une proposition commerciale soit percutante et engageante, elle doit être personnalisée en fonction des…
Le contexte d'une proposition commerciale professionnelle est la base qui permet d’établir la pertinence de…
Recevoir une proposition d’embauche est toujours un moment gratifiant. C’est l’aboutissement d’un processus souvent long…
10 Modèles de lettres pour Refuser Poliment une Offre Commerciale 👇 Refuser une offre commerciale…
La feuille de route produit est un document stratégique qui guide le développement, le lancement,…
Voici un guide détaillé sur les composants constitutifs d'un budget d'entreprise, destiné aux entrepreneurs et…
This website uses cookies.