Question

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

以下是解释问题的示例代码。如果我将输入类型保持为“文本”，它可以毫无困难地工作。但是，将输入类型更改为“隐藏”，则不起作用！

<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在设置隐藏或不可见的输入字段时遇到了一些麻烦。

有什么想法吗？有没有可行的解决方法？

Answer 1

对于类型值为:text的输入，

hidden将失败。使用它也更有效：

$("#texens").val("tinkumaster");

ID属性在网页上应该是唯一的，请确保这些属性可能会导致您遇到的任何问题，并且指定更复杂的选择器只会减慢速度并且看起来不那么整洁。

http://jsbin.com/elovo/edit的示例，使用http://jsbin.com/elovo/2/edit

上的示例代码

Answer 2

如果您在设置隐藏字段的值时遇到问题，因为您正在向其传递ID，这就是解决方案：

而不是$("#hidden_field_id").val(id)只做$("input[id=hidden_field_id]").val(id)。不确定区别是什么，但它确实有效。

Answer 3

最后，我找到了一个解决方案，它很简单：

document.getElementById("texens").value = "tinkumaster";

像魅力一样工作。不知道为什么jQuery不会回归到这个。

Answer 4

我有同样的问题。奇怪的是谷歌铬和可能其他人（不确定）不喜欢

$("#thing").val(0);

input type="hidden" id="thing" name="thing" value="1" />

（没有变化）

$("#thing").val("0");

input type="hidden" id="thing" name="thing" value="1" />

（没有变化）

但这有效!!!!

$("#thing").val("no");

input type="hidden" id="thing" name="thing" value="no" />

变化!!

$("#thing").val("yes");

input type="hidden" id="thing" name="thing" value="yes" />

变化!!

必须是“字符串”

Answer 5

$('input[name=hidden_field_name]').val('newVal');

为我工作，两者都没有

$('input[id=hidden_field_id]').val('newVal');

，也不

$('#hidden_field_id').val('newVal');

确实

Answer 6

.value对我不起作用，因为我抓住了值属性服务器端，并且值并不总是更新。所以我用过：

var counter = 0;
$('a.myClickableLink').click(function(event){
   event.preventDefault();
   counter++;

   ...
   $('#myInput').attr('value', counter);
}

希望它有所帮助。

Answer 7

实际上，这是一个持续存在的问题。虽然Andy对下载的源代码是正确的，但.val（...）和.attr（'value'，...）似乎并没有真正修改html。我认为这是一个javascript问题而不是一个jquery问题。如果你曾经使用过firebug甚至你会遇到同样的问题。虽然看起来如果您提交带有修改后的值的表单，它将会通过，但html不会改变。我遇到了这个问题，尝试创建修改后的表单的打印预览（执行[form] .html（））它复制一切正常，包括所有更改除了值更改。因此，我的模态打印预览有点无用......我的解决方法可能必须是“构建”包含已添加的值的隐藏表单，或者单独生成预览并使用户进行的每个修改也修改预览。两者都不是最理想的，但除非有人弄清楚为什么价值设定行为不会改变html（在我假设的DOM中），它将不得不这样做。

Answer 8

我遇到了同样的问题，我发现了什么是错的。我将HTML定义为

<form action="url" method="post">
    <input type="hidden" id="email" />
<form>
<script>
    function onsomeevent()
    {
       $("#email").val("a@a.com");
    }
</script>

在服务器上读取表单值总是导致电子邮件为空。在我挠头（和众多搜索）之后，我意识到错误并没有正确定义表格/输入。在修改输入时（如下所示），它就像一个魅力

<input type="hidden" id="email" name="email" />

如果其他人遇到同样的问题，请添加到此主题。

Answer 9

在我的情况下，我使用非字符串（整数）作为val（）的参数，这不起作用，技巧就像

一样简单

$("#price").val('' + price);

Answer 10

这里的另一个问题浪费了我的一些时间，所以我想我会传递一下。我有一个隐藏的领域我给了一个id。名称中的[]括号（由于与struts2一起使用）而选择器$("#model.thefield[0]")找不到我的隐藏字段。重命名id不使用句点和括号导致选择器开始工作。所以最后我最终得到了model_the_field_0的id而且选择器运行正常。

Answer 11

使用val()对我不起作用。我不得不到处使用.attr()。此外，我有不同类型的输入，并且在复选框和选择菜单的情况下必须非常明确。

更新文字字段

$('#model_name').attr('value',nameVal);

更新文件输入旁边的图像

$('#img-avatar').attr('src', avatarThumbUrl);

更新布尔值

if (isActive) {
    $('#model_active').attr('checked',"checked");
} else {
    $('#model_active').attr('checked', null) ;
}

更新选择（带数字或字符串）

$('#model_framerate').children().each(function(i, el){
    var v = $(el).val();
    if (v === String(framerateVal)) { 
        $(el).attr('selected','selected');
    } else {
        $(el).attr('selected',null);
    }
}

Answer 12

使用ID：

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

使用class：

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

Answer 13

只需使用以下语法获取并设置

<强> GET

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

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

服务器端

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

<强> SET

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

Answer 14

如果您要搜索haml，那么这就是隐藏字段将值设置为

这样的隐藏字段的答案。

%input#forum_id.hidden

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

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

Answer 15

<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);

Answer 16

其他任何正在努力解决这个问题的人，有一种非常简单的“内联”方式可以用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事件将文本输入到可见输入中。您希望将字段值传递给“高级搜索”表单并且不强制用户重新键入其搜索查询的情况（例如在我的情况下）。

使用jQuery“.val（）”在表单中设置隐藏字段的值不起作用

16 个答案: