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.



LVL 8
MartinCMSAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

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.