Skip to content Skip to sidebar Skip to footer
Home / Javascript

Hide Button After Click (with Existing Form On Page)

Post a Comment
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 wi

Solution 1:

Change the button to :

<buttononclick="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 

<scripttype="text/javascript">var button = document.getElementById('show_button')
    button.addEventListener('click',hideshow,false);

    functionhideshow() {
        document.getElementById('hidden-div').style.display = 'block'; 
        this.style.display = 'none'
    }   
</script>

FIDDLE

Solution 2:

This is my solution. I Hide and then confirm check

onclick="return ConfirmSubmit(this);" />

functionConfirmSubmit(sender)
    {
        sender.disabled = true;
        var displayValue = sender.style.
        sender.style.display = 'none'if (confirm('Seguro que desea entregar los paquetes?')) {
            sender.disabled = falsereturntrue;
        }

        sender.disabled = false;
        sender.style.display = displayValue;
        returnfalse;
    }

Solution 3:

Here is another solution using Jquery I find it a little easier and neater than inline JS sometimes.

<html><head><scriptsrc="//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><divclass="reform"><formid="reform"action="action.php"method="post"enctype="multipart/form-data"><inputtype="hidden"name="type"value="" /><fieldset>
                content here...
            </fieldset><divclass="hidden-div"id="hidden-div"><fieldset>
                more content here that is hidden until the button below is clicked...
            </fieldset></form></div><spanstyle="display:block; padding-left:640px; margin-top:10px;"><buttonid="chkbtn">Check Availability</button></span></div></body></html>

Post a Comment for "Hide Button After Click (with Existing Form On Page)"