使用jQuery的".val()"设置表单中隐藏字段的值无效

Question

使用jQuery的".val()"设置表单中隐藏字段的值无效

206

我一直在尝试使用jQuery设置表单中隐藏字段（hidden field）的值，但一直没有成功。

以下是一个示例代码，用于说明问题。如果我将输入类型保持为“文本”（text），则可以顺利地工作。但是，将输入类型更改为“隐藏”（hidden），就无法正常工作！

<html>

    <head>
        <script type="text/javascript" src="jquery.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("input:text#texens").val("tinkumaster");
                });
            });
        </script>
    </head>

    <body>
        <p>
            Name:
            <input type="hidden" id="texens" name="user" value="texens" />
        </p>
        <button>
            Change value for the text field
        </button>
    </body>

</html>

我还尝试了以下解决方法，将输入类型设置为"text"，然后使用"display:none"样式隐藏输入框。但是，这个方法也失败了！看起来jQuery在设置隐藏或不可见输入字段时有些问题。你有什么想法吗？是否有真正有效的解决方法可以解决这个问题？

- texens

18个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WizardsOfWor · Answer 1

这里有一个小技巧，曾经浪费了我一些时间，所以我想分享给大家。我有一个隐藏字段，我给它一个id，该id的名称中包含 . 和 [] 括号（由于与struts2一起使用），选择器 $("#model.thefield[0]") 将无法找到我的隐藏字段。将id重命名为不使用句点和括号会导致选择器开始工作。因此，最终我使用了id model_the_field_0，选择器正常工作。

- Yarrabhumi · Answer 2

如果您正在寻找haml，则这是设置隐藏字段值的答案，例如：

%input#forum_id.hidden

在您的jQuery中，只需将值转换为字符串，然后使用jQuery的attr属性附加它。希望这种方法也适用于其他语言。

$('#forum_id').attr('val',forum_id.toString());

- Arman H · Answer 3

使用ID：

$('input:hidden#texens').val('tinkumaster');

使用类：

$('input:hidden.many_texens').val('tinkumaster');

- juanramoney · Answer 4

尝试了一切之后，开发工具显示他们改变了ID，这个方法有效：

$("#form-field-{field_id}").value('free');

- gillytech · Answer 5

在这个页面上迷失在众多答案中，没有一个实际起作用的，我发现了如何在我的情况下做到这一点。

由于某种原因，在选择器中使用input并不能解决问题。我没有在表单元素上设置ID，因此无法使用任何ID进行选择器。即使我有，我也很确定它不会起作用。

这是我的解决方案：

$("[name=something]").val("something");

基本上，选择任何名称为“something”的元素。试一试。

- mzonerz · Answer 6

只需使用下面的语法获取和设置

获取

//Script 
var a = $("#selectIndex").val();

这里一个变量将保存hiddenfield（selectindex）的值。

服务器端

<asp:HiddenField ID="selectIndex" runat="server" Value="0" />

设置

var a =10;
$("#selectIndex").val(a);

- carolina · Answer 7

<javascript>


slots=''; hidden=''; basket = 0;

    cost_per_slot = $("#cost_per_slot").val();
    //cost_per_slot = parseFloat(cost_per_slot).toFixed(2)

    for (i=0; i< check_array.length; i++) {
        slots += check_array[i] + '\r\n';
        hidden += check_array[i].substring(0, 8) + '|';
        basket = (basket + parseFloat(cost_per_slot));
    }

    // Populate the Selected Slots section
    $("#selected_slots").html(slots);

    // Update hidden slots_booked form element with booked slots
    $("#slots_booked").val(hidden);     

    // Update basket total box
    basket = basket.toFixed(2);
    $("#total").html(basket);

- Joyrex · Answer 8

如果还有其他人在这方面遇到困难，使用jQuery有一种非常简单的“内联”方法：

<input type="search" placeholder="Search" value="" maxlength="256" id="q" name="q" style="width: 300px;" onChange="$('#ADSearch').attr('value', $('#q').attr('value'))"><input type="hidden" name="ADSearch" id="ADSearch" value="">

这将使用onChange事件将隐藏字段的值设置为在可见输入框中键入的文本。这对于像我这样想要将字段值传递给“高级搜索”表单而不强制用户重新输入其搜索查询的情况非常有帮助。