8

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

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

4 回答 4

21

将按钮更改为：

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

小提琴

于 2013-06-03T18:45:29.330 回答
1

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

onclick="return 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;
    }
于 2016-06-13T05:18:55.397 回答
0

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');
}
于 2013-06-03T19:20:34.597 回答
0

这是另一个使用 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>
于 2013-06-03T18:58:00.000 回答