如何将 id 从父表单传递给 JavaScript答案

【问题标题】：How to pass id to JavaScript from the parent form如何将 id 从父表单传递给 JavaScript
【发布时间】：2012-12-26 15:11:50
【问题描述】：

假设我们有这个代码

<h:form id="#{id}">
    <h:panelGroup id="#{id}suggestionPanel">
        <h:panelGroup>
            <h:inputText value="#{searchString}"
                         rendered="#{validationId == null}"
                         id="#{id}search"
                         onkeyup="autocompleteHandler(this.value)"/>
        </h:panelGroup>
    </h:panelGroup>
</h:form>

是否有可能将表单的Id传递给名为“autocompleteHandler”的JavaScript方法，或者通过其他方式获取Id然后getElementById。

【问题讨论】：

请提供有效的 JSF 代码，以便真正解决您的问题。
@LuiggiMendoza 在您看来，为什么这段代码无效？
首先，您不能使用#{someBean.someValue} 分配JSF 组件的ID。您是否至少尝试过使用您提供的代码制作一个 JSF 页面？
@LuiggiMendoza 好吧，我的朋友，你不对。我从未将 JSF 组件的 id 设置为#{someBean.someValue}，这些都是字符串。在 id=" 部分你不会看到一个“点”，例如它的“#{id}search”。而 id 是一个解析为字符串的 elvariable。请在通过之前阅读一些 jsf 文档对某人的句子。仅供参考：一个 elvariable 声明如下：

标签： javascript jsf jsf-2

【解决方案1】：

每个输入元素都有一个form 属性，该属性包含对其父表单的引用。您可以在调用函数时传递this，它将对输入元素的引用传递给回调函数。然后，您可以在回调中读取传递元素的表单属性，以获取对表单的引用。表单元素将依次具有一个 ID 属性，用于保存表单 ID。

一个简单的例子如下所示：

标记：

<form id="test">
    <input type="text" onkeyup="autocompleteHandler(this);" />
</form>

JavaScript：

function autocompleteHandler(elm) {
    alert(elm.form.id);
}

DEMO

【讨论】：

【解决方案2】：

你总是可以使用 javascript 的 parentNode

var node = myElement;
var form = node.parentNode.parentNode;

【讨论】：

【解决方案3】：

在autocompleteHandler函数中，你可以通过this.form.id简单地获取id。

从输入中，您可以在form 属性中获取它所属的表单。

例子：

function autocompleteHandler(val) {
    alert(this.form.id);
}

【讨论】：

【解决方案4】：

您好，我想出了一种方法来获取外部表单的 Id，所以我想与您分享。这不会限制您使用输入标签或其他内容。

javascript 看起来像这样。

function autocompleteHandler(elem)
{       
    var x = elem.parentNode;
    if(x.nodeName == "FORM") 
    {
        //do something with your form
    }
    else
    {
        autocompleteHandler(x);
    }
}

【讨论】：

多么笨拙。为什么不直接使用 elem.form 来得到它，如 Christofer 和 Florian 的正确答案所示？