如何使用JavaScript从html输入数组获取值?

2021年3月11日17:01:19 发表评论 1,675 次浏览

通过使用具有相同输入标签的输入标签可以解决此问题"名称"属性值, 可以将一个名称下存储的多个值分组, 以后可以使用该名称访问。要访问在输入字段中输入的所有值, 请使用以下方法:

var input = document.getElementsByName('array[]');

的document.getElementsByName()方法用于返回以特定名称存储的所有值, 从而使输入变量成为从0到输入数目的索引的数组。方法document.getElementById()。innerHTML用于更改所选内容的内部HTMLId。因此, 通过这种方式, 我们可以访问输入值并将其转换为数组, 然后根据需要对其进行访问。我们已经使用表单标签因为通常将一个表格中的所有输入元素组合在一起是一种好习惯, 否则在当前情况下它是完全可选的。

例子:

<!DOCTYPE html>
< html lang = "en" dir = "ltr" >
  
< head >
     < meta charset = "utf-8" >
     < title >
         How to get values from html input
         array using JavaScript ?
     </ title >
</ head >
  
< body style = "text-align: center;" >
      
     < h1 style = "color: green;" >
         lsbin
     </ h1 >
  
     < h3 id = "po" >Input Array Elements</ h3 >
     < form class = "" action = "index.html" method = "post" >
         < input type = "text" name = "array[]" value = "" />< br >
         < input type = "text" name = "array[]" value = "" />< br >
         < input type = "text" name = "array[]" value = "" />< br >
         < input type = "text" name = "array[]" value = "" />< br >
         < input type = "text" name = "array[]" value = "" />< br >
         < button type = "button" name = "button" onclick = "Geeks()" >
             Submit
         </ button >
     </ form >
     < br >
  
     < p id = "par" ></ p >
  
     < script type = "text/javascript" >
         var k = "The respective values are :";
         function Geeks() {
             var input = document.getElementsByName('array[]');
  
             for (var i = 0; i < input.length ; i++) {
                 var a = input [i];
                 k = k + "array[" + i + "].value= "
                                    + a.value + " ";
             }
  
             document.getElementById("par") .innerHTML = k ;
             document.getElementById("po") .innerHTML = "Output" ;
         }
     </script>
</ body >
  
</ html >

输出如下:

输入数组元素:

如何使用JavaScript从html输入数组获取值?

输出数组元素:

如何使用JavaScript从html输入数组获取值?

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: