Question

我在表单中有以下两个字段：

<input type="button" value="Rep" id="rep" name="rep" style="width:50px" onclick="addRep()" />
<input type="hidden" value="<?php echo $comment_id; ?>" />

我需要在表单中获取隐藏字段的值。所以我想在触发按钮时使用一些函数来调用按钮旁边的隐藏字段字段。

我需要专门得到隐藏的字段，这是在按下按钮之后。

我无法使用像getElementByID这样的方法，因为我生成了许多具有相同id的隐藏字段和按钮..（我用php动态生成它们）。

理论上，我认为我可以按下按钮的上下文（在捕获事件之后），然后使用一些函数来查找表单中的下一个元素..

但我不知道该怎么做！

Answer 1

请注意，您的按钮和隐藏元素之间可能有另一个元素。例如：

<input type="button" value="Rep" id="rep" name="rep" style="width:50px" onclick="addRep()"/>
<input type="text" id="someText" value="whatever"/>
<input type="hidden" id="someButton" value="anything"/>

在这种情况下，您可以通过执行一些检查来定位与所识别按钮“最接近”的隐藏输入元素：

var rootNode    = document.getElementById('rep'),
    currentNode = rootNode.nextSibling,
    closestHidden;

function check(node) {
  return node.nodeType === 1 && node.localName === 'input' && node.type === 'hidden'
};

do {
  if (check(currentNode)) {
    closestHidden = currentNode; break;
  }
} while (currentNode = currentNode.nextSibling);

alert(closestHidden.id);

Answer 2

另一种解决方案是将生成的Ids存储在一个数组中（确保为所有内容提供Id属性）并使用该数组索引元素。

Answer 3

您不应该在页面上拥有多个具有相同ID的元素。可以重复类，但ID应该是唯一的。

使用按下按钮的上下文，您走在正确的轨道上。如果使用jQuery这样的框架，这种类型的东西会容易得多。 Jquery有很多遍历DOM的方法http://api.jquery.com/category/traversing/一个是next（），它将找到下一个兄弟元素。

使用jQuery还可以更轻松地将您的javascript事件移出HTML，因此不是onclick =＆＃34;＆＃34;您可以在单独的JS文件中分配事件，使标记与行为分开。

Answer 4

为了可靠地获取表单中的下一个控件，您可以遍历表单的元素集合以查找主题元素，然后获取下一个，例如：

function getNextControl(el) {
  var elements = el && el.form && el.form.elements;
  if (elements) {
    for (var i=0, iLen=elements.length; i<iLen; i++) {
      if (elements[i] == el) {
        return elements[i + 1];
      }
    }
  }
}

现在您可以根据需要构建HTML，上面将返回下一个表单控件，如果没有，则返回undefined。

Answer 5

您可以使用jquery next()方法。

如果您想要纯粹的JavaScript解决方案，请参阅此帖子Get next/previous element using Javascript

该帖子中最佳投票答案是，

使用nextSibling和previousSibling属性：

<div id="foo1"></div> <div id="foo2"></div> <div id="foo3"></div>

 document.getElementById('foo2').nextSibling; // #foo3
 document.getElementById('foo2').previousSibling; // #foo1

但是在某些浏览器中（我忘了哪些）你还需要检查空白和评论节点：

 var div = document.getElementById('foo2'); var nextSibling =
 div.nextSibling; while(nextSibling && nextSibling.nodeType != 1) {
     nextSibling = nextSibling.nextSibling }

jQuery等库可以为您处理所有这些跨浏览器检查开箱即用。

Answer 6

如果您有对该按钮的引用，并且您想要该按钮后面的元素，则可以使用该属性

nextSibling;

请确保避免使用来自评论，换行符或空格的任何文字对象。

有关HTML Dom对象的完整概述，请查看http://www.w3schools.com/jsref/dom_obj_all.asp

Answer 7

获取对当前按钮的引用，例如事件的target属性或只在事件处理程序中使用this。然后你会在nextSibling属性中找到该按钮旁边的节点，但要注意：这通常是一个空白文本节点。所以请改用nextElementSibling。

使用javascript获取表单中最接近的元素

7 个答案: