200

我一直在尝试使用 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>

我还尝试了以下解决方法，将输入类型设置为“文本”，然后对输入框使用“显示：无”样式。但是，这也失败了！似乎 jQuery 在设置隐藏或不可见的输入字段时遇到了一些麻烦。

有任何想法吗？有没有真正有效的解决方法？

4

17 回答 17

337

:text类型值为 的输入将失败hidden。使用它也更有效：

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

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

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

于 2010-06-05T09:12:11.560 回答
65

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

而不是$("#hidden_field_id").val(id)仅仅做$("input[id=hidden_field_id]").val(id). 不知道有什么区别，但它有效。

于 2011-11-09T23:23:22.190 回答
28

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

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

奇迹般有效。不知道为什么 jQuery 不回退到这一点。

于 2014-04-03T16:29:46.730 回答
18

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

$("#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" />

变化！！

必须是“字符串的东西”

于 2011-07-05T07:27:15.467 回答
12 
$('input[name=hidden_field_name]').val('newVal');

为我工作，当两者都没有

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

也不

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

做过。

于 2014-08-20T10:40:51.923 回答
10

.val 对我不起作用，因为我正在获取值属性服务器端并且值并不总是更新。所以我用：

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

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

希望它可以帮助某人。

于 2013-05-17T20:03:54.447 回答
7

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

于 2010-09-10T21:40:59.263 回答
4

我遇到了同样的问题，我发现出了什么问题。我将 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" />

添加到这个线程以防其他人有同样的问题。

于 2013-10-17T16:54:39.260 回答
4

在我的情况下，我使用非字符串（整数）作为 val() 的参数，它不起作用，诀窍就像

$("#price").val('' + price);
于 2016-09-18T06:40:29.977 回答
2

使用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);
    }
}
于 2016-01-07T17:14:43.520 回答
1

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

于 2012-10-24T18:03:14.070 回答
1

使用身份证：

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

使用类：

$('input:hidden.many_texens').val('tinkumaster');
于 2015-11-17T03:10:48.240 回答
1

如果您正在搜索haml，那么这是隐藏字段将值设置为隐藏字段的答案，例如

%input#forum_id.hidden

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

$('#forum_id').attr('val',forum_id.toString());
于 2019-08-20T15:09:00.557 回答
0

在迷失在此页面上的无数答案中之后，没有一个真正起作用，我发现了如何在我的情况下做到这一点。

由于某种原因input，在选择器中使用并没有这样做。我在表单元素上没有 ID，所以我不能为选择器使用任何 ID。即使我这样做了，我也很确定它不会起作用。

这是我的解决方案：

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

本质上，选择名称为“某物”的任何元素。试一试。

于 2022-02-05T01:14:08.213 回答
-1 
<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);

于 2015-11-09T20:55:03.127 回答
-1

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

得到

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

这里一个变量将保存 hiddenfield(selectindex) 的值

服务器端

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

放

var a =10;
$("#selectIndex").val(a);
于 2016-08-07T12:50:28.357 回答
-1

其他任何为此苦苦挣扎的人，有一个非常简单的“内联”方法可以用 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 事件将文本输入到可见输入中。在您希望将字段值传递给“高级搜索”表单而不强制用户重新输入他们的搜索查询时，这很有帮助（就像我的情况一样）。

于 2016-08-19T17:59:39.937 回答