使用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个回答

65

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

不要使用 $("#hidden_field_id").val(id)，而是使用 $("input[id=hidden_field_id]").val(id)。不确定区别在哪里，但它可以工作。

- Chuck Callebs

3

请小心，这可能会在旧浏览器上运行缓慢。（http://learn.jquery.com/using-jquery-core/selecting-elements/） - Alex Klaus

对我没用，浏览器-谷歌48。不确定原因。 - Gurpreet Singh

27

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

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

运行得很好。不知道为什么jQuery不退而求其次使用这个。

- zamber

从技术上讲，这使用的是DOM而不是jQuery，但它很简单并且有效（我尝试了这里几乎所有的答案来改变表单提交时的值，但它们都没有起作用）。 - hlongmore

这就是为什么我发布了这个答案;). 很高兴它能帮到你。至于jQuery，他们在这里有一个潜在的解决方法https://github.com/jquery/jquery/blob/ac9e3016645078e1e42120822cfb2076151c8cbe/src/attributes/attr.js#L79 但仅适用于 type ="radio"。我懒得报告问题，特别是考虑到我4年前已经解决了这个问题。我也不确定它是否应该在jQuery中修复-可能是以这种方式实现的，以保护jQuery儿童免受自己的影响？谁知道... - zamber

1

jQuery 的解决方案对我也没有起作用。不得不使用原生 JS。 - Varun Sharma

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" />

更改！！

必须是一个“字符串的事情”

- mr.zaga

2

这对我也解决了问题。最终我使用了.val('0')，在Javascript中被正确解析为parseInt，在我的后端Python中也被解析为int()。 - rattray

15

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

当其他方法都无法解决问题时，这个方法对我很有效。

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

不

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

做了。

- Dirk Seifert

10

.val对我不起作用，因为我是在服务器端获取value属性，而这个值并不总是更新的。所以我使用了：

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

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

希望能对某些人有所帮助。

- Sophie

这就是我喜欢的答案。使用attr函数可以避免上述所有扭曲的操作，并且做正确的事情。 - user1886876

7

实际上，这是一个持续存在的问题。尽管Andy在下载源代码方面是正确的，但.val(...)和.attr('value',...)似乎并没有实际修改HTML。我认为这是一个JavaScript问题，而不是一个jQuery问题。如果您使用了Firebug，您也会有同样的疑问。虽然看起来如果您提交了带有修改值的表单，它将通过，但HTML并没有改变。我遇到了这个问题，试图创建一个修改后表单的打印预览（执行[form].html()），它可以复制所有内容，包括所有更改，除了值的更改。因此，我的模态打印预览有些无用...我的解决方法可能是“构建”一个包含它们添加的值的隐藏表单，或者独立生成预览，并使用户进行的每个修改也修改预览。两种方法都不太理想，但除非有人找出为什么设置值的行为不会更改HTML（我假设是在DOM中），否则就只能这样做。

- user444777

我给你点赞！你说得对。在使用jQuery更新value和.val()时存在问题。你找到了相关的解决方案吗？ - Smile

5

我发现我遇到了同样的问题，并且找出了问题所在。我的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" />

为了帮助其他有相同问题的人，我在此添加一些内容。

- Jardalu

4

在我的情况下，我使用了一个非字符串（整数）作为val（）的参数，这是不起作用的，要解决这个问题，方法非常简单：

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

- Shawn

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

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

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

- Andy E · Accepted Answer

344

:text 在输入类型为 hidden 时会失败。而直接使用以下代码的效率更高：

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

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

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

- Andy E

1

@texens：我怀疑问题出在其他地方。正如您从我链接的示例中看到的那样，val() 在隐藏输入上运行良好，将值从“未更改”更改为“已更改”。我已经修改了示例，包括您上面粘贴的代码，并添加了一个警报以确认值的更改：http://jsbin.com/elovo/2/edit - Andy E

Andy，非常感谢你的示例。我运行了上面提到的代码，它完全按照预期工作。而且警报确实确认了值已经被更改。我一直在使用Firefox的“查看页面源代码”功能打开页面源代码。在页面源代码中，仍然显示旧值而不是新值（即使是上面提到的pastebin中的代码）。但是，警报框确认了更改后的值。因此，我认为这是Firefox的问题（或者我太愚蠢，忽略了重要的东西？）。再次感谢您的时间 :) - texens

2

@texens：没问题。我建议使用一个合适的调试工具，如果你用的是Firefox，可以使用Firebug，而不是查看源代码。 "查看源代码"的行为在所有浏览器中基本相同，并会显示页面下载的未经修改的源代码。 - Andy E

2

我认为问题不在于Firefox或特定工具，而是在于修改后的HTML如何呈现和显示。我的情况与OP相同，只是涉及更多的jQuery。在我的情况下，就像这个问题一样，代码可以正确地工作 - 单击事件可以正确地更新类型为“hidden”的输入 - 但是Firebug不会显示已更新的隐藏字段的值，即使它们已经被更新并且jQuery可以访问它们，即使已更新的可见字段的值在Firebug中也可以正确地显示。 - Dave DuPlantis

Firebug可以很好地更新值，你可能在其他地方遇到了问题，Dave DuPlantis。 - Ed DeGagne

显示剩余2条评论