以相同的形式获取另一个表单输入的值答案

【问题标题】：Getting the value of another form input in the same form以相同的形式获取另一个表单输入的值
【发布时间】：2012-02-05 09:32:20
【问题描述】：

我有一个包含 2 个输入字段的表单，一个是隐藏的，一个是按钮。当我单击按钮时，我需要获取同一表单中隐藏表单字段的值并将其分配给另一个 div。

如何遍历 dom 以获取特定表单字段的值？我知道表单输入字段名称。

[编辑] - 我应该补充一点，我在同一页面上有多个表单具有相同的元素，所以我不能使用 $("input[name='FORMELEMENT']");因为我有多种相同的表格名称。我需要找到与按钮所在表单相同的表单元素的值。

【问题讨论】：

如果你使用 jQuery，你不会“遍历 DOM”。这就是 jQuery 中选择器的意义所在。您可以具体选择您正在寻找的元素（或元素，取决于）并处理它/它们。另一方面，纯 DOM 方法通常归结为按类型获取所有元素，然后寻找更具体的匹配。 DOMland 中明显的替代方法是使用 id 到 document.getElementById()。
在您编辑后查看我的更新。
注意，我编辑了我的答案以修复console.logs。

标签： jquery forms

【解决方案1】：

请注意，input 是 type="text"，以便更容易看到更改。这不会影响它在实际示例中成为type="hidden"，因为它们的功能基本相同，除了一个不可见。

编辑 - 注意，在意识到console.log()s 没有按预期工作后进行了更改。

<form>
    <input type="text" name="myhidden" value="[placeholder]"/>
    <input type="button" name="mybutton" value="Click me!" rel="the value to copy 1"/>
</form>
<form>
    <input type="text" name="myhidden" value="[placeholder]"/>
    <input type="button" name="mybutton" value="Click me!" rel="the value to copy 2"/>
</form>
<form>
    <input type="text" name="myhidden" value="[placeholder]"/>
    <input type="button" name="mybutton" value="Click me!" rel="the value to copy 3"/>
</form>

$(document).ready(function(){
    $('input[name="mybutton"]').click(function(){
        var $hidden = $(this).parent('form').find('input[name="myhidden"]');
        console.log($hidden.val());
        $hidden.val($(this).attr('rel'));
        console.log($hidden.val());
    });
});

http://jsfiddle.net/WYJRm/4

【讨论】：

【解决方案2】：

$("#the-formid input[name=the-name-you-know]").val()

【讨论】：

【解决方案3】：

除非您真的想遍历 DOM，否则最好只提供表单元素 ID，这会使代码更简单、更可靠。

然后将此函数添加到您的 Javascript 文件中

function copyFormValue(visibleID, hiddenID){
   visibleElement = document.getElementById(visibleID);
   hiddenElement =  document.getElementById(hiddenID);
   hiddenElement.value = visibleElement.value;
}

并在您的按钮被点击时调用该函数。

onclick="copyFormValue('userName', 'userNameHidden');"

【讨论】：