Question

我正在尝试编写一个函数，该函数将显示用户在表单中输入的所有数据的警报框。我必须只用简单的javascript（对不起没有jQuery ）来做。我的HTML如下：

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

我的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.
    }
 }

如何实现循环？

我已经编写了另一个实现相同效果的函数，但它涉及为每个输入字段编写一个冗长乏味的变量列表，我不想这样做，因为它很乱：

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

Answer 1

你有逻辑：你需要循环来收集所有信息，但是应该只显示一个警报，所以不需要在循环中警告，你需要在以下之后执行：

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
 }

Answer 2

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()返回一个数组，因此您需要使用索引访问数组元素：userInputs[i]。

或者您可以使用Array.prototype.forEach。请参阅下面的示例。

function showAlert() {
  var userInputs = document.getElementsByTagName("input");
  var alertBody = "";
    Array.prototype.forEach.call(userInputs, function(element) {
      alertBody += element.value + " ";
    });
  alert(alertBody);                                                                                                                                            
}

Answer 3

马丁让你成为那里的一部分，但我认为你会趁机获得价值观。 Document.getElementsByTagName returns an HTML collection最好被视为数组。

所以user inputs.value可能需要像userinputs[i].value那样才能让Martin的代码工作

Answer 4

你可以在一行中完成，没有任何循环：

＆＃13;

function Show() {
    alert([].slice.call(document.querySelectorAll("input[type='text']")).map(function(x) { return x.id + ": " + x.value; }).join("\n"));
}

＆＃13;

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>

＆＃13;

方法querySelectorAll受到所有现代浏览器（IE 9+）的支持，并且是与jQuery选择器等效的普通JS。但是，它会返回should be converted to plain array的节点列表，以便我们使用所需的.map()方法轻松获取所有值。

Javascript：如何使用循环函数在一个警报框中显示所有用户输入？

4 个答案: