Disable Submit Button For 4 Hours

Question

I've built an ASP.Net MVC 5 application. Within one of the Razor Views, I have a Submit button which the user can click to send out emails and text messages. However, when the user clicks the Submit button, it can take 10 or 15 seconds for the messages to be sent out. Due to this time delay, users sometimes click the Submit button multiple times thinking that the first time clicking the Submit button did not work. Even with displaying warning information to users, NOT to click the Submit button multiple times, they still do so.

I now would like to disable the submit button for 4 hours. I'm able to disable the submit button using some JQuery

$('#myButton').prop('disabled', true);

However, this isn't much help, because if the user revisits the page or refreshes, the button can be clicked again. Instead, what I'd like is for the Submit button to be disabled for 4 hours from when it was initially clicked.

I'm really not sure what is the best way to do this. I know I could store the date time the button was clicked in my database and validate against that, but I'm not sure this is the best method. Perhaps a session variable could be used?

Has anyone ever came across a scenario like this before? Any advice would be greatly appreciated.

Thanks.

A client-side page would not (and should not) have a lifetime of 4 hours. To do this it would be best to store a timestamp when the button will be available again (either in localStorage, or in the session, or a server-side datastore) and then check on the client side for that date passing periodically. — Rory McCrossan, Jun 08 '15 at 13:30
Is your button a server control, like ``? If that is the case, you could implement logic to disable the button when the page loads in the `Page_Init` method of the control, when the 4 hours has not elapsed, and disable it through jQuery immediately like you already are. — Zack, Jun 08 '15 at 13:42
@tgriffiths I'm pretty sure that the two are not mutually exclusive. There is probably some way to disable the button from server code. — Zack, Jun 08 '15 at 15:53

score 0 · Answer 1 · answered Feb 25 '19 at 11:51

The following code is doing what you want.

When you click the button the button is disabled and a cookie is set with the current timestamp.

If your user is staying on the page, the button will enable after the time set in the timeout variable.

If the user is not staying, the timestamp will be read from the cookie and a new timer is started, that will enable the button as soon the four hours have passed.

This is the relevant jQuery Code:

var timeout = 4 * 60 * 60 * 1000; // 4 Hours * 60 Minutes * 60 Seconds * to Milliseconds
if (Cookies.get('disabledBtn') !== undefined) {
  $('#myButton').prop('disabled', true);
  var cookieSet = Cookies.get('disabledBtn');
  var delay = timeout - ($.now() - cookieSet);
  setInterval(function() {
    $('#myButton').prop('disabled', false);
    Cookies.remove('disabledBtn');
  }, delay);
}

$('#myButton').on('click', function() {
  $(this).prop('disabled', true);
  Cookies.set('disabledBtn', $.now());

  setInterval(function() {
    $('#myButton').prop('disabled', false);
    Cookies.remove('disabledBtn');
  }, timeout);
});

Here is a jsFiddle where you can test the code.

In the jsFiddle is also a button to delete the Cookie obviously you don't need the button and the on click listener.

score -1 · Answer 2 · answered Jun 08 '15 at 13:56

-1

Here is an example which disables the button for 3 seconds.

$('#enter').on('click',function(){
    document.getElementById("enter").disabled=true;
    setInterval(function(){document.getElementById("enter").disabled=false;},3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='enter'>Try it</button>

answered Jun 08 '15 at 13:56

depperm

10,606
4
43
67

What happened to 4 hours? – Zack Jun 08 '15 at 14:14
I was expecting he'd be able to change the time to whatever he wanted, the 3 seconds was for testing purposes to see if that's what he wanted, instead of testing with 4 hr (144000000) – depperm Jun 08 '15 at 14:23
1

This works great if the user never changes the page, but the OP explicitly asked how to handle this is a stateful manner and how best to do that – thorkia Jun 08 '15 at 14:57
To take into account page reload use cookies: http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload, but my answer was addressing the issue of "when the user clicks the Submit button, it can take 10 or 15 seconds for the messages to be sent out. Due to this time delay, users sometimes click the Submit button multiple times thinking that the first time clicking the Submit button did not work." – depperm Jun 08 '15 at 15:29
1

@depperm The asker already has a viable solution for disabling the button immediately after the click, so I think your answer is not useful. – Zack Jun 08 '15 at 15:51

Disable Submit Button For 4 Hours

2 Answers2