How to Disable a Button Using JavaScript

Question

Hi,
I want to disable a button based on a condition. I am using a template based button (button Alternate 3). I am using Theme 3. I have created buttons of type item but when I view the source there is no button name populated in the html. My javascript is not disabling the button.
Please advice.
Thanks
sukarna

Answer 1

Hi,
You can't disable an A tag (FireFox, for example, will still let you click the "link").
What you could do would be to create a second button that doesn't work and only show one of these at a time.
I have done that here: [http://apex.oracle.com/pls/otn/f?p=35917:30]
The Button has been based on a custom Button Template. The definition for this is:
<table class="t10Button" cellspacing="0" cellpadding="0" border="0"  summary="" id="#BUTTON_ATTRIBUTES#">
<tr>
<td class="t10L"><a href="#LINK#"><img src="#IMAGE_PREFIX#themes/theme_10/button_left.gif" alt="" width="4" height="24" /></a></td>
<td class="t10C"><a href="#LINK#">#LABEL#</a></td>
<td class="t10R"><a href="#LINK#"><img src="#IMAGE_PREFIX#themes/theme_10/button_right.gif" width="4" height="24" alt="" /></a></td>
</tr>
</table>
<table class="t10Button" cellspacing="0" cellpadding="0" border="0"  summary="" id="#BUTTON_ATTRIBUTES#_DISABLED" style="display:none">
<tr>
<td class="t10L"><img src="#IMAGE_PREFIX#themes/theme_10/button_left.gif" alt="" width="4" height="24" /></td>
<td class="t10C" style="padding:1px 4px;">#LABEL#</td>
<td class="t10R"><img src="#IMAGE_PREFIX#themes/theme_10/button_right.gif" width="4" height="24" alt="" /></td>
</tr>
</table>This actually creates two buttons - the first one, which actually has the link, is visible to start with. The second one, which has no link at all, starts off as invisible.
Both buttons use the #BUTTON_ATTRIBUTES# setting to get the button name into the ID - though the second button adds "_DISABLED" to this so that it has a unique, but known, ID
Then it is just a case of calling a function to show one button and hide the other or vice versa:
<script type="text/javascript">
function disableButton()
document.getElementById('P30_TEST_BUTTON').style.display = "none";
document.getElementById('P30_TEST_BUTTON_DISABLED').style.display = "block";
function enableButton()
document.getElementById('P30_TEST_BUTTON').style.display = "block";
document.getElementById('P30_TEST_BUTTON_DISABLED').style.display = "none";
</script>Another possibility is to add the #BUTTON_ATTRIBUTES# to the TABLE tag instead of the A tag in a new button template (based on a copy of the normal Button template). Then, the ID value would be applied to entire "button". You can then make this invisible using:
$x('BUTTON_ID').style.visibility = 'hidden';The button will be removed from the page as far as the user is concerned, so they can not click the link.
Andy