检索输入值答案

【问题标题】：retrieve value of input检索输入值
【发布时间】：2013-03-26 20:35:57
【问题描述】：

我有这个：

<?php $i=0;?>
<?php foreach($x as $y): ?>
<input type="hidden" id="theid<?php echo $i;?>" value="<?php echo $someVariable;?>"/>
<?php $i = $i + 1; ?>
<?php endforeach; ?>

我需要像这样获取每个“theid”的值：

<script type="text/javascript">
function somefunction(element, optionTitle) {
var num = document.getElementById('theid').value;
...
</script>

考虑到“theid”添加了 $i，我该怎么做？谢谢。

【问题讨论】：

somefunction() 怎么叫？

标签： javascript forms function dom

【解决方案1】：

如果您有多个输入字段并且想要对多个输入字段执行相同的操作，您可以使用getElementsByClassName 而不是getElementById：

PHP

<input type="hidden" class="theclassname" id="theid<?php echo $i;?>" value="<?php echo $someVariable;?>"/>

JS：

<script type="text/javascript">
    function somefunction(element, optionTitle) {
        var myEles = document.getElementsByClassName('theclassname');
        // loop over myEles and act on each one
        for (var i=0; i < myEles.length; i++) {
            alert("Input with id: " + myEles[i].id + " has value: " + myEles[i].value);
        }
    }
</script>

【讨论】：

您可以使用 myEles.length 和 myEles.item(i) 循环访问 myEles；因为 myEles 应该是一个 nodeList 或 HTML 集合
@Steve：这不起作用，它仍在检索第一个 id 的值。
嗯，从技术上讲，它正在检索类名为theclassname 的所有输入字段的值。由你决定你想要哪一个。但是您还没有向我们提供您计划如何识别特定的人。
我刚刚更新了for loop 中的代码以使用警报。这将更好地理解它的作用。

【解决方案2】：

我会推荐使用 jQuery，jQuery 选择器支持通配符：

$('input[id^=theid]')

有关此主题的进一步阅读，请参阅http://api.jquery.com/category/selectors/。

【讨论】：

不要做傻事，但是：不是所有的东西都需要 jQuery。虽然它可能看起来稍微容易一些，但有一种非常简单的非 jQuery 方法可以解决这个问题，不需要庞大的库。
看看我上面的回答。只需添加一个类名，就可以避免加载整个库。
@Steve：我同意你关于任意包含大型库的说法。但是话虽如此，使用这样的库可以帮助加快开发速度，因为我认为使用这样的库的主要原因是为了跨浏览器兼容性。众所周知，为过多的可用浏览器编码并不是我们想要花费大量时间的事情。
哦，我是 jQuery 的忠实粉丝。当然，我永远不想从头开始编写它提供的任何跨浏览器功能。但是当一个非常基本的 JS 问题（并且没有跨浏览器问题）的第一个答案变成：“你应该使用 jQuery”时，我遇到了一个问题。我写了很多前端代码，在很多很多情况下，标准的 vanilla JS 都能做到这一点。 OP 的问题（如上所述）就是其中之一。

【解决方案3】：

如果你使用 jQuery 会像这样简单：

$('input[id^="theid"]').each(function () {
  console.log($(this).val()); //value of each theid
});

这是jsBin。

【讨论】：