Question 202255 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Disable Button For X Seconds After Page Load With Error Message If Clicked Too Early

I’m trying to delay the functionality of a Submit button for a few seconds after a page loads. That part I have working.

Where I’m stuck is I’d like an "error" message to appear if the button is clicked while it’s disabled. And then have the message disappear once the button is no longer disabled.

I’m having trouble getting this to work. My thought was to use a "click" event listener, which doesn’t work while the button id disable — which defeats the purpose.

Here’s the html

<input type="submit" class="submitbtnstyle" id="submitbnid" value="Next"></input>
<div id="button-error"></div>

Here’s the working disable/enable function…

window.onload = (submitDelay);

function submitDelay(){
    document.getElementById("submitbnid").disabled = true;
    
    setTimeout(function() {
        document.getElementById("submitbnid").disabled = false;
    }, 3000);
    
}

And here’s the error message that I haven’t quite figured how to make work with the disable button and/or combine with the above script.

document.getElementById("submitbnid").addEventListener("click", ButtonError);

function ButtonError(){
        document.getElementById('button-error').innerHTML = 'Oops, Too Fast. Try Again in 2 seconds.';

        setTimeout(function() {
        document.getElementById('button-error').innerHTML = '';
    }, 3000);
    
}

For reference, the purpose of this delay is because I have a hidden form field that dynamically updates the value after searching/finding an id in a first-party cookie that is set in the browser. There is a slight delay placed for this process as the cookie has to be first set prior to searching for and adding this id.

So perhaps a better strategy is not to arbitrarily disable the submit button for x seconds, but rather somehow check to see if the id is updated in the hidden field. But I’m not entirely sure how to go about that approach. So I’m resorting to a 3 second delay, which should not cause an issue for the majority of users.

window.onload = (submitDelay);

function submitDelay() {
  document.getElementById("submitbnid").disabled = true;

  setTimeout(function() {
    document.getElementById("submitbnid").disabled = false;
  }, 3000);

}

document.getElementById("submitbnid").addEventListener("click", ButtonError);

function ButtonError() {
  document.getElementById('button-error').innerHTML = 'Oops, Too Fast. Try Again in 2 seconds.';

  setTimeout(function() {
    document.getElementById('button-error').innerHTML = '';
  }, 3000);
}
<input type="submit" class="submitbtnstyle" id="submitbnid" value="Next"></input>
<div id="button-error"></div>

Edit: here is the hidden field that gets updated to a random letter/number string, where {clickid} is the default value:

<input type="hidden" name="clickid" value="{clickid}">
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Per @Geshode advice, I did the following to check if the default value of the form field was changed. If not, then display message and prevent default behavior of submit button. Once a couple seconds passes after the error message, the button will work as normally and (I assume) will check again if the value has changed when the user hits Submit.

    Thanks for the help and suggestions from all.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){ 
  $rtclid = $('#zipform input[name=clickid]');
  $rtclid.data('default',$rtclid.val());
});

$('#zipform').submit(function(){
  $form = $(this).closest('form');
  $rtclid = $('input[name=clickid]', $form);
  if ($rtclid.val() === $rtclid.data('default')) {
     event.preventDefault();
    document.getElementById('button-error').innerHTML = 'Oops, Too Fast. Try Again in 2 Seconds.';
    setTimeout(function() {
    document.getElementById('button-error').innerHTML = '';
    document.getElementById('button-goodtogo').innerHTML = 'Ok, try now 👍';
    }, 3000);

  }
});

    .

    <input type="hidden" name="clickid" value="{clickid}" data-default="{clickid}">
<div id="button-error"></div><div id="button-goodtogo"></div>

  2. 0

    Because disabled elements won’t trigger any mouse events, this is a little bit finicky to achieve.

    But it is still possible, here’s a workaround:

    1. Wrap your button in another element, such as this <span>
    <span id="button-wrapper">
  <input type="submit" class="submitbtnstyle" id="submitbnid" value="Next" />
</span>
    1. Instead of adding the error click event to the button, adding it to the wrapper.
    document.getElementById("button-wrapper").addEventListener("click", ButtonError);
    1. Make the button click-through when it’s disabled using CSS, so the wrapper could receive the click event when the button is disabled.
    #submitbnid:disabled {
  pointer-events: none;
}
    1. 3 seconds after the page is loaded, remove the error click event from the wrapper when enabling the button
    setTimeout(function() {
  document.getElementById("submitbnid").disabled = false;
  document.getElementById("button-wrapper").removeEventListener("click", ButtonError);
}, 3000);

    window.onload = (submitDelay);

function submitDelay() {
  document.getElementById("submitbnid").disabled = true;

  setTimeout(function() {
    document.getElementById("submitbnid").disabled = false;
    document.getElementById("button-wrapper").removeEventListener("click", ButtonError);
  }, 3000);

}

document.getElementById("button-wrapper").addEventListener("click", ButtonError);

function ButtonError() {
  document.getElementById('button-error').innerHTML = 'Oops, Too Fast. Try Again in 2 seconds.';

  setTimeout(function() {
    document.getElementById('button-error').innerHTML = '';
  }, 3000);
}
    #submitbnid:disabled {
  pointer-events: none;
}
    <span id="button-wrapper">
  <input type="submit" class="submitbtnstyle" id="submitbnid" value="Next" />
</span>
<div id="button-error"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search