react-web-tutorial/react-tuto/src/markdown/4. Evènements/04. Formulaires.md

On va s'intéresser à des évènements qui concernent les formulaires et leurs champs de saisie.

• submit est émis lorsqu'on soumet un formulaire.
• keyup est émis lorsqu'on relâche une touche, pendant la saisie dans un champ input

<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>