How to submit the form with a selected value from onchange jquery.timepicker.min.js dropdown

Question

I have created a html form using php. There is a delivery time <input> field using class timepicker. I'm using jquery.timepicker.min.js picker and values can be selected smoothly as desired.

However, if I set onBlur=this.form.submit into <input>, the default value is submitted instead of the selected value.

If I set into <input> onChange instead of onBlur, the form will not be submitted.

If I add a submit button and don't use any function in <input>, the right value is submitted by clicking the submit button.

I'm a real beginner in Javascript and some help would be highly appreciated.

ADDITIONAL INFO: I have added the code from your answer into the pickers script as follows:

<script> 
$(document).ready(function(){ 
var x = document.getElementById("toimklo").value;
document.getElementById("tklo").innerHTML = x; 
$('input.timepicker').timepicker({ 
    timeFormat: 'HH:mm', 
    interval: 30, 
    minTime: '09:00', 
    maxTime: '18:00', 
    defaultTime: x, 
    startTime: '09:00', 
    dynamic: false, 
    dropdown: true, 
    scrollbar: false }); 
$('tklo').on('selectTime', function() { 
   $('lomake').submit(); });    }); 
</script>

toimklo is php <input> for delivery time stored in database. tklo is <input class="timepicker"> for opening and containing dropdown for selected value. lomake is name of the form I try to submit.

I guess I have added the code into wrong location?

Answer 1

This JQuery Timepicker has a selectTime event here, https://github.com/jonthornton/jquery-timepicker#events

selectTime : Called after a time value is selected from the timepicker list. Fires before change event

$('#myTimePickerField').on('selectTime', function() {
    $('#myForm').submit();
});

Submit the form once the time is selected

If your are using a similar package, look for similar events going through the documentation.