J'essaie d'écrire une fonction qui affichera une boîte d'alerte pour toutes les données entrées par l'utilisateur dans le formulaire. Je dois le faire uniquement en javascript simple (désolé pas de jQuery ). Mon HTML est le suivant:

 <form method="POST">
   <label class="form">Name: </label><input type="text" name="name" id="name"><br>
   <label class="form">Address: </label><input type="text" name="address" id="address"><br>
   <label class="form">Email: </label><input type="text" name="email" id="email"><br>

   <button id="submit" type="submit" value="submit" onclick="showAlert()">
   Submit
   </button>
 </form>

Mon javascript:

 function showAlert() {
     var userInputs = document.getElementsByTagName("input");

     for (var i=0; i < userInputs.length; i++) {
        alert(userInputs.value + " ");
        //Basically my idea would be to implement a loop for as many input fields, 
        //run through all of them, then display ONE SINGLE alert box containing all the 
        //data entered by the user.  But I'm having trouble with how to implement the loop.
    }
 }

Comment implémenter la boucle?

J'ai écrit une autre fonction qui produit le même effet mais cela impliquait d'écrire une longue et fastidieuse liste de variables pour chaque champ d'entrée et je ne veux pas le faire car c'est désordonné:

 function alternateShowAlert() {
      var name = document.getElementById('name').value;
      var address = document.getElementById('address').value;
      var email = document.getElementById('email'.value;

      alert(name + " " + address + " " + email)

      //This function, although it works fine, will be too long and tedious if I have 
      //more input fields such as age, city, state, country, gender, etc.  I want to put 
      //it in a loop format but how do I do this?
 }
1
5120bee 7 août 2016 à 21:38

4 réponses

Meilleure réponse
function showAlert() {
  var userInputs = document.getElementsByTagName("input");
  var alertBody = "";
  for (var i=0; i < userInputs.length; i++) {
    alertBody += userInputs[i].value + " ";
  }
  alert(alertBody);                                                                                                                                            
}

document.getElementsByTagName() renvoie un tableau, vous devez donc accéder aux éléments du tableau à l'aide de leur index: userInputs[i].

Ou vous pouvez utiliser Array.prototype.forEach. Voir l'exemple ci-dessous.

function showAlert() {
  var userInputs = document.getElementsByTagName("input");
  var alertBody = "";
    Array.prototype.forEach.call(userInputs, function(element) {
      alertBody += element.value + " ";
    });
  alert(alertBody);                                                                                                                                            
}
1
Vicente Olivert Riera 7 août 2016 à 19:01

Vous pouvez le faire sur une seule ligne, sans boucle:

function Show() {
    alert([].slice.call(document.querySelectorAll("input[type='text']")).map(function(x) { return x.id + ": " + x.value; }).join("\n"));
}
Name: <input type="text" id="name" /><br />
Address: <input type="text" id="address" /><br />
Email: <input type="text" id="email" /><br />
<button type="button" onclick="Show();">Show</button>

La méthode querySelectorAll est prise en charge par tous les navigateurs modernes (IE 9+) et est l'équivalent JS simple des sélecteurs jQuery. Cependant, il renvoie une liste de nœuds qui doit être convertie en tableau simple afin que nous puissions utiliser le { {X1}} pour obtenir facilement toutes les valeurs.

0
Shadow Wizard is Ear For You 7 août 2016 à 19:09

Vous avez la logique: vous avez besoin de la boucle pour collecter toutes les informations, mais ne devez afficher qu'une seule alerte, donc au lieu d'alerter à l'intérieur de la boucle, vous devez le faire après:

function showAlert() {
     var userInputs = document.getElementsByTagName("input");
     var infos = ""; // Create a string for the content
     for (var i=0; i < userInputs.length; i++) {
        infos += userInputs[i].value + " "; // Add the info from user input
    }
    alert(infos); // Show one alert at the end
 }
1
Martin 7 août 2016 à 18:51

Martin vous aide à vous y rendre, mais je pense que vous vous efforcerez d'obtenir les valeurs. Document.getElementsByTagName renvoie une collection HTML mieux traitée comme un tableau.

Donc, user inputs.value devrait probablement être quelque chose comme userinputs[i].value pour que le code de Martin fonctionne

0
aberdeenphoenix 7 août 2016 à 18:59