Question

我试图在点击后隐藏按钮（不在表单标签内）。以下是现有代码。我尝试过的所有解决方案都会破坏功能或干扰页面上的表单。

隐藏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>

Answer 1

将按钮更改为：

<button onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">Check Availability</button>

FIDDLE

甚至更好，通过识别按钮使用适当的事件处理程序：

<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>

FIDDLE

Answer 2

这是使用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>

Answer 3

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');
}

Answer 4

这是我的解决方案。我隐藏然后确认检查

onclick =“return ConfirmSubmit（this）;” /＆GT;

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;
    }

单击后隐藏按钮（在页面上使用现有表单）

4 个答案: