Activate radio buttons on server time

Question

<script language="javascript" type="text/javascript">
if (new Date().getHours() < 11) 
    {
        document.getElementById("r1").checked = true;
    }   else if (new Date().getHours() < 16)
    {
        document.getElementById("r1").disabled = true;
        document.getElementById("r2").checked;
    }
        else if (new Date().getHours() < 21)
    {
        document.getElementById("r1").disabled=true;
        document.getElementById("r2").disabled=true;
        document.getElementById("r3").checked;
    }
</script>

<label class="label_radio" for="radio-01">
    <input name="bdw" id="r1" type="radio"/>11:00 AM
    <input name="bdw" id="r2" type="radio"/>4:00 PM
    <input name="bdw" id="r3" type="radio"/>9:00 PM
</label>

how can i deactivate radio buttons base on the time as specified on my script? it looks like the one stated on the sample from the other part of this tutorial but it does not work. Am i lacking something?

Answer 1

It works, but you didn't set the values of checked to true. The default value of .checked is false. And you didn't disable the other radio buttons.

Check it out here: https://jsfiddle.net/qsuxp12h/

var date = new Date();
//var hours = date.getHours();
var hours = 10; // <- Mess around to test it
if (hours < 11) {
    document.getElementById("r2").disabled = true;
    document.getElementById("r3").disabled = true;
    document.getElementById("r1").checked = true;
} else if (hours < 16) {
    document.getElementById("r1").disabled = true;
    document.getElementById("r3").disabled = true;
    document.getElementById("r2").checked = true;
} else if (hours < 21) {
    document.getElementById("r1").disabled = true;
    document.getElementById("r2").disabled = true;
    document.getElementById("r3").checked = true;
}

Answer 2

You are executing the script before the code is loaded so script should be done after page load.

<label class="label_radio" for="radio-01">
<input name="bdw" id="r1" type="radio"/>11:00 AM
<input name="bdw" id="r2" type="radio"/>4:00 PM
<input name="bdw" id="r3" type="radio"/>9:00 PM
</label>

<script language="javascript" type="text/javascript">
    current_time = new Date().getHours();
if (current_time < 11) 
  {
    document.getElementById("r1").checked = true;
  }   else if (current_time < 16)
  {
    document.getElementById("r1").disabled = true;
     document.getElementById("r2").checked = true;
  }
    else if ( current_time < 21)
  {
    document.getElementById("r1").disabled=true;
    document.getElementById("r2").disabled=true;
    document.getElementById("r3").checked = true;
  }
</script>

Answer 3

Instead of using var date = new Date(); or var hours = date.getHours(); . you should use PHP to store time in a variable and than compare time from that variable. As JS track the client side time so comparing using JS time can be easily tricked if someone changes his computer-system time.

hours = <?php echo date("h"); ?>
hours+=1;
if(hours>23){
hours = 0;
}