Question

我正在寻找一个解决方案，如果用户选择，在选择框上一个项目，页面刷新与更新的数据。这是使用完成 onChange功能。同时，如果用户点击submit，然后点击reset按钮，则重置所做的任何更改，因为onChange之后未发生子状态。

我认为一种解决方案就是提出模态窗口调用onChange函数，但它涉及大量处理工作

所以我在寻找是否有任何替代

Answer 1

禁用onchange中调用的方法中的按钮。然后在页面加载时启用它们。

function onChangefunc()
{
  document.getElementById("button1").disabled = true;
  document.getElementById("button2").disabled = true;
  document.getElementById("button3").disabled = true;

  // do rest of your logic here  
}

然后将其放在标签的页面末尾：

  <script>
  document.getElementById("button1").disabled = false;
  document.getElementById("button2").disabled = false;
  document.getElementById("button3").disabled = false;
  </script>

Answer 2

我会沿着模态和/或叠加路线走下去，这是一个更好的用户体验，因为用户可以看到正在发生的事情。最简单的解决方案就是在页面的某处粘贴div

<div id="overlay"></div>

并添加一些css：

#overlay {
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    opacity: 0.7;
    z-index:10;
    position:fixed;
    display:none;
}

注意：不透明度在IE 8及更早版本中不起作用，但有一些替代方案可以让Google快速发现。

然后在你的onChange（假设你使用jQuery）只是放一个$（'＃overlay'）。show（）或.fadeIn（），并在完成时隐藏它或如果页面刷新那么就不需要做任何事情。

如果您不想要任何可见的内容，请取出背景颜色和不透明度，它将不可见。

为了清楚起见，我建议在#overlay中间加一个加载gif。

希望有所帮助。

如何在页面刷新时阻止用户单击任何其他按钮（Modal窗口解决方案的一部分）

2 个答案: