Time is saved into the database as 00:00:00

Issue

Currently, I am trying to save a form into the database. However, when I try to save the time into database, it was saved as 00:00:00. The data type that I am using is time. Could it be due to the form using hh:mm AM/PM format hence, the form details was not saved into the database?

HTML:

<div data-role="fieldcontainer">
    <label for="time_from">From</label>
    <input type="time" name="time_from">
</div>

<div data-role="fieldcontainer">
    <label for="time_to">To</label>
    <input type="time" name="time_to">
</div>

JS:

function AddBooking() {
    var url = serverURL() + "/submitform.php";
    var JSONObject = {
        "time_from": $('#time_from').val(),
        "time_to": $('#time_to').val()
        }
    $.ajax({
        url: url,
        type: 'GET',
        data: JSONObject,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (arr) {
            _getApplicationResult(arr);
        },
        error: function () {
            validationMsg();
        }
    });
}
function _getAddorderResult(arr) {
    if (arr[0].result === 1) {
        validationMsgs("Application submitted.", "Info", "OK");
        window.location = "homepage.html";

    }
    else {
        validationMsgs("Application is not submitted", "Error", "OK");
    }
}

Solution

I think the problem is here:

var JSONObject = {
    "time_from": $('#time_from').val(),
    "time_to": $('#time_to').val()
    }

You are trying to access an element with the id "time_from" and "time_to" but your DOM doesn't seem to have one... try adding the id attribute to the input elements, something like:

 <input type="time" name="time_to" id="time_to">

Answered By - SeReGa