Apprendre comment créer sa première page web. sans logiciel de création de pages web
Définition et utilisation événement onsubmit
LES BALISES HTMLL'attribut d'événement onsubmit se déclenche lorsqu'un formulaire est envoyé.
L'attribut d'événement onsubmit fonctionne uniquement avec l’élément : <form>.
Syntaxe
<form onsubmit="script" >
Valeurs d'attribut
Valeur |
Description |
|---|---|
|
script |
Le script à exécuter sur onsubmit |
Exemple Exécuter un JavaScript lorsqu'un formulaire est soumis :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 demo</title>
<script>
function traitForm()
{
alert("Le formulaire a été soumis");
}
</script>
</head>
<body>
<form action="demo_form.php" onsubmit="traitForm()">
Nom: <input type="text" name="nom"><br>
Prénom: <input type="text" name="pnom"><br>
<input type="submit">
</form>
<h2>Appuyez sur le bouton de soumition pour voir le message</h2>
<p>la fonction traitForm() est déclanchée lors de la soumission du formulaire.
Elle montre un message.</p>
</body>
</html>
<form action="demo_form.php" onsubmit="traitForm()">: Définit un formulaire avec l'attribut action indiquant où les données du formulaire doivent être envoyées lors de la soumission. L'attribut onsubmit est utilisé pour spécifier la fonction JavaScript (traitForm()) qui doit être appelée lors de la soumission du formulaire.
Conseils et Astuces
- Assurez-vous de retourner false dans la fonction de validation si vous ne souhaitez pas que le formulaire soit soumis.
- Vous pouvez utiliser l'objet event pour obtenir des informations supplémentaires sur l'événement de soumission.
- Évitez d'utiliser du code JavaScript directement dans l'attribut onsubmit pour maintenir la séparation des préoccupations. Utilisez plutôt des gestionnaires d'événements externes.
- Testez votre formulaire dans différents navigateurs pour vous assurer de la compatibilité.
Appui de navigateur
L'attribut d'événement onsubmit est pris en charge dans tous les principaux navigateurs.
Différences entre HTML 4.01 et HTML5
Aucune.
Exemple Valider un formulaire avec JavaScript
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Valider un formulaire</title>
<script type="text/javascript">
//<![CDATA[
function valider() {
// si la valeur du champ prenom est non vide
if(document.this.nom.value != "") {
if(document.this.pnom.value != "") {
// alors on envoie le formulaire
alert("Le formulaire a été soumis");
}
else {
// sinon on affiche un message
alert("Saisissez le prénom SVP");
}
}
else {
// sinon on affiche un message
alert("Saisissez le nom SVP");
}}
//]]>
</script>
</head>
<body>
<form name="this" action="" onsubmit="valider(this)">
Nom: <input type="text" name="nom"><br>
Prénom: <input type="text" name="pnom"><br>
<input type="submit">
</body>
</html>
Ce code HTML représente un formulaire simple avec une fonction JavaScript (valider()) associée à l'événement onsubmit du formulaire. Le but de ce code est de vérifier si les champs "Nom" et "Prénom" sont renseignés avant de permettre la soumission du formulaire.
Par carabde 10 mars 2014