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

Question

I'm having trouble redirecting the user after submitting a form. The form serves to allow the user to filter out doctors based on location, rating, and specialty. Here is my code for the form and javascript function:

<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);
}

However, when I submit the form, all it does to the URL is put an empty query string: /doctors?

Does anyone know why this is happening? Any help is much appreciated.

Answer 1

When you click the submit button, two things happen:

1. Some JavaScript runs that tells the browser to navigate to a new URL
2. The form submits, causing the browser to navigate to a new URL

The form submission comes last, so it wins. The JavaScript is, in effect, useless.

There are two approaches you can take to solve this.

1. Prevent the form submission from occurring
2. Make the form submission construct the URL you want

Option 2 is the simple approach here.

1. Remove the JS entirely. It doesn't do anything useful.
2. Add name attributes to all of your form controls.
3. Set the attribute action="/doctors" in the `

The form will now use the name and values to construct the query string you were putting together manually.

Answer 2

you are selecting wrong id below for "specialty" in getElementById .

Here is the corrected one:

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