joni joni - 4 months ago 17
Javascript Question

Input does not submit the form on change

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

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>