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

188

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

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

有任何想法吗？有没有可行的解决方法呢？

jquery  set  hidden-fields 
— 德州
source

Answers:

316

:text对于类型值为的输入将失败hidden。只需使用它，效率也更高：

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

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

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

— 安迪
source
安迪，感谢您的快速回复。实际上，我首先尝试了“ #texens”，然后尝试了“ #input：hidden＃texens”，但它们似乎都不起作用。当我将输入类型的形式从“隐藏”更改为“文本”，将“ #input：hidden：texens”更改为“ #input：text：texens”时，它可以正常工作。“ #input：text＃texens”是上面的错字，应该是您刚才提到的“ #input：hidden＃texens”或仅仅是“ #texens”。因此，似乎隐藏字段的值未更改。
— 德克萨斯州
1
@texens：我怀疑问题出在其他地方。从我链接到的示例中可以看出，在val()隐藏的输入上工作得很好，将值从“未更改”更改为“已更改”。我已经修改了示例，以包含您上面粘贴的代码，并带有警报以确认值更改：jsbin.com/elovo/2/edit
— Andy E
安迪，非常感谢这个例子。我运行了上面提到的代码，它完全按照预期的方式工作。警报确实确认该值已更改。我一直在使用Firefox的“查看页面源代码”功能打开页面源代码。并且在页面源中，它仍然显示旧值而不是新值（即使对于上面提到的pastebin中的代码也是如此）。但是，警报框会确认更改的值。因此，我假设这是Firefox的问题（或者我是不是太愚蠢并忽略了某些重要内容？）。再次感谢您的时间:)
— 德克萨斯州
2
@texens：没问题。我建议您使用适当的调试工具Firebug（如果您使用Firefox），而不要查看源代码。在所有浏览器中，“查看源代码”的行为大致相同，并且将显示页面的已下载，未修改的源代码。
— Andy E 2010年
2
我认为问题不在于Firefox或特定工具，而在于修改后的HTML呈现和显示方式。除了有很多jQuery涉及之外，我的情况与OP相同。就我而言，如本例所示，代码正常工作-click事件正确更新了“ hidden”类型的输入-但是Firebug不会显示隐藏字段的更新值，即使它们已被更新并且jQuery可以访问它们，即使已在Firebug中正确显示了可见字段的更新值
— Dave DuPlantis 2011年
26

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

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

奇迹般有效。不知道为什么jQuery不退一步。

— 赞伯
source
从技术上讲，它使用的是DOM而不是jQuery，但它很简单且有效（我在此处尝试了几乎所有答案，因为我在提交表单时更改值的情况，但它们没有起作用）。
— hlongmore '18
这就是为什么我发布此答案;）。很高兴它有所帮助。至于jQuery，它们可以在github.com/jquery/jquery/blob/…中进行潜在修复，但这仅用于type="radio"。我懒得报告一个问题，尤其是考虑到我4年前解决了这个问题。如果它应该在jQuery中修复，我也感到痛苦-可能是通过这种方式来保护jQuery小子免受其害？谁知道...
— zamber 18'7
1
jQuery解决方案也不适合我。不得不和Vanilla JS一起去。
— Varun Sharma
17

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

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

变化！！

必须是“弦东西”

— 扎加先生
source
2
这也为我解决了。我最终使用了.val(' 0')，可以parseInt在Javascript和int()我的后端Python中正确地对其进行解析。
— 拉特里
10 
$('input[name=hidden_field_name]').val('newVal');

没有为我工作

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

也不

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

做到了。

— 德克·塞弗特
source
9

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

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

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

希望它能帮助某人。

— 苏菲
source
这就是我喜欢的答案。使用attr函数可以避免上面提到的所有扭曲，并且可以做正确的事情。
7

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

向我+1！你是对的。value和.val（）在使用jQuery更新时出现问题。你周围发现了什么吗？
— NullPointer 2013年
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" />

如果其他人有相同的问题，请添加到该线程。

— 贾达卢
source
3

就我而言，我使用的是非字符串（整数）作为val（）的参数，该参数不起作用，窍门很简单

$("#price").val('' + price);
— 肖恩
source
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);
    }
}
— 朱利安·曼（Julian Mann）
source
1

这里的另一个陷阱浪费了我一些时间，所以我想我会通过小费。我有一个隐藏的字段，提供了一个ID。并且[]在名称括号（由于与struts2的使用），并选择$("#model.thefield[0]")不会找到我的隐藏字段。将ID重命名为不使用句号和方括号会导致选择器开始工作。所以最后我得到一个id model_the_field_0代替，选择器工作正常。

— 用户名
source
这是因为你的选择$("#model.thefield[0]")被解释为：一个元素与id相等model，一个css class的thefield一些attribute所谓的0...如果你想使用这些字符在您的id使用由Chuck Callebs建议的方法他的答案。在HTML5中，它id可以是不为空且不包含任何空格字符（参考）的任何字符串。
— 奥利弗·
1

使用ID：

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

使用类：

$('input:hidden.many_texens').val('tinkumaster');
— 阿尔曼·H
source
0

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

%input#forum_id.hidden

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

$('#forum_id').attr('val',forum_id.toString());
— 亚拉布米
source
-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);

— 卡罗莱纳州
source
-1

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

得到

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

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

服务器端

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

组

var a =10;
$("#selectIndex").val(a);
— 姆佐内尔兹
source
OP在问为什么像您这样的代码对他不起作用，因此对于这个问题来说这是没有用的。
— ProfK
-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事件将文本键入可见输入时，这将设置隐藏字段的值。有用的（例如在我的情况下），您想将字段值传递给“高级搜索”表单，而不用强迫用户重新输入搜索查询。

— 乔雷克斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.