Home/ Questions/Q 6179395
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:39:20+00:00

I have two drop downs one for a punch in and one for a

  • 0

I have two drop downs one for a punch in and one for a punch out. They both are in 24 hour time so they have options from 0-23. Is there a way I can use javascript and php to make the out dropdown start a number greater than the chosen in drop down?

these are chunks of code, dont mind the open and closing of table tags

   <td>Start Time</td>
    <td>
        <select name="hourIn" id="hourIn">
            <option value="" selected></option>
        <? for ($hour=0; $hour <= 23; $hour++): ?>

            <option value="<?=$hour?>"><?=$hour?></option>
        <? endfor ; ?>
        </select>   
   <td>End Time</td>
    <td>
        <select name="hourOut" id="hourOut">
            <option value="" selected></option>
        <? for ($hour=0; $hour <= 23; $hour++): ?>

            <option value="<?=$hour?>"><?=$hour?></option>

        <? endfor ; ?>
        </select>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yes, with JavaScript:

    <!doctype html>
<html>
    <head>
        <title>Example</title>
    </head>

    <body>
        <form name="myForm" action="#" method="post">
           <select name="checkIn">
               <!-- options -->
           </select>

           <select name="checkOut">
               <!-- options -->
           </select>
        </form>
    </body>

    <script type="text/javascript">
        var checkIn = document.forms["myForm"].elements["checkIn"],
            checkOut = document.forms["myForm"].elements["checkOut"];

        checkIn.onclick = function() {
            if (this.value == 23) {
                checkOut.value = 0;
            }
            else {
                checkOut.value = this.value + 1;
            }
        }

        checkOut.onclick = function() {
            if (this.value <= checkIn.value) {
                this.value = checkIn.value + 1;
            }
        }
    </script>

</html>

    You may need to fiddle with the logic for the edge cases, but that’s the gist of it.

    • 0