javascript 在表单中点击提交按钮后如何显示隐藏的div?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31587326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 14:01:21  来源:igfitidea点击:

How to show hidden div after hitting submit button in form?

javascript

提问by gugogu

I have simple HTML form with submit button. After hitting this button I would like to the see div#my_idwhich is not visible before.

我有带有提交按钮的简单 HTML 表单。点击此按钮后,我想查看div#my_id之前不可见的内容。

<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">

<div id="my_id" style="display: none"> My text </div>

How can I make it work?

我怎样才能让它工作?

回答by Lyndsey Browning

Is your HTML contained within the <form>tag? It is likely that your submit button is submitting the form and causing a page refresh before the JavaScript is executed.

您的 HTML 是否包含在<form>标签中?很可能您的提交按钮正在提交表单并在执行 JavaScript 之前导致页面刷新。

If this is the case, try changing the input type to button to see the effect.

如果是这种情况,请尝试将输入类型更改为按钮以查看效果。

For example:

例如:

#my_id {
    display: none;
}
<form>
    <input type="button" name="xxx" value=" Show Text! " onclick="document.getElementById('my_id').style.display = 'block' ;" />
    <div id="my_id"> My text </div>
 </form>

回答by W van Rij

It should work.

它应该工作。

<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">

<div id="my_id" style="display: none"> My text </div>

Are you sure not any other HTML is 'ruining' your code? I have tested this on Firefox, Chrome and IE (all latest versions tho)

您确定没有任何其他 HTML 正在“破坏”您的代码?我已经在 Firefox、Chrome 和 IE(所有最新版本)上对此进行了测试

回答by Dietz

Your submit button will submit the form it is placed in using the defined action and method. Any arguments / fileds in the form will be included as query parameters.

您的提交按钮将使用定义的操作和方法提交放置在其中的表单。表单中的任何参数/字段都将作为查询参数包含在内。

The reason you are not seeing your div appear, is because the click results in the page being reloaded. After the reload the div will be hidden again.

你没有看到你的 div 出现的原因是因为点击导致页面被重新加载。重新加载后,div 将再次隐藏。