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
2. 表单提交，导致浏览器导航到新的URL

最后提交表单，因此获胜。 实际上，JavaScript是无用的。

您可以采用两种方法来解决此问题。

1. 防止表单提交
2. 使表单提交构造所需的URL

选项2是这里的简单方法。

1. 完全删除JS。 它没有任何用处。
2. 将name属性添加到所有窗体控件。
3. action="/doctors" in the `中设置属性action="/doctors" in the

表单现在将使用名称和值来构造您手动组合在一起的查询字符串。

Answer 2

您在下面的getElementById中为“ specialty”选择了错误的ID。

这是更正的一个：

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