CODEWITHSUNDEEP
javascriptjquery
TDG
TDG

Reputation: 1302

Jquery Get iD and Value and display URL parameters

I used below HTML & JS script to get ID and value of each element inside the form.

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.

Getting below output on console.log:

someaction?fromLocation=undefined&departureDate=undefined&tripType=undefined&returnDate=undefined

HTML:

  <form method="POST" id="bookingForm" action="someaction">
<div class="col-lg-6">
  <div class="form-group">
    <label for="fromLocation">From:</label>
    <select class="select form-control input-lg" id="fromLocation" form="fromLocation" name="fromLocation" required>
      <option value="">From</option>
      <option value="ADL">Adelaide</option>
      <option value="DRW">Darwin</option>
      <option value="MEL">Melbourne</option>
      <option value="PER">Perth</option>
    </select>
  </div>
  <div class="form-group">
    <label for="departure">Departure Date:</label>
    <input class="departureDate form-control" id="departureDate" type="text" placeholder="Departure Date" name="Departure Date" required>
  </div>
  <div class="form-group" id="tripType">
    <label for="tripType">Trip Type:</label>
    <div class="col-lg-12">
      <div class="col-lg-2">
        <input class="radio tripType" id="ReturnTrip" type="radio" name="tripType" value="Return" checked="">Return
      </div>
      <div class="col-lg-2">
        <input class="radio tripType" id="SingleTrip" type="radio" name="tripType" value="One-way">One-way
      </div>
      <div class="col-lg-8"></div>
    </div>
  </div>
</div>
<div class="col-lg-6">
  <div class="form-group">
    <label for="return">Return Date:</label>
    <input class="returnDate form-control" type="text" id="returnDate" placeholder="Return Date" name="Return Date" required>
  </div>
  <div class="form-group" id="booking-btn--container">
    <button class="btn btn-primary" type="submit">Submit</button>
  </div>
</div>
</form>

JS:

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("&");
url += urlElements;
console.log(url);

Upvotes: 0

Views: 2684

Answers (2)

Robby Cornelissen
Robby Cornelissen

Reputation: 97152

Just fix your name attributes to match your IDs, and use .serialize():

$("form").on("submit", function(event) {
  event.preventDefault();

  var form = $(this);
  var url = form.attr('action') + '?' + form.serialize();
  
  console.log(url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="bookingForm" action="someaction">
  <div class="col-lg-6">
    <div class="form-group">
      <label for="fromLocation">From:</label>
      <select class="select form-control input-lg" id="fromLocation" name="fromLocation" required>
        <option value="">From</option>
        <option value="ADL">Adelaide</option>
        <option value="DRW">Darwin</option>
        <option value="MEL">Melbourne</option>
        <option value="PER">Perth</option>
      </select>
    </div>
    <div class="form-group">
      <label for="departure">Departure Date:</label>
      <input class="departureDate form-control" id="departureDate" type="text" placeholder="Departure Date" name="departureDate" required>
    </div>
    <div class="form-group" id="tripType">
      <label for="tripType">Trip Type:</label>
      <div class="col-lg-12">
        <div class="col-lg-2">
          <input class="radio tripType" id="ReturnTrip" type="radio" name="tripType" value="Return" checked="">Return
        </div>
        <div class="col-lg-2">
          <input class="radio tripType" id="SingleTrip" type="radio" name="tripType" value="One-way">One-way
        </div>
        <div class="col-lg-8"></div>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="form-group">
      <label for="return">Return Date:</label>
      <input class="returnDate form-control" type="text" id="returnDate" placeholder="Return Date" name="returnDate" required>
    </div>
    <div class="form-group" id="booking-btn--container">
      <button class="btn btn-primary" type="submit">Submit</button>
    </div>
  </div>
</form>

As a bonus, it will properly URL-encode your values.

Upvotes: 3

gauss
gauss

Reputation: 177

Try like this

var $input = $(this).find('.form-control');
urlElements.push($input.attr("id") + "=" + $input.val());

Upvotes: 2

Related Questions