javascript - Add a query string to 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.

use urlencode before pass to href , Refer this link sitepoint.com/jquery-decode-url-string — chirag satapara
– chirag satapara, Commented Jul 25, 2017 at 10:36
Why are you interfering with JS in the first place here, instead of just letting the form submit normally? Just specify the right method and action, then you should not need any JS to begin with. — C3roe
– C3roe, Commented Jul 25, 2017 at 10:36
@CBroe I originally had `action="/doctors", but I don't see how I am able to change the query parameters that way. — calviners
– calviners, Commented Jul 25, 2017 at 16:32
What exactly do you think you would need to change ...? I mean, you are sending the option text content for some reason, whereas a normal form submit would send their values ... but you have text and value the exact same for all of your options, that would not really matter either ... — C3roe
– C3roe, Commented Jul 25, 2017 at 16:56

Quentin · Accepted Answer · 2017-07-25 10:48:21Z

When you click the submit button, two things happen:

Some JavaScript runs that tells the browser to navigate to a new URL
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.

Prevent the form submission from occurring
Make the form submission construct the URL you want

Option 2 is the simple approach here.

Remove the JS entirely. It doesn't do anything useful.
Add name attributes to all of your form controls.
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.

Thank you! I did Option 2 and it worked. I guess I assumed having the id attribute would work the same way as the name attribute, but that was a wrong assumption.

Prashanth Benny · Accepted Answer · 2017-07-25 11:07:26Z

0

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

Here is the corrected one:

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

edited Jul 25, 2017 at 11:07

Prashanth Benny

1,60723 silver badges38 bronze badges

answered Jul 25, 2017 at 10:57

Pravin Tiwari

12 bronze badges

Collectives™ on Stack Overflow

javascript - Add a query string to url

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related