当前位置：文江博客话题详情

清除后退按钮上的表单？

发布于 2024-12-08 01:32:12 字数 242 浏览 2 评论 0原文

我有一个表单中包含多个复选框的页面，当选中这些复选框时，会使用 jquery 从表中过滤出相应的信息。我的问题是以下场景：

有人选中一个或多个框，隐藏表中的行
他们单击链接，转到另一页
p>
他们单击后退按钮。

此时，复选框仍处于选中状态（至少在 Chrome 中），但所有表格行再次可见。

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

╰ゝ天使的微笑 2024-12-15 01:32:12

如果您的目标是让他们回到离开前的确切视图（表格行仍然隐藏）：

这是网站的缺点（或优点）：它是无状态的，特别是当它涉及客户端操作。

您需要做的是将应用程序状态存储在 URL 哈希标记中，以便当用户使用后退按钮时，您可以检索“状态”并重建其视图。

这是另一个问题，其答案可能会对您有所帮助： jquery javascript：添加浏览器历史记录带有主题标签？

如果您的目标是将页面返回到其初始状态：

只需重置页面加载时的所有复选框：

$('input:checkbox').prop('checked', false);

-或-

重置整个表单：

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .prop('checked', false)
 .prop('selected', false);

If your objective is to bring them back to the exact view they had before they left (table rows are still hidden):

Such is a disadvantage (or advantage) of a website: it's stateless, particularly when it comes to client-side manipulation.

What you'll need to do is store the application state in the URL hash tag so that when the user uses their back button, you can retrieve the "state" and reconstruct their view.

Here's another question whose answer might help you: jquery javascript: adding browser history back with hashtag?

If your objective is to return the page back to its initial state:

Just reset all the checkboxes on page load:

$('input:checkbox').prop('checked', false);

-or-

Reset the entire form:

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .prop('checked', false)
 .prop('selected', false);

回复收藏 0 原文

熟人话多 2024-12-15 01:32:12

不允许缓存您的页面，或添加代码来重置表单：

$("form input").each(function(){
    var elem = $(this);
    var type = elem.attr("type");
    if(type == "checkbox") elem.prop("checked", "");
    else if(type == "text") elem.val("");
});

必须使用 .each，因为 CSS 选择器 input[type=text] 不会这样做t 匹配，而该元素仍然是文本元素。

Do not allow your page to be cached, or add code to reset your form:

$("form input").each(function(){
    var elem = $(this);
    var type = elem.attr("type");
    if(type == "checkbox") elem.prop("checked", "");
    else if(type == "text") elem.val("");
});

.each has to be used, because the CSS selector input[type=text] doesn't match <input />, while the element is still a text element.

回复收藏 0 原文

梦魇绽荼蘼 2024-12-15 01:32:12

对于 IE 在提交后重置表单，对我没有帮助。相反，以下代码对我有用。页面加载事件也会在浏览器后退按钮上调用。

$(window).load(function() {
    $('form').get(0).reset(); //clear form data on page load
});

For IE resetting the form after submit, did not help for me. Instead following code worked for me. Page load event gets called on browser Back Button as well.

$(window).load(function() {
    $('form').get(0).reset(); //clear form data on page load
});

回复收藏 0 原文

对你而言 2024-12-15 01:32:12

因此，您的问题不在于浏览器缓存用户输入，而在于行未被隐藏。您可以通过添加一个 jQuery 脚本来轻松解决此问题，该脚本将检查复选框是否被选中（加载页面后）。如果选中，则隐藏该行:)

伪代码：

1. wait for the page to load
2. for each checkbox check if checked
3. if it's checked, hide the corresponding row in the same way you did when the user checked it.

So your problem is not with the browser caching the user input but with the rows not being hidden. You can easily solve this problem by adding a jQuery script that will check if a checkbox is checked (after loading the page). If it's checked, you hide the row :)

pseudocode:

1. wait for the page to load
2. for each checkbox check if checked
3. if it's checked, hide the corresponding row in the same way you did when the user checked it.

回复收藏 0 原文

~没有更多了~