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

单击“提交”按钮时，会发生两件事：

一些JavaScript运行告诉浏览器导航到新的URL
表单提交，导致浏览器导航到新网址

表格提交是最后一次，所以它赢了。实际上，JavaScript是无用的。

您可以采取两种方法来解决这个问题。

阻止表单提交
使表单提交构建您想要的网址

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

完全删除JS。它没有做任何有用的事情。
将name属性添加到所有表单控件中。
设置属性action="/doctors" in the`

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

Answer 2

您在getElementById中为“专业”选择了错误的ID。

以下是更正后的内容：

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

javascript - 将查询字符串添加到url

2 个答案: