hide button IMMEDIATELY

Is there a way to give a higher "priority" or a speedier "paint refresh" to a button on a web page?


I have a button that, when clicked, I want to hide it IMMEDIATELY -- before any attempt by the client to initiate a round-trip to the server (which clicking the button does)

Even the javascript method I wrote seems to be ignored.  All the processing seems to want to happen FIRST.


The problem is - when the button is clicked it takes a while for the page to process everything.  The user does not wait patiently.  Instead, they click the button several times more, resulting in unwanted behavior.

So what I want to do is AS SOON AS the user clicks the button, the first time, I want to hide the button so that they cannot click on the button again.
LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
Advertise Here
 
Tapan PattanaikConnect With a Mentor Senior EngineerCommented:
0
 
Dave BaldwinFixer of ProblemsCommented:
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>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
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>

Open in new window

Right click on the image and download it.
green progress bar
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Go Premium
 
Tom KnowltonWeb developerAuthor Commented:
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" />

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
Tom KnowltonWeb developerAuthor Commented:
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.
0
 
Dave BaldwinFixer of ProblemsCommented:
I don't have asp.net, just general HTML and javascript.  Someone else will have to provide that for you.
0
 
Tom KnowltonWeb developerAuthor Commented:
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>

Open in new window

0
 
Tom KnowltonWeb developerAuthor Commented:
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>

Open in new window

0
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
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.
0
 
Tom KnowltonWeb developerAuthor Commented:
Okay.

I'll see what I can do.
0
 
Tom KnowltonWeb developerAuthor Commented:
I am still stuck.

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

<form method="post" action="Main.aspx?MenuId=534&amp;AcqCalculatorID=47-1" id="frmMain" enctype="multipart/form-data">
0
 
Dave BaldwinFixer of ProblemsCommented:
With plain javascript, you would add an 'onsubmit'...

<form method="post" action="Main.aspx?MenuId=534&amp;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.
0
 
Tom KnowltonWeb developerAuthor Commented:
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...';"
0
 
Dave BaldwinFixer of ProblemsCommented:
Glad you got it working.  I'm curious what that looks like in the "View Source" that the browser actually sees.
0
 
Tom KnowltonWeb developerAuthor Commented:
I'm curious what that looks like in the "View Source" that the browser actually sees.

It looks like this:

<input type="button" name="ctl09$btnSubmit" value="Save &amp; Submit -  Tom" onclick="this.disabled = true; this.value = 'Submitting...';__doPostBack('ctl09$btnSubmit','')" id="ctl09_btnSubmit">


This part:

__doPostBack('ctl09$btnSubmit','')

Gets added later on by ASP.NET -- which allows the submit button to be disabled AND still allows the postback to occur.  Whereas, normally if you disabled the button it would prevent the postback from happening.
0
 
Dave BaldwinFixer of ProblemsCommented:
Thanks for the details.  That makes sense that way with just the normal HTML and javascript to look at.
0
 
Tom KnowltonWeb developerAuthor Commented:
no problemo : )

Thanks for your time spent on this!
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.