Question

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

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

[编辑] - 我应该补充一点，我在同一页面上有多个表格，但是我不能使用$（“input [name ='FORMELEMENT']”）;因为我有各种相同的表格名称。我需要以与按钮所在位置相同的形式找到表单元素的值。

Answer 1

注意，input为type="text"，以便更容易查看更改。这不会影响它在实例中的type="hidden"，因为它们的功能基本相同，只有一个不可见。

编辑 - 注意，在意识到console.log()未按预期工作后做了更改。

<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

Answer 2

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

Answer 3

除非您真的想要遍历DOM，否则最好只提供表单元素ID，这样可以使代码更容易，更可靠。

然后将此功能添加到您的Javascript文件

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

点击按钮时调用该功能。

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

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

3 个答案: