Onchange with multiple get values via selectbox with jQuery

Question

Ive got 2 selectboxes with a Java script on it. When i use filter1 my url changes to www.url.com/&filter[]=6827 this works perfect and also the selected option work without any problems. But i want a new selectbox like filter2 with multiple filters. When i use it like below the url looks like this : www.url.com/&filter[]%3D=6727%26filter[]%3D6728

Can somebody help out of this problem? i think its in jquery... not sure about that.

<div class="filter1">
  <div class="title">Filter1</div>
    <form action="filter1" method="get" id="input-custom-filter1">   
     <select name="filter[]=" onchange="$('#formFilters').submit();">
     <option value="6725">Option1</option>
     <option value="6726">Option2</option>
     <option value="6727">Option3</option>
     <option value="6728">Option4</option>
     </select>
</div>   
<div class="filter2">
  <div class="title">Filter1</div>
    <form action="filter2" method="get" id="input-custom-filter2">   
     <select name="filter[]=" onchange="$('#formFilters').submit();">


     <option value="6725&filter[]=6726">Option1 & Option2</option>
     <option value="6727&filter[]=6728">Option3 & Option4</option>
         </select>
    </div> 


<script type="text/javascript">
    $(document).ready(function(){
      $('#formFilters').submit() {
            }
        });
    });
</script>

score 0 · Answer 1 · answered Mar 02 '13 at 10:54

The code does not understand all the symbols your passing through. I am not sure what you are trying to achieve here but its clearly not an error in your javascript and not in your HTML. Though using 6727&filter[]=6728 as a value is a bad idee.

I expect the error is where you get your submitted information. You probably have and error defining and re-directing to the url.

score 0 · Answer 2 · answered Mar 02 '13 at 11:19

There are a few issues in your HTML code fragment above.

please remove = from <select name="filter[]=", the name attribute is to indicate the name of form field, if you set method="get", browser will automatically add = for constructing URL.
<option value="6725&filter[]=6726"> will not satisfy your requirement. Everything in the value attribute will be treated as the value of certain form field, which in your case is filter[], and therefore gets encoded. That is why you see %3D
is not used for passing multiple values of a form field. Naturaly checkbox is the option for this case.

So in the sencond form, you can pass multiple values by using checkbox

<input type="checkbox" name="filter[]" value="6725"/>
<input type="checkbox" name="filter[]" value="6726"/>

Again, please remove = from name attribute in any form field element.

Thanks for you answer, i have followed your step one. Like you said in step two thats the hole problem. Is there an option to decode this because i dont wanna use a checkbox. — gijsnl, Mar 05 '13 at 15:40
I've post a new answer and hopefully it could solve your problem. — spiritwalker, Mar 06 '13 at 00:35

score 0 · Answer 3 · answered Mar 02 '13 at 11:22

0

<option value="6725&filter[]=6726">Option1 & Option2</option>
<option value="6727&filter[]=6728">Option3 & Option4</option>

problem with your option values try to change it..

answered Mar 02 '13 at 11:22

sasi

4,192
4
28
47

score 0 · Answer 4 · edited May 23 '17 at 10:25

@gijsnl URL encode is default browser behavior (because you are using form get method)and I do not think it a good idea to hack it. In your case, you can use multi-select to achieve the goal. There is already a post in StackOverflow,

How to post the selections of an HTML List Box with multiple selected values

My suggestions as follow, 1. remove equal sign from name* attribute of select element; 2. do not add multiple values in one option element 3. use form post rather than get unless you have a very strong reason for doing so.

Onchange with multiple get values via selectbox with jQuery

4 Answers4