jQuery獲取iD和Value並顯示URL參數

Question

我使用下面的HTML和JS腳本來獲取表單內每個元素的ID和值。

但是，當用戶提交表單以重定向預訂引擎時，我需要獲取所有這些值，如下所示，並添加到頂部的URL中。

在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);

Answer 1

只需修復名稱屬性以匹配您的ID，然后使用.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> 

另外，它將正確地對您的值進行網址編碼。

Answer 2

這樣嘗試

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