Javascript code for inputing a time

Question

I have combined a JavaScript example given by Carlos and it is intended to be something like the jstimepicker. I needed it to be just minutes and seconds which jstimepicker does not do. The code when in a blank php page works for one text box but not the second box. What is not working?

So the making the button type specifically button does fix the submit, but still not working because even with the fixed code it doesn't seem to want the second input.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">


    <form action="test.php" method="post">
      <div class="dropdown" style="float:left;">
        <label>Start Time</label>
        <input class="btn btn-default dropdown-toggle" type="text" data-toggle="dropdown" id="screen">

        <span class="caret"></span>
        <ul class="dropdown-menu">
          <li>

            <div id="keypad">
              <?php $end=59; //min $rows=ceil($end/6); $x=0; $start=0; ?>
              <table>
                <h6>minutes</h6>
                <button type="button">:</button>

                <?php while($x<=$rows) { echo "<tr>"; for ($y=0 ; $y < 6; $y++, $start++) { if ($start <=$ end) { echo "<td width=\"30px\ ">"; echo "<button id=\"number\ " type=\"button\ " style=\"width:30px; \ ">"; echo $start; echo "</button>"; echo "</td>"; } } echo
                "</tr>"; $x++; } ?>
              </table>
            </div>


          </li>

        </ul>
      </div>




      <!-- second dropdown menu: -->


      <div class="dropdown" style="float:left;">

        <label>End time</label>
        <input class="btn btn-default dropdown-toggle" type="text" data-toggle="dropdown" id="screen_end">

        <span class="caret"></span>
        <ul class="dropdown-menu">
          <li>

            <div id="keypad2">
              <?php $end=59; //seconds $rows=ceil($end/6); $x=0; $start=0; ?>
              <table>
                <h6>minutes / seconds</h6>
                <button>:</button>

                <?php while($x<=$rows) { echo "<tr>"; for ($y=0 ; $y < 6; $y++, $start++) { if ($start <=$ end) { echo "<td width=\"30px\ ">"; echo "<button id=\"number\ " type=\"button\ " style=\"width:30px; \ ">"; echo $start; echo "</button>"; echo "</td>"; } } echo
                "</tr>"; $x++; } ?>
              </table>
            </div>


          </li>

        </ul>
      </div>

      <input type="submit">

    </form>






    <script type='text/javascript'>
      //<![CDATA[

      window.onload = function() {
        var screen = document.getElementById('screen'),
          keypad = document.getElementById('keypad'),
          buttons = keypad.getElementsByTagName('button');
        for (var i = 0; i < buttons.length; i++) {
          buttons[i].onclick = function() {
            screen.value = screen.value + this.innerHTML;
            return false;
          };
        }
      };
       //]]>
    </script>

    <script type='text/javascript'>
      //<![CDATA[

      window.onload = function() {
        var screen_end = document.getElementById('screen_end'),
          keypad2 = document.getElementById('keypad2'),
          buttons = keypad.getElementsByTagName('button');
        for (var i = 0; i < buttons.length; i++) {
          buttons[i].onclick = function() {
            screen_end.value = screen_end.value + this.innerHTML;
            return false;
          };
        }
      };
       //]]>
    </script>



  </div>
</body>

</html>

I am guessing the problem is with the javascript at the bottom of the page where I used two, one for each text input box. I don't really understand if this is correct or not. — Vincent, Jul 29 '16 at 18:19

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

There are several things wrong with the code here:

The unimportant:

Since your DOCTYPE indicates HTML5, you don't need the type='text/javascript' attribute on your <script> elements.
Additionally, you don't need the //<![CDATA[ production.
IDs must be unique to the whole page. Consider adding the index of your for loop to the id.

Those are not causing the problem here, but are just good practice.

The important stuff:

What is causing your problem is that your second <script> overwrites the function you defined for window.onload

Instead, combine both of those in one function.

window.onload = function () {
   var screen = document.getElementById('screen'),
       keypad = document.getElementById('keypad'),
       buttons = keypad.getElementsByTagName('button');
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function() {
        screen.value = screen.value + this.innerHTML;
        return false;
      };
    }
    var screen_end = document.getElementById('screen_end'),
        keypad2 = document.getElementById('keypad2'),
        buttons2 = keypad2.getElementsByTagName('button');
    for (var j = 0; j < buttons2.length; j++) {
      buttons2[j].onclick = function() {
        screen_end.value = screen_end.value + this.innerHTML;
        return false;
      };
    }
};

Note, however, that in your second window.onload you had declared keypad2, but when you got buttons, you looked for buttons under keypad instead of keypad2. I've changed that above, as well as defining a new variable for the second buttons collection.

Thanks, the `window.onload` is where I just was not understanding the process, I see how this is supposed to be handled. Again thanks for the answers. — Vincent, Jul 30 '16 at 10:07

score 0 · Answer 2 · answered Jul 29 '16 at 20:52

0

all the buttons have the same ID, try to set a different ID for each button or use classes.

answered Jul 29 '16 at 20:52

Max Dominguez

174
1
2

Javascript code for inputing a time

2 Answers2

The unimportant:

The important stuff: