Submit Form When a date is chosen

Question

Is there a way I can submit a form using the input date type. meaning if a date is chosen, the form gets submitted without any button click?

For example,

I have this form:

<form action='ex.php' method='POST'>
  Enter a date: <input type='date' name='date' />
</form>

Answer 1

Something like this might do the trick - though some validation of the user supplied date might be called for to ensure it is a date that is added & processed.

<form action='ex.php' method='POST'>
    Enter a date: <input type='date' name='date' />
</form>


<script>
    var oDate=document.querySelectorAll('input[type="date"]')[0];
    oDate.addEventListener('blur',function(e){
        /* additional date validation here */
        if( oDate.value!='' )oDate.parentNode.submit();
    },false);
</script>

Answer 2

If have any datepicker then try below code.

      $('#date1').change(function(){
        console.log('Submiting form');                
        $('#form1').submit();
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='ex.php' method='POST' id="form1">
        Enter a date: <input type='date' name='date' id="date1" />
      </form>

Answer 3

  $( function() {
    $( "#datepicker" ).datepicker();
  } );
 

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<form action='ex.php' method='POST'>
    Enter a date: <input type="text" id="datepicker">
  <input type="submit">
  </form>