making image clickable only once

[spicymango]

Hi,

I have an image on which when user click I submit my form after doing basic javascript validation.

I want user not to be able to click once they clicked on the image so that they don't submit it twice. Right now I disable the image once they click it.
I was wondering is there any other way I can do that, is there any way to make image click able only once?

Thanks

 

[feherke]

Hi

I would say, your approach is wrong.

A [tt]form[/tt] can be submitted in more than one ways. Instead of stopping the image clicking, better stop or alter the [tt]form[/tt] submitting :
[ul]
[li]return [tt]false[/tt] from the event handler :

theform[teal].[/teal]onsubmit[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal] [b]return[/b] [b]false[/b] [teal]}[/teal]

[/li]
[li]direct it to an error page :

theform[teal].[/teal]action[teal]=[/teal][green][i]'/error_pages/do_not_submit_twice.htm'[/i][/green]

[/li]
[/ul]


Feherke.

http://free.rootshell.be/~feherke/

 

[spicymango]

thanks , how would I know that user is submitting the form second time and already has submitted before

 

[feherke]

Hi

how would I know that user is submitting the form second time and already has submitted before

You can not know it for sure on the client side.

If you are asking how to combine the code I suggested above in your current validator, then I would do something like this :

[b]<form[/b] [maroon]action[/maroon][teal]=[/teal][green][i]"/form/processor.php"[/i][/green] [maroon]onsubmit[/maroon][teal]=[/teal][green][i]"check(this)"[/i][/green][b]>[/b]

[b]function[/b] [COLOR=darkgoldenrod]check[/color][teal]([/teal]theform[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal](![/teal][COLOR=darkgoldenrod]your_validator_function[/color][teal]([/teal]theform[teal]))[/teal]
    [b]return[/b] [b]false[/b]

  [COLOR=darkgoldenrod]setTimeout[/color][teal]([/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
    theform[teal].[/teal]onsubmit[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal] [b]return[/b] [b]false[/b] [teal]}[/teal]
    theform[teal].[/teal]action[teal]=[/teal][green][i]'/error_pages/do_not_submit_twice.htm'[/i][/green]
  [teal]}[/teal][teal],[/teal][purple]100[/purple][teal])[/teal]

  [b]return[/b] [b]true[/b]
[teal]}[/teal]

[small][maroon]Warning[/maroon] The above code was not tested[/small]

Feherke.

http://free.rootshell.be/~feherke/

 

[spicymango]

In my case if I just stop them from clicking twice, it will solve my problem. with out having to put more logic.

But if once I disable the image, if the user retrun to that same page again using browser back button that image is still disabled. I want it to be enabled then.

 

[Velan07]

When the user click on the image store a boolean value to some hidden text box. if the user click second time check the hidden text box boolean condition.

Based on the above validation, you can avoid the second click on the submit button.

 

[spicymango]

right now I have code like this.

<a href="javascript:formSubmit('Place','Submit Order');"><img src="/images/b_PlaceOrder.gif" border=0></a>

if I change it to following to make image a form element

<a href="javascript:formSubmit('Place','Submit Order');"><input type=image id=submitorder src="/images/b_PlaceOrder.gif" border=0></a>

Look like IE does not like it at all, it does not even call the function.

 

[feherke]

Hi

<a href="javascript:formSubmit('Place','Submit Order');"><input type=image id=submitorder src="/images/b_PlaceOrder.gif" border=0></a>

That is plain stupid. The [tt]input[/tt] [tt]type="image"[/tt]'s default behavior is to submit the [tt]form[/tt]. So there two events are trying to submit and you are stopping only one of them.


Feherke.

http://free.rootshell.be/~feherke/

 

[spicymango]

ok then please tell me how can I disable the he image right now I have

<a href="javascript:formSubmit('Place','Submit Order');"><img src="/images/b_PlaceOrder.gif" border=0></a>

I wonder if I put my image in a DIV and disable that div in my Javascript function. But can you disable DIV ? I know you can make hidden/visible but don't know if you can disable it?

 

[feherke]

Hi

You can disable only [tt]form[/tt] elements.

If you want to play with image disabling, the pieces for the puzzle are already spread over this thread.

If you want to implement what I suggested, tell us what kind of problem you met and show us more code.

Feherke.

http://free.rootshell.be/~feherke/

 

[spicymango]

ok i am doing this. I have put my image in a div. and when someone click on image, i change the
inner html. It seems to working fine, only thing when I change the inner html image go one line below.


<div id="div1"><a href="javascript:formSubmit('Place','Submit Order');"><img src="/images/b_PlaceOrder.gif" border=0></a></div>

var replace="<img src='/images/b_submitcancel_eng.gif";
document.getElementById('div1').innerHTML=replace;