javascript - URLにクエリ文字列を追加する

Question

フォームを送信した後にユーザーをリダイレクトするときに問題が発生します。このフォームは、ユーザーが位置、評価、および専門分野に基づいて医師を除外することを可能にする役割を果たします。ここでは、フォームとJavaScript関数のための私のコードは次のとおりです。

<form onsubmit="getDoctors()" id="searchForm"> 
<div> 
    <div class="col-sm-3"> 
     <div class="form-group"> 
      <label for="specialty">Specialty:</label> 
      <select class="form-control" id="specialty"> 
      <option value="">Select</option> 
      <% specialtyList.forEach(function(specialtyValue){%> 
       <option value="<%= specialtyValue %>"><%= specialtyValue %></option> 
      <% }); %> 
      </select> 
     </div> 
    </div> 
    <div class="col-sm-3"> 
     <div class="form-group"> 
      <label for="rating">Min. Rating:</label> 
      <select class="form-control" id="rating"> 
      <option value="">Select</option> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      </select> 
     </div> 
    </div> 
    <div class="col-sm-3"> 
     <div class="form-group"> 
      <label for="location">Location:</label> 
      <select class="form-control" id="location"> 
      <option value="">Select</option> 
      <% locationList.forEach(function(locationValue){%> 
       <option value="<%= locationValue %>"><%= locationValue %></option> 
      <% }); %> 
      </select> 
     </div> 
    </div> 
    <div class="col-sm-3"> 
     <div class="form-group"> 
      <input type="submit" class="btn btn-success" value="Search"> 
     </div> 
    </div> 
</div> 
</form> 


function getDoctors() { 
    var specialty = document.getElementById('speciality'); 
    var rating = document.getElementById('rating'); 
    var location = document.getElementById('location'); 

    window.location.href("/doctors?specialty=" + specialty.options[specialty.selectedIndex].text + "&rating=" + rating.options[rating.selectedIndex].text + "&location=" + location.options[location.selectedIndex].text); 
} 

しかし、私はフォームを送信するとき、それはURLにありませんすべてが空のクエリ文字列を入れている：これはなぜ/doctors?

誰もが知っていますハプニング？どんな助けでも大歓迎です。

Answer 1

あなたが送信ボタンをクリックすると、二つのことが起こる：

1. をいくつかのJavaScriptがそのフォームはブラウザを新しいURLに移動させ、提出する新しいURL
2. に移動するようにブラウザに指示します実行します

最後にフォーム提出が来るので勝ちます。 JavaScriptは実際には役に立たない。

これを解決するには2つの方法があります。

1. 防止フォームの送信は、あなたが

オプション2は、ここで簡単なアプローチですたいURLを構築してください

を発生からのフォーム送信。

1. JSを完全に削除します。それは何も役に立たない。
2. name属性をすべてのフォームコントロールに追加します。
3. フォームは、今あなたが手動で一緒に入れたクエリ文字列を構築するために名前と値を使用する属性action="/doctors" in the `

を設定します。

Answer 2

getElementByIdに「専門」の下に間違ったIDが選択されています。ここで

を修正いずれかです。

var specialty = document.getElementById('specialty');