html dropdown 24 hour in and out issue_问答_开发者

开发者 https://www.devze.com 2023-03-22 12:34 出处：网络

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

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>

Yes. If you are using jQuery, just do something like this:

$('#punchout').val($('#punchin').val()+1);

Of course, you will need to do something different when the punchin value is equal to 23 (mod 24 should do it). You also may be using a different format. Implementing a specific solution is something I leave to you, as you haven't given us enough information for anything else.

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.