If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?
COURSE of the MONTH
15 days, 6 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
hide button IMMEDIATELY
Posted on 2013-06-27
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.
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.
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
9-
9
19 Comments
Active today
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>
Active today
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
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
Active today
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>
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.
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" />
Active today
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.
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.
Active today
I don't have asp.net, just general HTML and javascript. Someone else will have to provide that for you.
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?
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>
Here is the rendered HTML for the button control:
<<td>
<span id="ctl09_spnSubmitBtn" class="button">
<input type="submit" name="ctl09$btnSubmit" value="Save & Submit - Tom" id="ctl09_btnSubmit">
</span>
</td>
Active today
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.
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.
I am still stuck.
Here is the current <form> tag. How would I modify it?
<form method="post" action="Main.aspx?MenuId=5
Here is the current <form> tag. How would I modify it?
<form method="post" action="Main.aspx?MenuId=5
Active today
With plain javascript, you would add an 'onsubmit'...
<form method="post" action="Main.aspx?MenuId=5
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.
<form method="post" action="Main.aspx?MenuId=5
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.
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.disabl
Notice:
UseSubmitBehavior="false"
in combination with this event:
OnClientClick="this.disabl
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.disabl
Notice:
UseSubmitBehavior="false"
in combination with this event:
OnClientClick="this.disabl
Active today
Glad you got it working. I'm curious what that looks like in the "View Source" that the browser actually sees.
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 & Submit - Tom" onclick="this.disabled = true; this.value = 'Submitting...';__doPostBa
This part:
__doPostBack('ctl09$btnSub
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.
Active today
Thanks for the details. That makes sense that way with just the normal HTML and javascript to look at.
Featured Post
The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).
In this article we will briefly define each again, and give you directions on how to install them.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Introduction
A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
- CSS
- HTML
- JavaScript
- PHP
- jQuery
- AJAX
Introduction
Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework). Â
The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month15 days, 6 hours left to enroll
741 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.