How can I build a URL query string based on a dropdown selection?

Question

I am trying to create a URL query string dynamically based on several different parameters for an ecommerce site I am working on. The site is on a SaaS platform, so server side coding/scripting is out of the question.

Requirements:

Client wants to be able to perform a search based on "finish"—such as Chrome, Bronze, etc and on the "condition" (new/used/refurbished for instance).

The filters should be able to be added/removed from the URL string without impacting the other variables (such as ?find=search-term, &category=1234, etc).

Current difficulty(s):

Right now I cannot figure out a way to contruct the URL string dynamically based on the dropdown choice or how to make the dropdown choice persist after pageload until another option is selected.

URL Example search query structure: http://www.domain.com/search.aspx?find=search-term&category=1234&bath-finish=chrome

Current markup for example(s):

This is the HTML for the dropdown list I am working with so far for just the "Finish" option.

<select id="searchbox" name="URL">
<option>Choose Filter ...</option>
<option value="&bath-finish=Chrome">Chrome</option>
<option value="&bath-finish=Bronze">Bronze</option>
<option value="&bath-finish=Black">Black</option>
<option value="&bath-finish=Brass">Brass</option>
<option value="&bath-finish=Copper">Copper</option>
<option value="&bath-finish=Nickel">Nickel</option>
<option value="&bath-finish=Stainless-Steel">Stainless Steel</option>
<option value="&bath-finish=Gold">Gold</option>
<option value="&bath-finish=Silver">Silver</option>
<option value="&bath-finish=Brown">Brown</option>
<option value="&bath-finish=White">White</option>
<option value="&bath-finish=Almond">Almond</option>
<option value="&bath-finish=Bisquit">Bisquit</option>
<option value="&bath-finish=Blue">Blue</option>
<option value="&bath-finish=Clear">Clear</option>
<option value="&bath-finish=Clear-Glass">Clear Glass</option>
<option value="&bath-finish=Wood">Wood</option>
<option value="&bath-finish=Green">Green</option>
<option value="&bath-finish=Grey">Grey</option>
<option value="&bath-finish=Satin">Satin</option>
<option value="&bath-finish=Oil-Rubbed">Oil Rubbed</option>
</select>

This is the script I had attempted to make so far (which only addresses the single filter):

<script>
var selectFilter= $('#searchbox').val();
$('#searchbox').on("change", function(e){
  document.location.href = 'http://www.domain.com/search.aspx?log=false' + selectFilter;
});
</script>

The main issue that I am having right now is that the script doesn't seem to read the selected option from the dropdown box and i'm not 100% sure why. Ideally, I'd like to have the URL be very modular so that the selections would have pretty tight control over the URL string.

Example:

domain.com/search.aspx?find=search-term&filter=selected-filter-value

Where "selected-filter-value" is based upon the selection in the dropdown box.

You're setting selectFilter when the page is loaded, not when the user selects from the menu. — Barmar
– Barmar, Commented Nov 5, 2013 at 5:58

rajesh kakawat · Accepted Answer · 2013-11-05 05:56:22Z

2

try something like this

    $('#searchbox').on("change", function(e){
        var selectFilter= $(this).val();
      document.location.href = 'http://www.domain.com/search.aspx?log=false' + selectFilter;
    });

answered Nov 5, 2013 at 5:56

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ian Svoboda Over a year ago

Thanks alot! I felt like I was just making a silly mistake and it in fact appears I was. Do you know how I could get the dropdown value to persist even after the page reloads? Not the biggest deal I guess but it would be helpful

Krish R · Accepted Answer · 2013-11-05 06:00:20Z

0

Hope it helps you,

              <script type="text/javascript">
                $(function(){
                    $('#searchbox').on("change", function(){
                        var selectFilter= $(this).val();
                        document.location.href = 'http://www.domain.com/search.aspx?log=false' + selectFilter;
                    });
                }); 
            </script>

answered Nov 5, 2013 at 6:00

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

Collectives™ on Stack Overflow

How can I build a URL query string based on a dropdown selection?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related