点击后隐藏按钮(页面上有现有表单)

Hide Button After Click (With Existing Form on Page)

本文关键字：表单 隐藏 按钮      更新时间：2023-09-26

我试图隐藏一个按钮(不在表单标签内)后，它已被点击。下面是现有的代码。我尝试过的所有解决方案要么破坏了功能，要么干扰了页面上的表单。

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";
}
相关文章：