【问题标题】:How to have multiple input boxes of the same name on a page?如何在一个页面上有多个同名输入框?
【发布时间】:2011-02-17 18:29:13
【问题描述】:

我正在制作一个网页。它有一些输入字段分组到一个部分,然后在该部分下方是一个“添加另一个”按钮。该按钮将使用 JavaScript 向页面添加另一个相同的部分;相同的表单域。

然后在页面下方有一个“计算”按钮。它运行其他一些需要通过 jQuery 访问这些输入字段的 JavaScript。

在页面上有多个重复的input 元素的推荐方法是什么?我知道不应该有两个具有相同 ID 的元素,但是两个同名元素会发生什么?可以单独访问吗?或者我应该使用 JavaScript 以不同的方式命名这些输入元素,例如在名称末尾添加“1”、“2”等,然后使用循环? (看起来很乱)

我应该如何识别和访问这些相同的输入字段组?

【问题讨论】:

    标签: javascript html


    【解决方案1】:

    您可以使用document.getElementsByName('name'),然后遍历结果以获取每个值。

    【讨论】:

      【解决方案2】:

      只要他们有不同的ids,他们就可以毫无问题地使用相同的名字。

      当您提交它们时,服务器将获得重复的名称/值对,并且在处理它们时需要注意这一点。不同的语言在执行此操作的方式上有所不同,您必须查阅相应的文档以了解如何使用您使用的任何方式执行此操作。

      【讨论】:

        【解决方案3】:

        在页面上有多个重复的input 元素的推荐方法是什么?

        去做吧。

        我知道不应该有两个具有相同 ID 的元素,但是两个同名的元素会发生什么?

        任何可供 JS 通过名称访问它们的方法都会给你一个集合而不是一个元素。您可以像访问数组一样访问其中的各个元素(包括使用forcollection.length 进行循环)。

        可以单独访问它们吗?

        如果您按名称访问它们,则可以使用它们的索引。 (collection[0])。

        如果你想访问特定的,你也可以给他们 id。

        如果您想将元素链接在一起并让它们相互引用,那么您可以使用 DOM 结构来帮助您。

        举一个非常简单的例子:

        <div>
            <input>
            <button onclick="alert(this.parentNode.getElementsByTagName('input')[0]);">...</button>
        </div>
        

        显然,在现实世界的情况下,您应该使用unobtrusive JSbuild on things that work

        【讨论】:

          【解决方案4】:

          您可以将名称作为数组提供
          例如:

          <input type="text" name="textBox[]"/>
          

          您可以在单击“添加另一个”按钮时附加相同的表单。您可以使用 textBox[0]、textBox[1] 等访问它们。

          【讨论】:

          • 您有关于此行为的任何文档吗?
          猜你喜欢
          • 2013-08-14
          • 2021-03-14
          • 1970-01-01
          • 1970-01-01
          • 2011-08-03
          • 2020-05-09
          • 1970-01-01
          • 2014-06-19
          • 2021-09-04
          相关资源
          最近更新 更多