Hai all,
I have a web application HTML-PHP monitoring to display some Status, where the Submit button to refresh the status, the process background is heavy enough, so I want if someone have just clicking the button at (for example) 12:00:00, then he/she can do/able next clicking the button at 12:01:00 (one minute just one click).
after he/she click the button, maybe the button can be disabled function, after pass one minute, the button is enable click again.
thank you very much.
Just a suggestion, but if you're going to go through the trouble to write the code to rate-limit the submit button by using a client-side timer (setTimeout), why not just remove the update button all together, and make the page auto-update at your pre-defined interval?
Here's some sample code in jQuery (since jQuery offers some great cross-browser AJAX support)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<scrypt type="text/javascript">
$(function(){
// On page load...
updateStatus();
})
function updateStatus(){
$('#status').load('/url/to/status/display.php');
setTimeout(updateStatus, 60000) // 60,000 miliseconds = 1 minute
}
</script>
</head>
<body>
<div id="status">
<!-- whatever is in /url/to/status/display.php will be loaded here -->
</div>
</body>
</html>
To do this pure javascript, you can simply capture the click event, disable the button and enable it again after a timeout, the below code is using jQuery and assuming your button has an id 'button' (<button id="button">Click!</button> or if it is an input: <input type='button' id="button">Click!</input>)
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript'>
$('#button').click( function(){
$(this).attr('disabled', 'disabled');
setTimeout(enableButton, 1000);
return true; //make sure default click event happens
});
var enableButton = function(){
$('#button').removeAttr('disabled');
}
</script>
You say the progress is quite heavy, note that even though people can not press the button more then once a minute (if they have javascript enabled that is) they can still disable javascript and press the button as much as they want, or call the url directly as many times as they feel like.
EDIT Added full HTML to script
wtf... people is jQuery addicted.
<input id="btn" type="button" value="click me" onclick="doSomething();"/>
<script>
function doSomething() {
document.getElementById("btn").disabled=true;
setTimeout('document.getElementById("btn").disabled=false;',60000);
// do your heavy stuff here
}
</script>