Jquery iDと値を取得し、URLパラメータを表示する

Question

私はフォームの中の各要素のIDと値を取得するために、HTML & JSスクリプトの下で使用しました。

しかし、私はこれらの値をすべて取得し、以下のようにして、ユーザーがフォームを送信して予約エンジンをリダイレクトするときに一番上のURLに追加する必要があります。 ？にconsole.logに出力の下に取得

：

someaction fromLocation =未定義& departureDate =未定義& TRIPTYPE =未定義& returnDate =未定義

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>

、それは正しく値をURLエンコードします。

Answer 2

は `` `ヴァル（）を使用してこの

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