CODEWITHSUNDEEP
javascriptjqueryhtml
Zanxzan
Zanxzan

Reputation: 1

How to disable a HTML submit button for a certain period of time everyday

I want to disable a button for a certain period of time everyday.

For ex: Let's say, html submit button gets disabled everyday between 11:00am and 4:00 pm.

<script type="text/javascript">

function checkButton() {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();

    //Hide button at 11:00 AM
    if(hours == 11 && minutes == 00) {
        $("#btn").hide();
    }
    //Show button at 04:00 PM
    if(hours == 16 && minutes == 00) {
        $("#btn").show();
    }
}
</script>

HTML submit button reference.

<body>
        <input id="btn" type="submit" value="submit" onload="checkButton()">
</body>

Upvotes: 0

Views: 2311

Answers (5)

Zanxzan
Zanxzan

Reputation: 1

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
    window.addEventListener("load", function(){
     var currentTime = new Date();
     var hours = currentTime.getHours();
     var newButton = document.getElementById("btn");

    if(hours >= 11 && hours <= 18) {
     newButton.style.display = "none";
    }
    else {
     newButton.style.display = "block";
    }
}, false);
        </script>
    </head>
    <body>
        <div>Test</div>
        <input type="submit" id="btn">
    </body>
</html>

Upvotes: 0

LP Devs
LP Devs

Reputation: 74

To check time between 11:00am and 4:00 pm:

let min = hours*60 + minutes;
if(min > 11*60 && min < 16*60) {
  $("#btn").hide();
}else {
  $("#btn").show();
}

And to check this everyday, you should put the checkButton function in a loop, such as by using setInterval function. Such as: for checking every 1 minute:

setInterval(checkButton, 60000);

My solution without Jquery:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <button id="btn">Click me</button>
        <script>
            window.onload = function() {
                let btn = document.getElementById('btn');   

                function checkButton(){
                    let date = new Date();
                    let hours = date.getHours();
                    let minutes = date.getMinutes();

                    let min = hours*60 + minutes;
                    if(min > 11*60 && min < 16*60) {
                      //$("#btn").hide();
                      btn.style.display = 'none';
                      console.log('btn hide');
                    }else {
                      //$("#btn").show();
                      btn.style.display = 'block';
                      console.log('btn show');
                    }
                }

                setInterval(checkButton, 6000);
            }
        </script>
    </body>

</html>

Upvotes: 1

Stephan K&#246;ninger
Stephan K&#246;ninger

Reputation: 314

You currently just check for a point in time, but your description assumes you want to have a time range to be checked. Hence, try the following:

if(hour >= 11 && < 16) { $('#btn').hide() }

Upvotes: 0

Sankar Smith
Sankar Smith

Reputation: 356

Use Php Date function to show the button between the hours.

<?php
$hour=date('H');
if(($hour <=11) || ($hour >=16)) {?>
    <script type="text/javascript">
            $("#button").show();
    </script>
<?php }
?>

Upvotes: -1

Cagdas Can
Cagdas Can

Reputation: 248

You shouldn't check for equality but rather check for dates being between the mentioned hours using < and > operators.

Upvotes: 1

Related Questions