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

Question

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>

Answer 1

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>

Answer 2

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.