Médiaforma

PHP MySQL – Exercice 4

Print Friendly

Définissez un formulaire contenant deux zones de texte pour saisir un prénom et un nom et un bouton de commande input de type button. Mettez en place le code nécessaire pour afficher Bonjour nom prénom au clic sur le bouton.

Vous pouvez mettre la vidéo sur Pause et saisir le code dans votre éditeur de code. Poursuivez la vidéo lorsque tout le code aura été entré.

Solution

Le formulaire de saisie est définie dans le corps du document, entre les lignes 15 et 21.

Pour améliorer l’aspect visuel du formulaire, nous utilisons un tableau, comme dans l’exercice précédent.

Le prénom est saisi dans un champ input de type text et d’identifiant prenom. Quant au nom, il est saisi dans un champ input de type text et d’identifiant nom.

Le bouton a pour libellé « Action ». Lorsqu’il est cliqué, la fonction JavaScript disBonjour() s’exécute.

Remarquez la balise span d’identifiant résultat. Elle sera utilisée par le code JavaScript pour dire bonjour à l’utilisateur.

 

Nous allons maintenant nous intéresser au code JavaScript

Le code correspondant sera saisi entre les balises head et /head, encadré par les balises script et /script.

Le prénom et le nom sont récupérés parf la fonction getElementById().value et stockés dans les variables prenom et nom. Il ne reste plus qu’à afficher la valeur de ces deux variables dans le span d’identifiant resultat

Voyons si ce code fonctionne. Le menu Exécution permet d’exécuter le code dans un navigateur Web. Ici par exemple dans Firefox. Nous saisissons un prénom et nom, puis nous appuyons sur le bouton action. Le message de bienvenue est immédiatement affiché dans le span.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Gestion événementielle</title>
    <script>
      function disBonjour() {
        var prenom = document.getElementById('prenom').value;
        var nom = document.getElementById('nom').value;
        document.getElementById('resultat').innerHTML = 'Bonjour ' + prenom + ' ' + nom;
      }
    </script>
  </head>
  <body>
    <form name="MonFormulaire">
      <table>
        <tr><td>Prénom</td><td><input type="text" id="prenom"></td></tr>
        <tr><td>Nom</td><td><input type="text" id="nom"></td></tr>
        <tr><td><input type="button" value="Action" onclick="disBonjour(); return false;"></td></tr>
      </table>
    </form>
    <br><br><span id="resultat"></span>
  </body>
</html>
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply