title: Auto Submit form with date data from daterangepicker
body: <p>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.  </p>
  
  <p>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.  </p>
  
  <pre><code>&lt;script&gt;
  $('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();
  });
  </code></pre>
  
  <p>This part here <code>$("input.date_range").change(function() {
      console.log($("input.date_range").val());
      $('form').delay(200).submit();
  });</code> submits the form just fine.  Just no data is sent.  </p>
  
  <p>I tried it like this:</p>
  
  <pre><code>
  
  $("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();
  });
  </code></pre>
  
  <p>But this does not work.  The date range is sent to the console though.  </p>
  
  <p>I know Im close.  Just missing something here.  Any help is appreciated.</p>
  
  <p>Testing Answers:</p>
  
  <pre><code>$('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');
  });
    }
  );
  </code></pre>
  
  <p>Above not working </p>
  
  <p>This is also not working.  It submits but the data is not passed to the input fields. </p>
  
  <pre><code>$('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
    }
  );
  </code></pre>
  
  <p>What I am trying to achieve is the following without clicking submit.
  <a href="https://jsfiddle.net/4mk3s5d6/1/" rel="nofollow noreferrer">https://jsfiddle.net/4mk3s5d6/1/</a></p>