Jump to content
  • 0

HTML Block (DataPage) into Table


PuckDrop

Question

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? 

image.png.a4b26f0f5753f765998a6b98b4fe468d.png

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>
 

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...