HTML attribut d'événement onsubmit

Somaire

Définition et utilisation événement onsubmit

LES BALISES HTML

L'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 :

Sélectionner 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.asp" onsubmit="traitForm()">
  Nom: <input type="text" name="nom"><br>
  Prénom: <input type="text" name="pnom"><br>
  <input type="submit">
  <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>
    
 

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

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

Sélectionner 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>
    
 

cours precedent Retour à la Liste attribut d'événement 

    
Accueil du site


Par carabde 10 mars 2014