CODEWITHSUNDEEP
javascriptjquerydateinputdatepicker
joni
joni

Reputation: 73

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>

Upvotes: 1

Views: 1111

Answers (2)

Chandra Kumar
Chandra Kumar

Reputation: 4205

Simple you can use this code:

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

Upvotes: 0

DaniP
DaniP

Reputation: 38252

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>

Upvotes: 2

Related Questions