Use jquery to insert search parameters in URL

Question

I have some different search parameters, which can be dynamical in different categories. My problem is, that I need to use jquery to check if there is clicked on a check box and then change the URL so that the parameters are inserted.

My HTML for one search parameter box is:

<h3>{heading}</h3>
<div class="{class} {parameter} searchParam" name="class">
    <ul>
        <li><input type="checkbox" name="{name}" value="{value}" />{value}</li>
    </ul>
</div>

Every parameter has "searchParam" as class - the other to parameters are dynamical.

What I need to is for every .searchParam to be created a URL part so that if e.g. 3 search params had checked values (the input in the li), then the URL would be like this:

http://domain.com/param1=value1,value2,value3.param2=value1,value2.param2=value1

Is this possible?

You want to update the search parameters in the URL of the current page? You realise this will trigger a page-load/refresh? — David Thomas
– David Thomas, Commented Sep 7, 2012 at 19:12
David: Yeah, I have thought of it. I think it is the best way - I could load it through ajax, but I think that could give some problem in matter of the number of records on the page. So I have decided to go on with reload of the page :) — denlau
– denlau, Commented Sep 7, 2012 at 19:14
Why exactly do you want to do this? You can use location.hash to put the parameters in the url bar without reloading the page, they will appear after a # though. — Rusty Jeans
– Rusty Jeans, Commented Sep 7, 2012 at 19:18
I cant use a # I think.. something to do with my PHP routing.. But I want to do it because I can't add to a parameter. Lets say it is already: size=43,44 and I check "45" - then how could you set size=43,44,45 ? :-) That is my problem at the moment — denlau
– denlau, Commented Sep 7, 2012 at 19:36

Barmar · Accepted Answer · 2012-09-07 20:06:38Z

I solved it this way:

$(document).ready( function() {
        var params = [];

        $(".searchParam").click(function(){
            params = [];
            $(".searchParam").each(function(index){
                var name = $(this).attr('name');
                var values = $('.'+ name +' input:checkbox:checked').map(function (){ return this.value }).get();

                if(values.length > 0){
                    params.push({'name': name, 'values': values }); 
                }           
            });

            var curUrl = $(location).attr('href');
            var newUrl = curUrl.split('/');
            var urlNumPar = newUrl.length - 1;

            var redirectURL = '';

            $(newUrl).each(function(index, val){
                if( index == urlNumPar)
                {
                } else {
                    redirectURL += val+"/";
                }
            });

            $(params).each(function(index, val){
                if(params.length > 1 && index > 0)
                {
                    redirectURL += ".";
                }
                redirectURL += val['name'] + "=" + val['values'];
            });

            window.location.href = redirectURL;
        });
    });

Collectives™ on Stack Overflow

Use jquery to insert search parameters in URL

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related