点击后隐藏按钮(页面上有现有表单)
Hide Button After Click (With Existing Form on Page)
我试图隐藏一个按钮(不在表单标签内)后,它已被点击。下面是现有的代码。我尝试过的所有解决方案要么破坏了功能,要么干扰了页面上的表单。
DIV hidden-dev标记之间的内容将被隐藏,直到单击代码底部附近的按钮。单击该按钮后,所有剩余的内容将显示给用户。
一旦内容显示,没有使用按钮"检查可用性",所以我想隐藏它(特别是因为提交按钮出现在核心表单,这是令人困惑的看到这两个在完整长度的页面的底部。
这是现有的代码,做一切正确(除了隐藏按钮后点击)…
<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>
小提琴
或者更好的是,通过识别按钮来使用合适的事件处理程序:
<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>
小提琴
这是我的解决方案。隐藏,然后确认检查
onclick = "返回ConfirmSubmit(这);"/>
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;
}
这是另一个使用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>
CSS代码:
.hide{
display:none;
}
.show{
display:block;
}
Html代码:<button onclick="block_none()">Check Availability</button>
Javascript代码:
function block_none(){
document.getElementById('hidden-div').classList.add('show');
document.getElementById('button-id').classList.add('hide');
}
你可以使用
Html<button class="btn-plus" onclick="afficherTexte(<?php echo $u["id"]."2" ?>,event)">+</button>
Java脚本function afficherTexte(id,event){
var x = document.getElementById(id);
x.style.display = "block";
event.target.style.display = "none";
}
相关文章:
- 使用javascript取消隐藏和隐藏表单中的某些元素
- 提交时隐藏RSForm表单
- 添加和删除隐藏字段数组中的值,而不提交表单
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- 我的表单上的SpringWebFlow2中的每个转换都需要隐藏按钮吗
- 在提交时设置表单隐藏值
- 用第一个表单值(HTML、Javascript)填充第二个表单隐藏字段
- Javascript表单隐藏可见操作
- 可以'无法将表单隐藏在JS中
- 获取函数的表单隐藏变量
- jquery ui模式框中的表单隐藏后,键盘将不再被调用
- 获取从函数到 php 的表单隐藏变量
- 将表单隐藏字段变量从一个函数传递到另一个函数
- 在iFrame(不同域)表单隐藏字段中抓取父级引用
- 表单隐藏值不工作
- 从复选框中获取值-将其发送到表单(隐藏字段)
- HTML表单隐藏变量不显示在php
- 在提交前输入lat和lng值到表单隐藏字段
- 使用按钮 ID 更新表单隐藏字段值
- HTML表单隐藏/显示基于Div