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

1

これが私の解決策です。I 非表示にして確認する

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

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 に答える
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 に答える