[英]Javascript: How use a loop function to show all the user input in one single alert box?
I'm trying to write a function that will show an Alert Box for all the data entered by the user in the form. 我正在尝试编写一个函数,该函数将为用户在表单中输入的所有数据显示一个警报框。 I must do it only in simple javascript (sorry no jQuery ).
我必须只使用简单的javascript(抱歉, 没有jQuery )来做到这一点。 My HTML is as follows:
我的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>
My javascript: 我的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.
}
}
How do I implement the loop? 如何实现循环?
I have written another function that achieves the same effect but it involved writing a long, tedious list of variables for each input field and I don't want to do that since it's messy: 我编写了另一个实现相同效果的函数,但它涉及为每个输入字段编写一长串乏味的变量列表,我不想这样做,因为它很乱:
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?
}
You have the logic: you need the loop to collect all info, but should show only one alert, so instead of alert'ing inside the loop, you need to do it after: 您有逻辑:您需要循环来收集所有信息,但应该只显示一个警报,因此,除了在循环内发出警报外,您还需要在执行以下操作:
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
}
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()
returns an array, so you need to access the elements of the array using their index: userInputs[i]
. document.getElementsByTagName()
返回一个数组,因此您需要使用它们的索引来访问该数组的元素: userInputs[i]
。
Or you can use Array.prototype.forEach
. 或者,您可以使用
Array.prototype.forEach
。 See the example below. 请参见下面的示例。
function showAlert() {
var userInputs = document.getElementsByTagName("input");
var alertBody = "";
Array.prototype.forEach.call(userInputs, function(element) {
alertBody += element.value + " ";
});
alert(alertBody);
}
Martin is getting you part of the way there, but I think you'll trip up at getting the values. 马丁正在帮助您实现目标,但是我认为您会为获得价值而奋斗。 Document.getElementsByTagName returns an HTML collection best treated as an array.
Document.getElementsByTagName 返回最好视为数组的HTML集合 。
So user inputs.value
would probably need to be something like userinputs[i].value
for Martin's code to work 因此,
user inputs.value
可能需要类似于userinputs[i].value
的代码才能使Martin的代码正常工作
You can do it in one single line, without any loop: 您可以单行完成它,没有任何循环:
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>
The method querySelectorAll
is supported by all modern browsers (IE 9+) and is the plain JS equivalent to jQuery selectors. 所有现代浏览器(IE 9+)都支持
querySelectorAll
方法,它是与jQuery选择器等效的普通JS。 However, it returns a node list which should be converted to plain array in order for us to use the desired .map()
method to get all the values easily. 但是,它返回一个节点列表,该列表应转换为纯数组 ,以便我们使用所需的
.map()
方法轻松获取所有值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.