单击后隐藏按钮（在页面上使用现有表单） [英] Hide Button After Click (With Existing Form on Page)
问题描述
我试图在点击后隐藏按钮（不在表单标签内）。以下是现有代码。我试过的所有解决方案都会破坏功能或干扰页面上的表单。
I am trying to hide a button (not inside form tags) after it has been clicked. Below is the existing code. All solutions I have tried either break the functionality or interfere with the form on the page.
DIV hidden-dev标签之间的内容被隐藏，直到靠近底部的按钮单击代码。单击该按钮后，将向用户显示所有剩余内容。
The content between the DIV hidden-dev tags is hidden until the button near the bottom of the code is clicked. Once that button is clicked, all of the remaining content is shown to the user.
显示内容后，检查可用性按钮无效我想隐藏它（特别是因为核心表单的提交按钮出现，并且在全长页面的底部看到两者都很困惑。
Once the content is shown, there is no use for the button "Check Availability" so I would like to hide it (especially because the submit button appears for the core form, and it is confusing to see both at the bottom of the full length page.
这里是正确执行所有操作的现有代码（点击后隐藏按钮除外）...
Here's the existing code that does everything properly (except hide the button after the click)...
<html>
<head>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;">
<button onclick="getElementById('hidden-div').style.display = 'block'">Check Availability</button>
</span>
</div>
</body>
</html>
推荐答案
将按钮更改为：
<button onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">Check Availability</button>
或者更好，通过识别按钮使用正确的事件处理程序：
Or even better, use a proper event handler by identifying the button :
<button id="show_button">Check Availability</button>
和脚本
<script type="text/javascript">
var button = document.getElementById('show_button')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('hidden-div').style.display = 'block';
this.style.display = 'none'
}
</script>
这篇关于单击后隐藏按钮（在页面上使用现有表单）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
