javascript - 向url添加查詢字符串

我在提交表單後重定向用戶時遇到問題。該表格用於允許用戶根據位置，等級和專業過濾出醫生。這裏是我的表單和JavaScript函數代碼：javascript - 向url添加查詢字符串

<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?

有誰知道這是爲什麼發生了什麼？任何幫助深表感謝。

來源

2017-07-25 calviners

使用'urlencode'傳球'href'之前，請參考以下鏈接https://www.sitepoint.com/jquery-decode-url-字符串/ –

爲什麼你在這裏首先干擾JS，而不是讓表單正常提交？只需指定正確的方法和操作，那麼你就不需要任何JS開始。 – CBroe

@CBroe我原本有'action =「/ doctors」，但我沒有看到我能夠如何改變查詢參數。 – calviners

當你點擊提交按鈕，發生兩件事情：

一些JavaScript運行，告訴瀏覽器導航到一個新的URL
表單提交，從而導致瀏覽器導航到一個新的URL

表單提交最後，所以它贏了。 JavaScript實際上是無用的。

有兩種方法可以解決這個問題。

防止發生
使表單提交構造URL的形式提交你想

方案2是這裏的簡單的方法。

完全刪除JS。它沒有做任何有用的事情。
將name屬性添加到您的所有表單控件。
設置屬性action="/doctors" in the`

窗體現在將使用名稱和值來構建你手動放在一起的查詢字符串。

來源

2017-07-25 10:48:21 Quentin

謝謝！我做了選擇2，它的工作。我猜想我認爲'id'屬性的作用方式與'name'屬性相同，但這是一個錯誤的假設。 – calviners

您在getElementById中爲「專業」選擇了以下錯誤標識。

這裏是一個更正：

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

來源

2017-07-25 10:57:24

javascript - 向url添加查詢字符串

回答

相關問題