如何在HTML中通过JavaScript获取name为quant[]的输入框值？

问题根源 #

• 你的HTML输入框的name属性是quant[]，而非quant[0]或quant[1]，因此用document.getElementsByName("quant[0]")无法匹配到任何元素，返回结果自然是undefined。
• document.getElementsByName()返回的是NodeList类型的元素集合，不是单个DOM元素，直接访问.value属性会返回undefined，必须通过索引（如[0]）取出集合中的单个元素后，才能获取其value。

修正后的JavaScript代码 #

function socialSharing() {
    alert("Hi:");
    // 获取所有name为quant[]的输入框集合
    var quantInputs = document.getElementsByName("quant[]");
    
    // 安全获取第一个输入框的值（判断集合长度避免索引越界）
    var fun1 = quantInputs.length > 0 ? quantInputs[0].value : "";
    alert(fun1);
    
    // 安全获取第二个输入框的值
    var fun2 = quantInputs.length > 1 ? quantInputs[1].value : "";
    alert(fun2);
    
    // 注意：原代码中的bar2未声明，执行会报错，需确保它已定义赋值
    // alert(bar2);    
}

额外说明 #

• 当你通过模板复制生成多个产品输入框时，所有输入框的name都会保持为quant[]，后端接收表单数据时会自动将这些值识别为数组；前端获取时必须使用quant[]作为查询名称。
• 添加集合长度判断是为了避免因页面上输入框数量不足，导致索引越界抛出错误。

内容的提问来源于stack exchange，提问作者K.PeerKhader Mydeen