rapid clicking

[envexlabs]

Hey,

 

I have a button that fires a ajax call and executes some php code.

 

This is the ajax call:

 

function addtocart_landing(target_div,file,check_div)
{
var MyHttpRequest = false;
var ErrorMSG = 'Sorry - No XMLHTTP support in your browser, buy a newspaper instead';
if(check_div)
{
var check_value = document.getElementById(check_div).value;
}
else
{
var check_value = '';
}
if(window.XMLHttpRequest) // client use Firefox, Opera etc - Non Microsoft product
{
try
{
MyHttpRequest = new XMLHttpRequest();
}
catch(e)
{
MyHttpRequest = false;
}
}
else if(window.ActiveXObject) // client use Internet Explorer
{
try
{
MyHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
MyHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
MyHttpRequest = false;
}
}
}
else
{
MyHttpRequest = false;
}

if(MyHttpRequest) // browser supports httprequest
{
var random = Math.random() * Date.parse(new Date()); // make a random string to prevent caching

var file_array = file.split('.'); // prepare to check if we have a query string or a html/htm file
if(file_array[1] == 'php') // no query string, just calling a php file
{
  var query_string = '?rand=' + random;
}
else if(file_array[1] == 'htm' || file_array[1] == 'html') // calling a htm or html file
{
  var query_string = '';
}
else // we have presumable a php file with a query string attached
{
  var query_string = check_value + '&rand=' + random;
}


MyHttpRequest.open("get", url_encode(file + query_string), true); // <-- run the httprequest using GET


// handle the httprequest
MyHttpRequest.onreadystatechange = function ()
{
if(MyHttpRequest.readyState == 4) // done and responded
{
//document.getElementById(target_div).innerHTML = 'Product Added to your Cart!'; // display result

window.location = "http://oxygenfit.com/cart.php";

//alert('Product has been added to your cart.');
}
else
{
//document.getElementById(target_div).innerHTML = MyHttpLoading; // still working
}
}
MyHttpRequest.send(null);
}
else 
{
document.getElementById(target_div).innerHTML = ErrorMSG; // the browser was unable to create a httprequest
}
}
// end of "AJAX" function

 

What my problem is, a user can click the button rapidly causing wierd outcomes with the php code.

 

How would i go about stopping this from happening? Some sort of delay maybe?

[rhodesa]

once the button is clicked, disable it until the AJAX response is received. to disable the button, just set it's 'disabled' attribute to true