locking onClick

hey all,
i'm working on this page where there's an application. if you fill out the application and click 'submit' you go to the next page, very exciting stuff. on the left side of the page there are two options for other applications. if you fill in part of the present app and then click one of these links, it auto-loads your data into the new app. all of this works fine.

the problem: if the user clicks on the link, it loads a backend page just to grab the info before loading the new app. if while the backend page is loading (a second) the user reclicks that link, they go to page two of the current app and not to the new app.

is it possible to do an onclick function that once they click the link it locks/kills the link? this would prevent them from doing the double click.

thanks in advance,
mrb.

Hey mrboyer79

Assuming your button has an id of sButton set it to be disabled like so:

sButton.disabled = true;

When you're finished processing switch it on if you need to with:

sButton.disabled = false;

Cheers
Joe

Hey mrboyer79

Assuming your button has an id of sButton set it to be disabled like so:

sButton.disabled = true;

When you're finished processing switch it on if you need to with:

sButton.disabled = false;

Cheers
Joe


thanks joe, but i think i may have confused the situation. here's the code:

<a href="##" onclick="javascript: document.appname.temp_code.value='#get_new_app.code#'; document.appname.submit();"><img src="new_app.gif" border="0"></a>

it's an image with a link around it. how would i work your code into this?

thanks!

Insert this into a div and then whenever it's disabled just show the image.

thanks joe, but i think i may have confused the situation. here's the code:

<a href="##" onclick="javascript: document.appname.temp_code.value='#get_new_app.code#'; document.appname.submit();"><img src="new_app.gif" border="0"></a>

it's an image with a link around it. how would i work your code into this?

thanks!

If you don't want to use a div as explained by BarrMan, just disable both the link and the image. Give them both id's and then set them to 'disabled = true'. To make it a bit simpler you could use class switching.

The CSS:

.sLinkBefore
{
disabled:false;
}

.sImgBefore
{
disabled:false;
}


.sLink
{
disabled:true;
}

.sImg
{
disabled:true;
}

The HTML:

<a id ="link1" class = "sLinkBefore" href="##" onclick="javascript: document.appname.temp_code.value='#get_new_app.code#'; document.appname.submit(); switchClass(this.disabled)"><img id = "img1" class = "sImgBefore" src="new_app.gif" border="0"></a>

The Script:

<script language = "javascript">

function switchClass(sDisabled)
{
if (sDisabled ==false)
{
img1.className = sImg;
link1.className = sLink;
}

}

//Then when your process has finished and if you want to switch the button back on again

function sEnable(sFinished)//<--pass in a boolean argument here from your background function and make sure its finished processing
{
if (sFinished ==true)
{
img1.className = sImgBefore;
link1.className = sLinkBefore;
}
}

</script>

Not tested, but should work.

Cheers!
Joe