Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

How do I change the way the date and time inputs submit to the json file?

I have an attendance form that I'm using and I can't figure out how to send it to the json file so that the format for the date input is displayed in the file as: MM/DD/YYYY and the time format in 12 hour format and add either AM or PM depending on the time of day. My code below is what I've tried so far but I can't seem to figure out how to get it to work correctly.

Code:
<form method="post" action="aimee-pelletier-submit-attendance.php" target="Right">
        <div id="form_page">
            <div id="form_body">
                <div class="row-a">
  <div class="column-a" style="background-color:transparent;">
  <div id="input_date" style="margin-left:-25px" class="input">
                    <input id="Date" style="font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; width:100%" type="date"
                        placeholder="Date" name="Date"
                        required>
                </div>
    <script type="text/javascript">
function getDate()
{
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();
    if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm}
    today = mm+"/"+dd+"/"+yyyy;

    document.getElementById("Date").value = today;
}

//call getDate() when loading the page
getDate();

function fillTimeField() {
  var timeField = document.getElementById("Time");
  var date = new Date();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var time = hours + ':' + minutes + ' ' + ampm;
  timeField.value = time;
}

  fillTimeField();
 
</script>
  </div>
  <div class="column-a" style="background-color:transparent;">
    <div id="input_time" class="input">
                    <input id="Time" style="font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; width:100%" type="time"
                        placeholder="Time" name="Time"
                        required>
  </div>
  </div>
    <div class="row-a">
  <div class="column-a" style="background-color:transparent;">
  <div id="input_status" class="input" style="margin-left:-25px">
    <select name="Status" id="Status" required>
    <option selected disabled>Select status</option>
    <option value="Present">Present</option>
    <option value="Tardy">Tardy</option>
    <option value="Unexcused">Unexcused Absence</option>
    <option value="Excused">Excused Absence</option>
    <option value="None">None</option>
  </select>
                </div>
  </div>
  <div class="column-a" style="background-color:transparent;">
    <div id="input_program" class="input">
    <select id="Program2" name="Program" required><option selected disabled>Select a program</option></select>
                </div>
   </div>
  </div>
                </div>
        <br><br>
             </div>
        </div>
      <div class="id input">
                    <input id="submit" style="padding:2px 2px; float:right" onclick="refreshIframe();" type="submit"
                        name="submit" value="Submit attendance">
<button id="close-modal-btn" style="padding:2px 2px; margin-right:5px; float:right" type="button">Close</button>
        
                </div>
    </form>
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom