Disable submit button between two time period

Viewed 1958

I need to disable submit button from 10.25 am to 11.25 am. This is the submit button below:

<input type="submit" id="submit" name="submit">

I am using this script. but it is not working.I am unable to find out where the problem is:

<script>
 window.addEventListener("load", function(){
 var currentTime = new Date();
 var hours = currentTime.getHours();
 var minutes = currentTime.getMinutes();
 var t =currentTime.getHours()  + ":" + currentTime.getMinutes();

 var newButton = document.getElementById("submit");

 if(t >= 10:25 && t <= 11:25) {
   newButton.style.display = "none";
 }
 else {
   newButton.style.display = "block";
 }
 }, false);
</script>
4 Answers

Based on your code, I am assuming that you intend to hide the button instead of disabling it.

To rectify the time validation logic, you could compare the hours and minutes components separately rather than as hh:mm string.

In the snippet below I have broken the condition down into two parts:

  • Time is between 10:25 and 10:59
  • Time is between 11:00 and 11:25

Also, once you have rectified this logic, you might also consider running this function every one second (or one minute), rather than just on page load. This will ensure that the button gets hidden even if the user loads the page before 10:25 - as the function will run at 10:25 and will hide/disable it.

window.addEventListener("load", function() {
  // Check time and update the button's state every second.
  setInterval(updateSubmitButtonState, 1000);
}, false);

function updateSubmitButtonState() {
  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();

  var newButton = document.getElementById("submit");
  
  // Between 10:25 and 10:59
  // or Between 11:00 and 11:25
  if ((hours == 10 && minutes >= 25) 
    || (hours == 11 && minutes <= 25)) {
    newButton.style.display = "none";
  } else {
    newButton.style.display = "block";
  }
}
<input type="submit" id="submit" name="submit">

  1. You can use the boolean value of the condition !(t >= '10:25' && t <= '11:25' ) to set the property disabled of button

 var currentTime = new Date();
 var hours = currentTime.getHours();
 var minutes = currentTime.getMinutes();
 var t =currentTime.getHours()  + ":" + currentTime.getMinutes();

 $("#submit").prop("disabled",!(t >= '10:25' && t <= '11:25' ))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="submit" name="submit">

$('#submit').prop('disabled', true); will disable the button

The time value you used is a string type variable which can't be used without a quote or double quote. try this one.

 var currentTime = new Date();
 var hours = currentTime.getHours();
 var minutes = currentTime.getMinutes();
 var t =currentTime.getHours()  + ":" + currentTime.getMinutes();

 var newButton = document.getElementById("submit");

 if(t >= '10:25' && t <= '11:25') {
   newButton.style.display = "none";
 }
 else {
   newButton.style.display = "block";
 }
Related