javascript 单击后隐藏按钮（使用页面上的现有表单）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16903605/
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
Hide Button After Click (With Existing Form on Page)
提问by user2449026
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.
我试图在单击后隐藏按钮（不在表单标签内）。下面是现有的代码。我尝试过的所有解决方案要么破坏功能，要么干扰页面上的表单。
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.
DIV hidden-dev 标签之间的内容是隐藏的，直到单击代码底部附近的按钮。单击该按钮后，将向用户显示所有剩余内容。
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>
回答by adeneo
Change the button to :
将按钮更改为：
<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>
and a script
和一个脚本
<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>
回答by TheSnooker
Here is another solution using Jquery I find it a little easier and neater than inline JS sometimes.
这是使用 Jquery 的另一个解决方案，我发现它有时比内联 JS 更容易和更整洁。
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
/* if you prefer to functionize and use onclick= rather then the .on bind
function hide_show(){
$(this).hide();
$("#hidden-div").show();
}
*/
$(function(){
$("#chkbtn").on('click',function() {
$(this).hide();
$("#hidden-div").show();
});
});
</script>
<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 id="chkbtn">Check Availability</button></span>
</div>
</body>
</html>
回答by TheSnooker
CSS code:
CSS代码：
.hide{
display:none;
}
.show{
display:block;
}
Html code:
html代码：
<button onclick="block_none()">Check Availability</button>
Javascript Code:
Javascript代码：
function block_none(){
document.getElementById('hidden-div').classList.add('show');
document.getElementById('button-id').classList.add('hide');
}
回答by EduLopez
This is my solution. I Hide and then confirm check
这是我的解决方案。我隐藏然后确认检查
onclick="return ConfirmSubmit(this);" />
onclick="返回 ConfirmSubmit(this);" />
function ConfirmSubmit(sender)
{
sender.disabled = true;
var displayValue = sender.style.
sender.style.display = 'none'
if (confirm('Seguro que desea entregar los paquetes?')) {
sender.disabled = false
return true;
}
sender.disabled = false;
sender.style.display = displayValue;
return false;
}
