Auto Submit form with date data from daterangepicker

Question

I have this script almost working. What I want is when the date is selected, submit the form automatically with the desired data. This script currently splits the dates and puts them in a hidden input field. It then searches the DB and displays the results. Simple, right.

I read all night and got this to the point it is at. The issue I am having is that the form submits but does not include the data.

<script>
$('input.date_range').daterangepicker({
  "alwaysShowCalendars": true,
  "showDropdowns": true,
  autoApply:true,
  ranges: {
     'Today': [moment(), moment()],
     'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
     'Last 7 Days': [moment().subtract(6, 'days'), moment()],
     'Last 30 Days': [moment().subtract(29, 'days'), moment()],
     'This Month': [moment().startOf('month'), moment().endOf('month')],
     'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
 },



 });

$('form').submit(function (ev, picker) {
    [startDate, endDate] = $('.date_range').val().split(' - ');
    $(this).find('input[name="datemin"]').val(startDate);
    $(this).find('input[name="datemax"]').val(endDate);
});

$("input.date_range").change(function() {
    console.log($("input.date_range").val());
    $('form').delay(200).submit();
});

This part here $("input.date_range").change(function() { console.log($("input.date_range").val()); $('form').delay(200).submit(); }); submits the form just fine. Just no data is sent.

I tried it like this:

$("input.date_range").change(function() {
$('form').submit(function (ev, picker) {
    [startDate, endDate] = $('.date_range').val().split(' - ');
    $(this).find('input[name="datemin"]').val(startDate);
    $(this).find('input[name="datemax"]').val(endDate);
});

    console.log($("input.date_range").val());
    $('form').delay(200).submit();
});

But this does not work. The date range is sent to the console though.

I know Im close. Just missing something here. Any help is appreciated.

Testing Answers:

$('input.date_range').daterangepicker(
  // Options
  {
    "alwaysShowCalendars": true,
    "showDropdowns": true,
    autoApply:true,
    ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  },
  // Callback
  function form_submit(){
    $('form').submit(function (ev, picker) {
        [startDate, endDate] = $('.date_range').val().split(' - ');
       $(this).find('input[name="datemin"]').val(startDate);
       $(this).find('input[name="datemax"]').val(endDate);
    });
}
$("input.date_range").change(function() {

    console.log($("input.date_range").val());
    $('form').trigger('submit');
});
  }
);

Above not working

This is also not working. It submits but the data is not passed to the input fields.

$('input.date_range').daterangepicker(
  // Options
  {
    "alwaysShowCalendars": true,
    "showDropdowns": true,
    autoApply:true,
    ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  },
  // Callback
  function(start, end){ // start, end being the values of date range
      $(this).find('input[name="datemin"]').val(start);
      $(this).find('input[name="datemax"]').val(end);

      $('form').delay(200).submit(); // You can remove the delay too
  }
);

What I am trying to achieve is the following without clicking submit. https://jsfiddle.net/4mk3s5d6/1/

Answer 1

I am going to show complete code here.

HTML Code:

<form method='post' id="dateForm">
   <div id="reportrange">
      <i class="fa fa-calendar"></i>&nbsp;
      <span></span> <i class="fa fa-caret-down"></i>
      <input type="submit" id='btn-form' style='display: none;'>
   </div>
</form>

JQuery Code:

<script type="text/javascript">
$(function() {
   var start = moment().subtract(1, 'days');
   var end = moment();
   function cb(start, end) {
      $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
   }

   $('#reportrange').daterangepicker({
      startDate: start,
      endDate: end,
      ranges: {
         'Today': [moment(), moment()],
         'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
         'Last 7 Days': [moment().subtract(6, 'days'), moment()],
         'Last 30 Days': [moment().subtract(29, 'days'), moment()],
         'This Month': [moment().startOf('month'), moment().endOf('month')],
         'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      }},cb);

      cb(start, end);
   });

   $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
   //do something, like clearing an input
     $('#btn-form').click();
    });
 </script>

You can simply click on the button of submit when you apply event enable.

Answer 2

updated:

$('input.date_range').change(function (picker) {
    [startDate, endDate] = $(this).val().split(' - ');
    $('#dateForm').find('input[name="datemin"]').val(startDate);
    $('#dateForm').find('input[name="datemax"]').val(endDate);
    $('.dateSubmit').trigger('click');

});