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添加查询字符串

回答

相关问题