Hello all,
Very new to Caspio. I have created my webform and it looks the way I want, which is great. However, I had to create individual time fields hh:mm:ss for specific events within an incident and tie them to the "incident date." However, when I run a test and enter time values in the corresponding boxes, nothing comes across to my table. For reference, I created multiple HTML blocks for each of the respective times. In this statement, the column in the table is "TimeEventStart" and the incident date within the table is "IncidentDate." What am I missing?
Here is the HTML code I am using:
<!-- Hidden field for IncidentDate dynamically populated by Caspio -->
<input id="InsertRecord_IncidentDate" name="InsertRecord_IncidentDate" type="hidden" />
<!-- Input fields for time -->
<div>
<label for="InsertRecord_TimeEventStart_hh" style="font-weight: bold; margin-right: 47px;">Event Start Time:</label>
<input id="InsertRecord_TimeEventStart_hh" maxlength="2" placeholder="hh" size="2" style="width: 60px; height: 30px; margin-right: 10px;" type="text" />
<label for="InsertRecord_TimeEventStart_mm" style="margin-right: 10px;">Minutes:</label>
<input id="InsertRecord_TimeEventStart_mm" maxlength="2" placeholder="mm" size="2" style="width: 60px; height: 30px; margin-right: 10px;" type="text" />
<label for="InsertRecord_TimeEventStart_ss" style="margin-right: 10px;">Seconds:</label>
<input id="InsertRecord_TimeEventStart_ss" maxlength="2" placeholder="ss" size="2" style="width: 60px; height: 30px;" type="text" />
<!-- AM/PM selector -->
<select id="InsertRecord_TimeEventStart_ampm" style="height: 30px;">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
<!-- Hidden input to store the final combined date-time for submission -->
<input id="InsertRecord_TimeEventStart" name="InsertRecord_TimeEventStart" type="hidden" />
<script>
function combineDateTime() {
// Fetch the dynamically populated IncidentDate
const incidentDate = document.getElementById('InsertRecord_IncidentDate').value;
// Get time values from the user input fields
let hours = parseInt(document.getElementById('InsertRecord_TimeEventStart_hh').value, 10); // Convert to integer
const minutes = document.getElementById('InsertRecord_TimeEventStart_mm').value.padStart(2, '0'); // Ensures 2 digits for minutes
const seconds = document.getElementById('InsertRecord_TimeEventStart_ss').value.padStart(2, '0'); // Ensures 2 digits for seconds
const ampm = document.getElementById('InsertRecord_TimeEventStart_ampm').value;
// Convert 12-hour format to 24-hour format based on AM/PM
if (ampm === 'PM' && hours < 12) {
hours += 12; // Convert PM hours to 24-hour format
} else if (ampm === 'AM' && hours === 12) {
hours = 0; // Handle midnight case (12 AM)
}
const hoursStr = String(hours).padStart(2, '0'); // Ensure 2 digits for hours
// Combine the IncidentDate with the manually entered time (hours, minutes, seconds)
const combinedDateTime = `${incidentDate} ${hoursStr}:${minutes}:${seconds}`;
// Set the combined date-time into the hidden input field for submission
document.getElementById('InsertRecord_TimeEventStart').value = combinedDateTime;
}
// Ensure combineDateTime is called before the form is submitted
document.addEventListener('submit', function(event) {
combineDateTime();
});
</script>
