There is a button on my Ajax form that, when clicked, displays to the user that it is currently "searching" by showing a small loading symbol while the database is being queried.
Upon clicking the submit button, it triggers a function. This function disables the button, gathers the form data, initiates the Ajax call (which is non-asynchronous meaning the code waits for the call to finish before proceeding), and then re-enables the button.
Here's an example of how it works:
function CheckForm()
{
disableButton(document.getElementById("save"));
....... lots of instructions in here ........
....... Loops through every form el .........
//Ajax called
CallAjax(sUrls, sParams);
enableButton(document.getElementById("save"));
}
function disableButton(element)
{
try
{
disabledEl = element.id
disabledElOrigTxt = element.value;
element.value = ' Loading...'
addClass(element, "pleaseWait");
addClass(document.myForm.reset, "resetWait");
element.disabled = true;
document.myForm.reset.disabled = true;
//return true;
}
catch(e)
{
////SHHHHHH
}
}
function enableButton(element, timer)
{
try
{
if(element.value == ' Loading...')
element.value = disabledElOrigTxt;
removeClass(element, "pleaseWait");
removeClass(document.myForm.reset, "resetWait");
element.disabled = false;
document.myForm.reset.disabled = false;
clearTimeout(timer);
return true;
}
catch(e)
{
////SHHHHHH
}
}
// More functions...
This script runs perfectly in Mozilla and IE, however, there seems to be an issue with Chrome. Does anyone know why?
If I add an alert("hi") to the end of the disableButton() function, I can see the button change in Chrome... only when I interrupt the script with an alert. Obviously, this is not a solution.