Is there a way to make a second Input field?-CodePudding

Is there a way to make a second Input field so that the 1st time value is in one input field and the second is in the other? I am trying to post the times to a database so I need then in separate fields.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />

<div class='amount-time-sch'>

<label for="amount-time">Time</label>
<input type="text" name="amount-time" id="amount-time" style="border: 0; color: #666666; font-weight: bold;" value="10:00 - 20:00"/>
<div id="slider-time"></div><br>
</div>

<script>jQuery(function() {
    jQuery('#slider-time').slider({
        range: true,
        min: 0,
        max: 1000,
        step: 15,
        values: [ 600, 1200 ],
        slide: function( event, ui ) {
            var hours1 = Math.floor(ui.values[0] / 60);
            var minutes1 = ui.values[0] - (hours1 * 60);

            if(hours1.length < 10) hours1= '0'   hours;
            if(minutes1.length < 10) minutes1 = '0'   minutes;

            if(minutes1 == 0) minutes1 = '00';

            var hours2 = Math.floor(ui.values[1] / 60);
            var minutes2 = ui.values[1] - (hours2 * 60);

            if(hours2.length < 10) hours2= '0'   hours;
            if(minutes2.length < 10) minutes2 = '0'   minutes;

            if(minutes2 == 0) minutes2 = '00';

            jQuery('#amount-time').val(hours1 ':' minutes1 '' hours2 ':' minutes2 );
        }
    });
});

</script>

CodePudding user response：

Yes, you can have your jQuery write the value to two different inputs with unique ids.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />

<div class='amount-time-sch'>

<label for="amount-time">Time</label>
<!-- <input type="text" name="amount-time" id="amount-time" style="border: 0; color: #666666; font-weight: bold;" value="10:00 - 20:00"/> -->
<input type="text" name="start-time" id="start-time" value="10:00">
<input type="text" name="end-time" id="end-time" value="20:00">
<div id="slider-time"></div><br>
</div>

<script>jQuery(function() {
    jQuery('#slider-time').slider({
        range: true,
        min: 0,
        max: 1000,
        step: 15,
        values: [ 600, 1200 ],
        slide: function( event, ui ) {
            var hours1 = Math.floor(ui.values[0] / 60);
            var minutes1 = ui.values[0] - (hours1 * 60);

            if(hours1.length < 10) hours1= '0'   hours;
            if(minutes1.length < 10) minutes1 = '0'   minutes;

            if(minutes1 == 0) minutes1 = '00';

            var hours2 = Math.floor(ui.values[1] / 60);
            var minutes2 = ui.values[1] - (hours2 * 60);

            if(hours2.length < 10) hours2= '0'   hours;
            if(minutes2.length < 10) minutes2 = '0'   minutes;

            if(minutes2 == 0) minutes2 = '00';

            jQuery('#start-time').val(hours1 ':' minutes1);
            jQuery('#end-time').val(hours2 ':' minutes2);
        }
    });
});
</script>

CodePudding user response：

I would advise using an html time input for each time value. Here is a hypothetical example:

<form action="#" onsubmit="sendTimes(event)">
  <label for="first-time">first time</label>
  <input type="time" name="first-time" id="first-time"><br>
  <label for="second-time">second time</label>
  <input type="time" name="second-time" id="second-time"><br>
  <input type="submit" value="submit">
</form>

<script type="text/javascript">
  function sendTimes(event) {
    // keep browser from refreshing
    event.preventDefault();
    const formData = new FormData();
    // get the values of the times
    const firstTime = $("#first-time").val();
    const secondTime = $("#second-time").val();
    // add the times to the form data to POST
    formData.append("first-time", firstTime);
    formData.append("second-time", secondTime);
    // insert logic here for sending the form data to PHP
  }
</script>

The time values will be empty strings if the user leaves them empty. Otherwise, they will be 24-hour times in the form "hh:mm". On the server-side, you can validate each time value in PHP before saving them to the database.