title: Jquery Get iD and Value and display URL parameters
body: <p>I used below HTML &amp; JS script to get ID and value of each element inside the form.</p>
  
  <p>But, i need to get all these value and like below and added to the URL on top when user submit the form to redirect booking engine. </p>
  
  <p>Getting below output on console.log:</p>
  
  <p>someaction?fromLocation=undefined&amp;departureDate=undefined&amp;tripType=undefined&amp;returnDate=undefined</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>  &lt;form method="POST" id="bookingForm" action="someaction"&gt;
  &lt;div class="col-lg-6"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="fromLocation"&gt;From:&lt;/label&gt;
      &lt;select class="select form-control input-lg" id="fromLocation" form="fromLocation" name="fromLocation" required&gt;
        &lt;option value=""&gt;From&lt;/option&gt;
        &lt;option value="ADL"&gt;Adelaide&lt;/option&gt;
        &lt;option value="DRW"&gt;Darwin&lt;/option&gt;
        &lt;option value="MEL"&gt;Melbourne&lt;/option&gt;
        &lt;option value="PER"&gt;Perth&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="departure"&gt;Departure Date:&lt;/label&gt;
      &lt;input class="departureDate form-control" id="departureDate" type="text" placeholder="Departure Date" name="Departure Date" required&gt;
    &lt;/div&gt;
    &lt;div class="form-group" id="tripType"&gt;
      &lt;label for="tripType"&gt;Trip Type:&lt;/label&gt;
      &lt;div class="col-lg-12"&gt;
        &lt;div class="col-lg-2"&gt;
          &lt;input class="radio tripType" id="ReturnTrip" type="radio" name="tripType" value="Return" checked=""&gt;Return
        &lt;/div&gt;
        &lt;div class="col-lg-2"&gt;
          &lt;input class="radio tripType" id="SingleTrip" type="radio" name="tripType" value="One-way"&gt;One-way
        &lt;/div&gt;
        &lt;div class="col-lg-8"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-lg-6"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="return"&gt;Return Date:&lt;/label&gt;
      &lt;input class="returnDate form-control" type="text" id="returnDate" placeholder="Return Date" name="Return Date" required&gt;
    &lt;/div&gt;
    &lt;div class="form-group" id="booking-btn--container"&gt;
      &lt;button class="btn btn-primary" type="submit"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var url = $("#bookingForm").attr("action") + "?";
  var urlElements = [];
  $("#bookingForm").find('.form-group').each(function(){
  urlElements.push($(this).find('.form-control').attr("id") + "=" + $(this).find('.form-control').attr("value") || $(this).find('.form-control').attr("id") + "=" + $(this).find('.form-control').attr("value"));
  });
  urlElements = urlElements.join("&amp;");
  url += urlElements;
  console.log(url);
  </code></pre>