1

Possible Duplicate:
jquery disable a button for a specific time

I am using PHP to create a website.

On that website, I would like to have a button that the user can only click once every five minutes.

I have already determined that I will be using jQuery for this scripting, and I know that I will need to set a timeout period of five minutes after the user clicks the button. During this timeout period, the button should not be able to be clicked.

What is the process that I should use to enable this functionality?

Best Regards

Community
  • 1
  • 1
user872148
  • 102
  • 3
  • 11
  • What does this have to do with PHP then? And a user can edit your clientside script and make the time limit smaller. – Cyclone Aug 26 '11 at 03:46
  • @rockerest - This question looks different to me than the one you listed as a dup. This is not to just disable a button for a period of time. This is to allow only one click every 5 minutes. Related, but different code to accomplish this question. – jfriend00 Aug 26 '11 at 03:58
  • @jfriend00 It's worded differently, yes, but it's clearly the same intent. The OPs intent is to disable the button for five minutes after it is clicked, and that solution is 90% answered by the question I posted. – rockerest Aug 26 '11 at 22:20

3 Answers3

3

You can do it this way. The user can click the button and then when they do, the button is disabled for the next 5 minutes. After 5 minutes it gets re-enabled and the next time it's clicked, it again disables itself for 5 minutes and so on...

$("#go").click(function() {
    // no more clicks until timer expires
    $(this).attr("disabled", "disabled");

    // do whatever you want on the click here

    // set timer to re-enable the button 
    setTimeout(function() {
        $("#go").removeAttr("disabled");
    }, 5 * 60 * 1000);
});

You can see it work here: http://jsfiddle.net/jfriend00/2scAM/.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • 1
    Watching the time on the server side might be a good idea too. – mu is too short Aug 26 '11 at 04:07
  • Yeah, if you really want a given user to only be able to do something once every five minutes, then it takes a lot more than client-side stuff. It would take user authentication and server-side timers with client UI coordination. Only the server could really enforce this as a simple page refresh or load of the page in another browser will make the button clickable again. – jfriend00 Aug 26 '11 at 04:14
  • I have tested your code it seem not correct. – user872148 Aug 26 '11 at 06:52
  • Changing the timer to 5 seconds for testing purposes (easier to test 5 seconds than 5 minutes), it seems to work fine here: http://jsfiddle.net/jfriend00/MpS8P/. Once you click the button, it stays disabled for 5 seconds and cannot be pressed again. Perhaps you could describe a little more about what you think doesn't work and in what browser? – jfriend00 Aug 26 '11 at 07:01
  • but when i reload page or refresh page it reset button again. how to protect this ? – user872148 Aug 26 '11 at 09:27
  • You can protect from a reload page by setting the time of last push in a cookie and loading that time from the cookie when the page loads. As I said above, if you really want this to work in all cases, you need user authentication and need to implement this time protection on the server. – jfriend00 Aug 26 '11 at 14:35
1

hope this will help you 

 $('#button').attr("disabled", "disabled");
    setTimeout('enableButton()', 5000);

    function enableButton(){
       $('#button').removeAttr('disabled');
    }
Cyclone
  • 17,939
  • 45
  • 124
  • 193
run
  • 1,170
  • 7
  • 14
  • This just disables the button initially (before any clicks) and then re-enables it 5 seconds later. This does not do what the OP asked for. It's the wrong time period and it's not hooked into when the button was clicked at all. – jfriend00 Aug 26 '11 at 03:53
  • @jfriend00 Presumably, the code would be called ON the click event of the button, and the `5000` would be.... whatever 5 minutes is. But yes, I agree with your point: it's [bad] copypasta. – rockerest Aug 26 '11 at 03:55
  • Well, @run didn't specify that this is included in a click handler in the answer so it wasn't obvious to me that that's what was intended. I thought they were just disabling the button for the first 5 seconds of it's life. Also, better to not pass text to setTimeout. – jfriend00 Aug 26 '11 at 04:01
1

Try this

Working demo

$(function(){
   $("#inputButton").click(buttonClickHanlder);

    function buttonClickHanlder(){
        //Do you stuff here
    alert(this.id);
        //Unbind the click event handler, delay 5 mins and then again bind the event handler
        $("#inputButton").unbind('click').delay(5 * 60 * 1000).click(buttonClickHanlder);
    }; 
});
ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124