it-swarm.com.de

Schaltfläche nach Klick ausblenden (mit vorhandenem Formular auf Seite)

Ich versuche, eine Schaltfläche (nicht innerhalb von Formular-Tags) auszublenden, nachdem darauf geklickt wurde. Unten ist der vorhandene Code. Alle Lösungen, die ich ausprobiert habe, beeinträchtigen entweder die Funktionalität oder stören das Formular auf der Seite.

Der Inhalt zwischen den DIV-Tags hidden-dev wird ausgeblendet, bis auf die Schaltfläche am unteren Rand des Codes geklickt wird. Wenn Sie auf diese Schaltfläche klicken, werden dem Benutzer alle verbleibenden Inhalte angezeigt.

Sobald der Inhalt angezeigt wird, kann die Schaltfläche "Verfügbarkeit prüfen" nicht verwendet werden. Ich möchte sie daher ausblenden (insbesondere, weil die Schaltfläche "Abschicken" für das Kernformular angezeigt wird Seite.

Hier ist der vorhandene Code, der alles richtig macht (außer den Button nach dem Klick auszublenden) ...

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

Ändern Sie die Schaltfläche in:

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

GEIGE

Oder noch besser, verwenden Sie einen richtigen Ereignishandler, indem Sie die Schaltfläche identifizieren:

<button id="show_button">Check Availability</button>

und ein Skript 

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

GEIGE

14
adeneo

Das ist meine Lösung. Ich verstecke und bestätige dann die Prüfung

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

CSS-Code:

.hide{
display:none;
}

.show{
display:block;
}

HTML Quelltext:

<button onclick="block_none()">Check Availability</button>

Javascript-Code:

function block_none(){
 document.getElementById('hidden-div').classList.add('show');
document.getElementById('button-id').classList.add('hide');
}
0
user2107469

Hier ist eine andere Lösung mit Jquery. Ich finde es etwas einfacher und ordentlicher als Inline-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>
0
TheSnooker