|
@@ -21,68 +21,10 @@
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
|
|
|
|
|
|
|
|
+ <!-- CONTENU -->
|
|
|
|
|
|
|
|
- <h4>Inscrire une personne</h4>
|
|
|
|
|
- <div id="message-erreur"></div>
|
|
|
|
|
- <form id="nouvel-abonne">
|
|
|
|
|
- <input type="text" name="nom" placeholder="Nom" /><br>
|
|
|
|
|
- <input id="annee" type="text" name="annee" placeholder="Année de naissance" /><br>
|
|
|
|
|
- <button id="bouton-submit" type="submit">Soumettre</button>
|
|
|
|
|
- </form>
|
|
|
|
|
|
|
|
|
|
- <ol id="liste-abonnes"></ol>
|
|
|
|
|
- <script>
|
|
|
|
|
- // Variables
|
|
|
|
|
- var formulaire = document.getElementById('nouvel-abonne');
|
|
|
|
|
- var inputAnnee = document.getElementById('annee');
|
|
|
|
|
- var messageErreur = document.getElementById('message-erreur');
|
|
|
|
|
- var boutonSubmit = document.getElementById('bouton-submit');
|
|
|
|
|
- var listeAbonnes = document.getElementById('liste-abonnes');
|
|
|
|
|
-
|
|
|
|
|
- // Handlers
|
|
|
|
|
- function inscritAbonne(evt) {
|
|
|
|
|
- // TRES important : empêche l'évènement de se poursuivre
|
|
|
|
|
- evt.preventDefault();
|
|
|
|
|
- // Récupère le formulaire (on aurait pu utiliser formulaire)
|
|
|
|
|
- var form = evt.target;
|
|
|
|
|
- // Récupère les champs de saisie de CE formulaire
|
|
|
|
|
- var inputs = form.getElementsByTagName('input');
|
|
|
|
|
- // Crée un objet vide pour stocker les valeurs saisies
|
|
|
|
|
- var valeurs = {};
|
|
|
|
|
- for(var i = 0 ; i < inputs.length ; i++) {
|
|
|
|
|
- var input = inputs[i];
|
|
|
|
|
- // Associe la valeur saisie à la clé (nom du champ)
|
|
|
|
|
- valeurs[input.name] = input.value;
|
|
|
|
|
- // Efface la valeur du champ !
|
|
|
|
|
- input.value = '';
|
|
|
|
|
- }
|
|
|
|
|
- console.log(valeurs);
|
|
|
|
|
- // Crée un nouvel item à insérer dans la liste
|
|
|
|
|
- var item = document.createElement('li');
|
|
|
|
|
- item.innerHTML = valeurs.nom + ", né en " + valeurs.annee;
|
|
|
|
|
-
|
|
|
|
|
- // Insère l'item
|
|
|
|
|
- listeAbonnes.appendChild(item);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function verifieAnnee(evt) {
|
|
|
|
|
- var input = evt.target;
|
|
|
|
|
- var valeurTexte = input.value;
|
|
|
|
|
- // Convertit une chaîne en entier... si possible !
|
|
|
|
|
- var valeurEntiere = parseInt(valeurTexte);
|
|
|
|
|
- if(valeurTexte.length > 0 && Number.isNaN(valeurEntiere)) {
|
|
|
|
|
- messageErreur.innerHTML = "La valeur '" + valeurTexte + "' n'est pas valide !";
|
|
|
|
|
- boutonSubmit.disabled = true;
|
|
|
|
|
- }
|
|
|
|
|
- else {
|
|
|
|
|
- messageErreur.innerHTML = '';
|
|
|
|
|
- boutonSubmit.disabled = false;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- formulaire.addEventListener('submit', inscritAbonne);
|
|
|
|
|
- inputAnnee.addEventListener('keyup', verifieAnnee);
|
|
|
|
|
- </script>
|
|
|
|
|
|
|
+ <!-- SCRIPTS -->
|
|
|
|
|
|
|
|
</body>
|
|
</body>
|
|
|
</html>
|
|
</html>
|
