Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide Button After Click (With Existing Form on Page)

Tags:

javascript

I am trying to hide a button (not inside form tags) after it has been clicked. Below is the existing code. All solutions I have tried either break the functionality or interfere with the form on the page.

The content between the DIV hidden-dev tags is hidden until the button near the bottom of the code is clicked. Once that button is clicked, all of the remaining content is shown to the user.

Once the content is shown, there is no use for the button "Check Availability" so I would like to hide it (especially because the submit button appears for the core form, and it is confusing to see both at the bottom of the full length page.

Here's the existing code that does everything properly (except hide the button after the click)...

 <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>
like image 716
user2449026 Avatar asked Jun 03 '13 18:06

user2449026


People also ask

How do I hide a button on page load?

Set the html button style attribute to display none. Then in document ready function show the button.

How do I hide and display a button?

The hidden attribute hides the <button> element. You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <button> is not visible, but maintains its position on the page.

How do I hide a button in HTML?

To hide an element, set the style display property to “none”.


1 Answers

Change the button to :

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

FIDDLE

Or even better, use a proper event handler by identifying the button :

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

and a script

<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

like image 158
adeneo Avatar answered Sep 22 '22 02:09

adeneo