title: How to print select option on console while submitting the form?
body: <p>I have a <code>form</code> which has some <code>input</code> and <code>select</code> elements and a submit button. When the form is submitted I want to know which drop-down option is chosen.</p>
  
  <p>I have achieved that by using the change jQuery method, but I want to achieve this on form submit because I have to make two AJAX calls; one to <code>POST</code> the value and one to <code>GET</code> the value. By doing it with <code>change</code> it is making an AJAX call on change and one after clicking on submit button. I want to achieve that by submitting the form only.</p>
  
  <p>Also, I cannot use the <code>value</code> attribute on my <code>&lt;option&gt;</code> tags as the dropdown list is created in the backend</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form id="formId" method="get"&gt;
    &lt;div class="container"&gt;
      &lt;h4&gt;Start Date:&lt;/h4&gt;
      &lt;input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required onchange="checkDate()" /&gt;
      &lt;h4&gt;End Date:&lt;/h4&gt;
      &lt;input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required onchange="checkDate()" /&gt;
      &lt;h4&gt;Outlets:&lt;/h4&gt;
      &lt;select name="outlet" id="myselect"&gt;
        &lt;option&gt;--------------------------------------&lt;/option&gt;
        &lt;option&gt;ALL&lt;/option&gt;
      &lt;/select&gt;
      &lt;div&gt;&lt;br&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;br&gt;
        &lt;button id="button" class="btn btn-default" type="submit"&gt;Search&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;div class="loader"&gt;&lt;/div&gt;
  &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div id="tbl"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#myselect").on("change", function() {
      currentlyClickedOutlet = $(this).val();
      $.ajax({
        url: "DateWiseOlWiseSales",
        method: "POST",
        data: {
          Outlet: currentlyClickedOutlet,
        },
      });
    });
  
    $("#formId").submit(function(event) {
      event.preventDefault();
      $.ajax({
        url: "DateWiseOlWiseSales",
        method: "GET",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: {
          fromdate: $("#startdate").val(),
          todate: $("#enddate").val(),
          outlet: $("#all").val()
        },
        success: function(data) {
          //console.log("test",tableValue);
          $("#formId").hide();
          let formatedData = formatData(data);
          renderTable(formatedData);
          $('.loader').hide();
          $('.overlay').hide();
          $("#export").show();
        }
      });
  </code></pre>