hide button IMMEDIATELY

Dave BaldwinFixer of ProblemsCommented: 2013-06-27

Try this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>hideButton</title>
<script type="text/javascript">
<!--
function hideButton()
{
// hide div
document.getElementById('theButton').style.visibility = 'hidden';
document.getElementById('theButton').style.display = 'none';
// do other stuff here
}
// -->
</script>
</head>
<body>


<div id="theButton">
<input type="button" onclick="hideButton()" value="Click Me" />If you click this button, it will disappear.</div>
</body>
</html>

LVL 22

Tapan PattanaikSenior EngineerCommented: 2013-06-27

Hi knowlton,

How to disable an ASP.NET button when clicked:

http://weblogs.asp.net/jeffwids/archive/2009/10/06/how-to-disable-an-asp-net-button-when-clicked.aspx

Hide a submit button when clicked and show loading message using jQuery and asp.net:

http://reddybrek.com/post/Hide-a-submit-button-when-clicked-and-show-loading-message-using-jQuery-and-aspnet.aspx

http://forums.asp.net/t/1371974.aspx

Dave BaldwinFixer of ProblemsCommented: 2013-06-27

This one is better because it loads an animated GIF that shows until the next page gets loaded.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>hideButton</title>
<script type="text/javascript">
<!--
function hideButton()
{
// hide div
var loadgif = "<img alt='x' src='progressbar_green.gif' />";

document.getElementById('theButton').innerHTML = loadgif;
// do other stuff here
}
// -->
</script>
</head>
<body>


<div id="theButton">
<input type="button" onclick="hideButton()" value="Click Me" />If you click this button, it will disappear.</div>
</body>
</html>

Right click on the image and download it.

Tom KnowltonWeb developerAuthor Commented: 2013-06-27

The button in question is a submit button. the submit still needs to happen, but AFTER the button is hidden.

Right now it goes like this:

-click button
-process server stuff
-hide button

I need it to do this:
-click button
-hide button
-process server stuff

"hide button" must be atomic. Nothing should process until the button is hidden.

<asp:Button ID="btnSubmit" runat="server" Text="Save & Submit -  Tom"  OnClick="btnSubmit_Click" />

Dave BaldwinFixer of ProblemsCommented: 2013-06-27

I think for it to work properly, you need to put it in an 'onsubmit' in the <form> tag. Not in an 'onclick' in the submit button.

Tom KnowltonWeb developerAuthor Commented: 2013-06-27

I think for it to work properly, you need to put it in an 'onsubmit' in the <form> tag. Not in an 'onclick' in the submit button.

Please provide sample asp.net code showing what you mean.

Dave BaldwinFixer of ProblemsCommented: 2013-06-27

I don't have asp.net, just general HTML and javascript. Someone else will have to provide that for you.

Tom KnowltonWeb developerAuthor Commented: 2013-06-27

Okay.

What are some reasons why a client-side command to HIDE a button would be ignored when the OnClick for that same button fires?

<script type="text/javascript">

    $(document).ready(function () {

        $('input [id*="btnSubmit"]').click(function () {
            $(this).hide();
      //      alert("hide");
        });

    });                                      

</script>

Tom KnowltonWeb developerAuthor Commented: 2013-06-27

Here is the rendered HTML for the button control:

<<td>
                        <span id="ctl09_spnSubmitBtn" class="button">
                            <input type="submit" name="ctl09$btnSubmit" value="Save &amp; Submit -  Tom" id="ctl09_btnSubmit">
                           
                        </span>
                    </td>

Dave BaldwinFixer of ProblemsCommented: 2013-06-27

When you click on a 'submit' button, the event goes to the form it seems and not that button. Which is why the javascript needs to be in 'onsubmit' in the <form> tag. In other questions, putting an 'onclick' in the 'submit' button never seemed to work.

I think that the same sequence is probably true in jQuery even though it is much less obvious which is why I'm not that fond of jQuery. Try attaching your code to the form tag instead of the submit button.

Note that you might want to do any javascript or jQuery form validation Before you hide the submit button.

Tom KnowltonWeb developerAuthor Commented: 2013-06-27

Okay.

I'll see what I can do.

Tom KnowltonWeb developerAuthor Commented: 2013-06-28

I am still stuck.

Here is the current <form> tag. How would I modify it?

<form method="post" action="Main.aspx?MenuId=534&AcqCalculatorID=47-1" id="frmMain" enctype="multipart/form-data">

Dave BaldwinFixer of ProblemsCommented: 2013-06-28

With plain javascript, you would add an 'onsubmit'...

<form method="post" action="Main.aspx?MenuId=534&AcqCalculatorID=47-1" id="frmMain" enctype="multipart/form-data" onsubmit="hideDiv();">

That is also where you would include a javascript validation. If you have jQuery 'attached' to "frmMain", you may already have something that you can edit to hide the button.

Tom KnowltonWeb developerAuthor Commented: 2013-06-28

This link ended-up being my final key to obtaining a solution:

http://encosia.com/disable-a-button-control-during-postback/

My button code in the markup looks like this now:

<asp:Button ID="btnSubmit" UseSubmitBehavior="false" OnClientClick="this.disabled = true; this.value = 'Submitting...';" runat="server" Text="Save & Submit - Tom" OnClick="btnSubmit_Click" />

Notice:

UseSubmitBehavior="false"

in combination with this event:

OnClientClick="this.disabled = true; this.value = 'Submitting...';"

Dave BaldwinFixer of ProblemsCommented: 2013-06-28

Glad you got it working. I'm curious what that looks like in the "View Source" that the browser actually sees.