将 CSS "display: none;"更改为显示

Question

我希望网站加载时隐藏一个元素，但是当用户提交表单时，它会更改以显示。我已经尝试了几个小时，无法正常工作。

代码：

html

<form onsubmit="show();">
<div id="mymessage" class="hidden">Message was sent.</div>

CSS

.hidden {
  display: none;
}

javascript

function show () {
  document.getElementById("mymessage").style.display = 'block';
}

免责声明：我仅包括相关代码。

希望有人能够帮助我/发现错误！

Answer 1

您必须返回false以防止浏览器刷新页面，以便您可以在提交上隐藏元素：

function show () {
  document.getElementById("mymessage").style.display = 'block';
  return false;
}

.hidden {
  display: none;
}

<form onsubmit="return show();">
<button>enviar</button>
</form>
<div id="mymessage" class="hidden">Message was sent.</div>

Answer 2

我将删除hidden类：

function show () {
  document.getElementById("mymessage").classList.remove("hidden");
}

（classList具有非常广泛的支持，必要时可以在过时的浏览器上进行多填充。）

实时示例（使用按钮单击而不是表单提交）：

function show () {
  document.getElementById("mymessage").classList.remove("hidden");
  return false;
}

.hidden {
  display: none;
}

<form>
<div id="mymessage" class="hidden">Message was sent.</div>
<input type="button" onclick="show();" value="Click Me">

Answer 3

我认为这是解决方案

document.getElementById("mymessage").classList.remove("hidden");

Answer 4

如果您使用jQuery呢？

</script>
    <script>
    $(document).ready(function(){
        $("form").submit(function(){
            jQuery('#mymessage').show();
        });
    });
    </script>

记住在代码上方添加库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">