Question

i am building a search function which use many filters. i decide to use the get method instead of post (different reasons). Problem is, when using many filters the querystring gets very long, especially when i use filter with same name so i get

myurl.com?filter1[]=val1&filter1[]=val2&filter2=val

To get better control and to prevent 0 values i tried serializeArray:

var array = {}; 
jQuery.each(jQuery('form').serializeArray(), function(index,val) {
if (val.value != 0 )
    array[value.name] = val.value;
});

But this way it overrides the first filter1 with the last value of filter1, so multiple values doesn´t work. And then i have the “problem” to create the querystring. I am not a javascript prof. so i need a little help here.

What can i do, so i get a querystring which looks like:

myurl.com?filter1=val1|val2&filter2=val and so on

The HTML are “normal” input fields

<input type="checkbox" name="filter1[]" />
<input type="text" name="filter2" />

Thank you in advance

ruven

Answer 1

How about this (working demo):

<form action="search.html">
    <input type="text" value="val1" name="filter1" />
    <input type="text" value="val2" name="filter1" />
    <input type="text" value="val" name="filter2" />
    <input type="submit" value="search" name="cmdSearch" />
</form>
​
<script>
    // don't do anything until document is ready
    $(function() {

        // register to form submit event
        $('form').submit(function(e){

            // stop the form from doing its default action (submit-GET)
            e.preventDefault();

            // initialise url
            var url = '';

            // keep track of previously enumerated field
            var prev = '';      

            // iterate all fields in the form except the submit button(s)
            $('input:not([type="submit"])', $(this)).each(function(){

                // get the name of this field, with null coalesce
                var name = $(this).attr('name') || '';

                // get the value of this field
                var val = $(this).attr('value');

                // does this field have the same name as the previous?
                if (name.toLowerCase() == prev.toLowerCase()) {

                    // same name therefore we have already appended the name
                    // append value separator
                    url += '|';
                }
                else {

                    // different name, track new name
                    prev = name;

                    // append parameter separator, parameter name, equals char
                    url += '&' + name + '=';
                }

                // append value of this field         
                url += val;
            });

            // removing leading ampersand
            if (url.length && [0] == '&') {
                url = url.substring(1);            
            }       

            // insert leading question mark
            url = '?' + url;

            // insert url from "action" attribute of the form
            url = $(this).attr('action') + url;

            // display url (delete this line)
            alert(url);

            // redirect to the new url (simulates the GET)
            window.location.href = url;
        });
    });
</script>