2

我有一个网络表单，用户可以通过单选按钮选择 3 种不同类型的删除。当用户在不同的单选按钮上选择时，表单会发生变化。这就是它的样子。

当我第一次到达此页面时，会显示用户 ID 单选和相应的表单。但是，假设我决定改为寻找合同。从删除合同表单到达结果页面后，如果我在浏览器上按回，我将返回到我的原始页面，除了在显示用户 ID 的表单时选择了合同单选按钮。我怎样才能解决这个问题？这是一个问题，因为我们不想删除认为它是合同的用户。

我希望当我按回时，选择用户单选按钮和表单，或者选择合同按钮和表单。

这是代码：http: //jsfiddle.net/hb6Z7/4/

function showhidediv(rad) {
  var rads = document.getElementsByName( rad.name );
  document.getElementById( 'existing_user_section' ).style.display = ( rads[0].checked ) ? 'block' : 'none';
  document.getElementById( 'existing_contract_section' ).style.display = ( rads[1].checked ) ? 'block' : 'none';
  document.getElementById( 'existing_item_section' ).style.display = ( rads[2].checked ) ? 'block' : 'none';
}

<form name="type_search" class="type_user_class" style="display:inline-block; margin: 0 0 0 10px;">
  <input type="radio" name="new_user" value="search_user" checked onclick="showhidediv(this);"/><label>User</label>
  <input type="radio" name="new_user" value="search_contract" onclick="showhidediv(this);"/><label>Contract</label>
  <input type="radio" name="new_user" value="search_item" onclick="showhidediv(this);"/><label class="last">Item</label>
</form>

<section id="existing_user_section">
  form for user
</section>
<section id="existing_contract_section" style="display:none">
  form for contract
</section>
<section id="existing_item_section" style="display:none">
  form for item
</section>

谢谢！

4

2 回答 2

0

假设浏览器保留您可以执行的选择

附加值是您现在可以从 html 中删除事件

我从值中获取 sectionName - 它可能来自 ID。此外，如果需要，您可以使用 cookie 来保存状态

现场演示

function showhidediv(rad) {
  var rads = document.getElementsByName(rad.name);
  for (var i=0;i<rads.length;i++) {
    var rad = rads[i];  
    var sectionName = rad.value.split("_")[1];  
    document.getElementById( 'existing_'+sectionName+'_section' ).style.display = ( rad.checked ) ? 'block' : 'none';
  }    
}
window.onload=function() {
  var rads = document.getElementsByName("new_user");
  for (var i=0;i<rads.length;i++) {
    rads[i].onclick=function() {
      showhidediv(this);
    }
    if (rads[i].checked) {
      rads[i].click();
    }
  }
}
于 2013-08-09T05:22:13.350 回答
-1

我不会依赖公认的解决方案。

不同的浏览器处理后退按钮的方式不同，有些允许您破坏缓存页面，有些不允许，有些版本之间不一致。

大多数时候页面将从缓存中加载，并且 DOM 不会再次初始化所有 js 文件。在该 js 的顶部放置一个警报并在不同的浏览器中重新加载页面，看看你是否再次收到警报。

我建议查看后退按钮缓存。 http://blog.55minutes.com/2011/10/how-to-defeat-the-browser-back-button-cache/

于 2014-05-23T23:27:24.300 回答