Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5517
  • Last Modified:

How to disable a image button

How to disable a image button so that it can't be hit twice in quick succession to submit a form.

Let say I have the following three buttons:

<TR>
     <TD align="CENTER"><A href="Transactions_Main_Select.cfm">
     <IMG src="Images/btn_charge_declined.gif" border="0"></A></TD>       
     <TD align="CENTER"><A href="Open_Activities_Select.cfm">
     <IMG src="Images/btn_open_activities.gif" border="0"></A></TD>       
    <TD align="CENTER"><A href="Packing_Slip_Progress_Report.cfm">
    <IMG src="Images/btn_packing_slip_progress_report.gif" border="0"></A></TD>      
</TR>

If it was a submit button in a form, I can do the following to disable it, BUT.....
<form name="form1">
   <input type="text" name="txtbox" value="Dummy">
   <input type="Submit" name="SubmitButton"
     onClick="form1.SubmitButton.disabled=true;">
</form>

Thank you.



0
MartinCMS
Asked:
MartinCMS
  • 3
  • 2
  • 2
2 Solutions
 
justinbilligCommented:
you can do this

<TD align="CENTER"><A href="Packing_Slip_Progress_Report.cfm">
    <IMG src="Images/btn_packing_slip_progress_report.gif" border="0" onclick="this.disabled=true;"></A></TD>    
</TR>


or


<TD align="CENTER"><A href="Packing_Slip_Progress_Report.cfm" onclick="this.childNode.disabled=true;">
    <IMG src="Images/btn_packing_slip_progress_report.gif" border="0"></A></TD>    
</TR>
0
 
MartinCMSAuthor Commented:
Hi @justinbillig,

I've both way and none are working.  I click to button once and quickly click it again.  The system log my click both time.
0
 
justinbilligCommented:
do this then


onclick="this.style.cursor = 'wait';"
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
dakydCommented:
Not sure if this is what you want, but an alternative might be something like this:

     <TD align="CENTER"><A href="Transactions_Main_Select.cfm" onclick="this.onclick = function() {return false;};">
     <IMG src="Images/btn_charge_declined.gif" border="0"></A></TD>

The idea is after you click the link once, an onclick handler is added that cancels any subsequent clicks.  Hope that helps.
0
 
MartinCMSAuthor Commented:
Hi @dakyd, that's exactly what I want!  Good effort @justinbillig.

Thank you both!

0
 
justinbilligCommented:
dakyd i was never good at assigning functions to event handlers

is it new function( ) or just function( )
0
 
dakydCommented:
Well, actually, there are two ways to do it, which is probably part of the confusion:
1) obj.onclick = function() {alert("hello world");};
2) obj.onclick = new Function("alert('hello')");

I prefer the first method because it looks a lot like functions you already know how to define, you just leave out the function's name (though you can also name the function if you really want to).

The second method actually creates a Function object which you can call.  The constructor takes a comma delimited list of parameters followed by a string containing the function's body.  In this case, we have no parameters, so we only need the function body as a string.  But say you need a parameter, you'd do something like this:
  increment = new Function("x", "return (x +1);");
You can now call increment as you would any other user-defined function; it takes a number and returns 1 plus that number.

I found this link a while ago, it might help explain what I'm talking about: http://www.permadi.com/tutorial/jsFunc/  As always, hope that helps.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now