在 javascript 中，如何从输入文本框中获取变量值，其中 id 已递增整数

Question

在 n input 个具有递增整数 ID 的文本框中。例子第一个文本框是 text_box_1_name，第 10 个是 text_box_10_name。我需要使用 for 循环从这些文本框中获取值。

function exportCSV(filename)
{
    var csv = [];
    var number_of_names = document.getElementById("text_no_of_names").value;
    csv.push(number_of_names)
    var temp = document.getElementById("text_box_2_name")
    // Value is available in temp var if id is written directly
    for (var i = 0 ; i < number_of_names ; i++) {
        var temp =document.getElementById("text_box_"+i+"name").value
        // How to increment such id
        csv.push(temp)
    }
    downloadCSV(csv.join("\n"), filename); // Function ahead to download csv
}

Answer 1

var textBoxArr = document.getElementsByTagName("input");

for(i=0; i<textBoxArr.length; i++) {
//store textbox value here;
    alert("value is: "+textBoxArr[i].value);
}

以上代码片段将遍历所有input type = "text"并得到相应的值；我们可以这样：csv.push(textBoxArr[i].value) 无需根据 ID

工作

Answer 2

使用querySelectorAll to select the inputs which id's start with text_box and loop through them with .forEach():

function exportCSV(filename)
{
    var csv = [];

    [...document.querySelectorAll('input[id^="text_box"]')].forEach(function(e){
      csv.push(e.value);
    });

    downloadCSV(csv.join("\n"), filename); // Function ahead to download csv
}

这是一个例子：

function exportCSV()
{
    var csv = [];

    [...document.querySelectorAll('input[id^="text_box"]')].forEach(function(e){
      csv.push(e.value);
    });

    console.log(csv.join(",")); // Function ahead to download csv
}

exportCSV();

<input type="text" id="text_box_1" value="first"/>
<input type="text" id="text_box_2" value="second" />
<input type="text" id="another_text_box" value="third" />
<input type="text" id="another_text_box_2" value="fourth" />
<input type="text" id="text_box_3" value="fifth" />
<input type="text" id="text_box_4" value="sixth" />

在 javascript 中，如何从输入文本框中获取变量值，其中 id 已递增整数

In javascript how to get value in variable from input textboxes with id having incremented integer

javascript

jquery

for-loop

inputbox