Home/ Questions/Q 8074635
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T14:43:16+00:00

I am currently trying to create a search based on multiple dropdowns. The snippet

  • 0

I am currently trying to create a search based on multiple dropdowns.

The snippet I use is the following:

    <script type="text/javascript" charset="utf-8">
        function add_criteria (el) {
            search = document.getElementById('search_criteria');
            search.value = document.getElementById('type').value + " " + document.getElementById('color').value;}
    </script>

    <form role="search" method="get" id="searchform" action="search.html?submit=Go&_nkw">
        <label class="screen-reader-text" for="s">Search for:</label>
    Type
    <select name='type' id='type' class='postform' onchange="add_criteria(this);">
      <option value='' selected='selected'>All</option>
      <option class="level-0" value="dog">Dog</option>
      <option class="level-0" value="cat">Cat</option>
    </select> 

    Color
    <select name='color' id='color' class='postform' onchange="add_criteria(this);">
      <option value='' selected='selected'>All</option>
      <option class="level-0" value="red">red</option>
      <option class="level-0" value="white">white</option>
      <option class="level-0" value="green">green</option>
    </select> 
       <input type="submit" id="searchsubmit" value="Search" />
      </div>
    </form>

The result however is not correct – what I would like to achieve is the result being displayed in this fashion:

    http://mystore.com/search.html?submit=Go&_nkw=medium+red

Does anybody have an idea on how I can get this replacement sting fixed and properly working?

Some advise would be highly appreciated – thank you very much!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, you need just a simple trick. First of all get those <select> tags out of <form> tag, and make two fake <input> with name submit and _nkw (thats how <form> element works):

    <!DOCTYPE html>
<html>
<body>

<script type="text/javascript" charset="utf-8">
        function add_criteria (el) {
            search = document.getElementById('search_criteria');
            search.value = document.getElementById('type').value + " " + document.getElementById('color').value;}
    </script>

      <div>
        <select name='type' id='type' class='postform' onchange="add_criteria(this);">
            <option value='' selected='selected'>All</option>
            <option class="level-0" value="dog">Dog</option>
            <option class="level-0" value="cat">Cat</option>
        </select> 

        Color
        <select name='color' id='color' class='postform' onchange="add_criteria(this);">
            <option value='' selected='selected'>All</option>
            <option class="level-0" value="red">red</option>
            <option class="level-0" value="white">white</option>
            <option class="level-0" value="green">green</option>
        </select>
        </br>
        <form role="search" method="get" id="searchform" action="search.html">
            <input name="submit" value="Go" style="visibility:hidden;"></label>
            <input id="search_criteria" name="_nkw" value="" style="visibility:hidden;"></label>
            <input type="submit" id="searchsubmit" value="Search" />
        </form>
      </div>

</body>
</html>
    • 0