jquery在一个被CSS隐藏的表单中不会改变输入值。

6 浏览
0 Comments

jquery在一个被CSS隐藏的表单中不会改变输入值。

我有一个使用jQuery 3.2.1的应用程序。它包含两个分别叫做#primarySearch和#advancedSearch的搜索表单。

#primarySearch始终可见，但#advancedSearch在页面加载时是隐藏的：

有一个按钮可以显示/隐藏#advancedSearch，代码如下：

/* 打开高级搜索 */
$('#advancedSearchCta b').click(function(){
    $('#advancedSearch').toggle();
    $('#advancedSearchCta').hide();
});
/* 关闭高级搜索 */
$('#closeAdvancedSearch').click(function(){
    $('#advancedSearch').toggle();
    $('#advancedSearchCta').show();
});

这个功能正常工作。

每个表单都包含一些输入框。我实现了一个按钮（#resetSearchBtn）来清除所有表单输入 - 实际上是一个“重置搜索”按钮：

 $('#resetSearchBtn').click(function(e){
    e.preventDefault();
    $(':input','#primarySearch, #advancedSearch')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');
 });

如果#advancedSearch可见，这个功能正常工作。但是，如果用户关闭高级搜索 - 即将其切换回display: none;，它就不起作用了。基本上，它只会在#advancedSearch可见时重置搜索。

我不能依赖这个，因为用户可能打开高级搜索，输入一些内容，然后关闭它，然后尝试进行重置。这会保留他们在#advancedSearch中的数据。该应用程序基于ajax，会对表单更改做出反应。因此，它基本上会向服务器提交“错误”的数据。

这是正常行为还是我应该寻找的应用程序冲突？有什么解决办法？

0

2 答案

0 Comments

jquery无法更改使用CSS隐藏的表单中的输入值，可能的原因是在not()过滤器中，您指定了不选择隐藏的元素。任何在标有display:none的表单标签下的内容都是隐藏的，不会被清除。尝试在选择器中更加具体。也许可以尝试：

.not(':button, :submit, :reset, form:hidden')

0
0 Comments

问题出现的原因是代码中对于复选框和单选框的处理不正确，以及对于隐藏元素的处理被忽略。解决方法是不设置复选框和单选框的值，并且使用.prop()方法处理checked和selected属性。另外，需要移除代码中的.not选择器以使其适用于隐藏的表单。以下是整理后的文章：

根据下面的代码，我对你的代码出现奇怪行为并不感到意外：

$(':input','#primarySearch, #advancedSearch')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');

你选择了表单中的每个输入框（包括复选框和单选框）。你将值设置为''。在这一点上，你的复选框和单选框已经失效。然后你移除了所有元素上的checked和selected属性。

第一：不要设置复选框和单选框的值。我认为这不是你想要的结果。

第二：checked和selected是布尔属性，必须使用.prop()方法来处理。

第三：你的代码忽略了每个隐藏元素（因为在.not中使用了:hidden选择器）。所以如果表单是隐藏的，它就不起作用。显然。

碰巧的是，对于应用程序的这部分，我根本不需要.not选择器。完全删除它解决了这个问题。感谢你指出，这是我的愚蠢错误！

顺便提一下，这段代码来自一个高赞的SO帖子：stackoverflow.com/questions/7792320 :p

还有一个高赞的评论建议它在复选框和单选框上不起作用。

0