Link to home
Start Free TrialLog in
Avatar of MartinCMS
MartinCMSFlag for United States of America

asked on

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.



Avatar of justinbillig
justinbillig

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>
Avatar of MartinCMS

ASKER

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.
SOLUTION
Avatar of justinbillig
justinbillig

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi @dakyd, that's exactly what I want!  Good effort @justinbillig.

Thank you both!

dakyd i was never good at assigning functions to event handlers

is it new function( ) or just function( )
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.