Input does not submit the form on change

Question

I have a problem with "on change" input. What it's supposed to do is that on click it shows datepicker, but when you pick a date to submit, input change function does not work. Please, run a code snippet below.

 if (top.location != location) { top.location.href = document.location.href; } $(function() { window.prettyPrint && prettyPrint(); $('#dp1').datepicker({ format: 'yyyy-mm-dd' }); $('#dpYears').datepicker(); $('#dpMonths').datepicker(); }); 

 <link href="http://www.eyecon.ro/bootstrap-datepicker/css/bootstrap.css" rel="stylesheet" /> <link href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> <div data-date-format="yyyy-mm-dd"> <form id="date" method="POST" action="index.php"> <input type="text" name="date" class="span2" value="2016-08-07" id="dp1" style="text-align: center; width: 50%; background-color: #5a95f5; border: none;"> </form> </div> <script> $('input[id="dp1"]').change(function() { $('#date1').submit(); }); </script> 

Answer 1

The problem is your input doesn't fire the change() function when you select the date. What you can do is use the events for the datepicker in this case the changeDate

 if (top.location != location) { top.location.href = document.location.href; } $(function() { window.prettyPrint && prettyPrint(); $('#dp1').datepicker({ format: 'yyyy-mm-dd' }); $('#dpYears').datepicker(); $('#dpMonths').datepicker(); }); 

 <link href="http://www.eyecon.ro/bootstrap-datepicker/css/bootstrap.css" rel="stylesheet" /> <link href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> <div data-date-format="yyyy-mm-dd"> <form id="date" method="POST" action="index.php"> <input type="text" name="date" class="span2" value="2016-08-07" id="dp1" style="text-align: center; width: 50%; background-color: #5a95f5; border: none;"> </form> </div> <script> $('#dp1').on('changeDate', function () { console.log('Date Selected') }) </script> 

Answer 2

Simple you can use this code:

$('#input-date')
.datepicker()   
.on('changeDate', function(e){    
    $('#formID').submit();
});