How to use jquery to manipulate the querystring

Question

I have a select dropdown with id's mapped to values. On the onChange event I want to redirect to the same url but with 'id=value' appended to the querystring.

How do I check that this 'id' option isn't already in the querystring (I don't want multiple values) and replace / append as necessary.

How do I check if '?' is already in the querystring and append to the url if its not.

Is there an easy way with jquery to do this?

It must do something similar under the hood for $().ajax(url, {options}) calls. I was hoping I could just do $().redirect( url, { id : $(this).val() }) or somesuch.

Thanks in advance.

Note: This page may or may not have a few different query options passed in (which set defaults on other form options) so replacing the whole querystring is not an option.

<html>
<head><script type="text/javascript" src="/jquery-1.3.2.min.js"></script></head>
<body>
  <script>
    $(function(){                                                                                                                                         
        $('#selector').change(function(){                                                                                                                 
            // problem if 'id' option already exists
            var url = location.href + '?;id=' + $(this).val();                                                                                            
            location.assign( url );
        });                                                                                                                                               
    });                                                                                                                                                   
  </script>

  <a href="#" onclick="location.assign( location.pathname )">reset</a>                                                                                      
  <form>                                                                                                                                                    
    <select id='selector' name='id'>                                                                                                                      
        <option value='1'>one</option>                                                                                                                    
        <option value='2'>two</option>                                                                                                                    
        <option value='3'>three</option>                                                                                                                  
    </select>                                                                                                                                             
  </form>
</body>
</html>

possible duplicate of querystring encoding of a javascript object — Sindre Sorhus
– Sindre Sorhus, Commented Nov 15, 2013 at 18:19

CoffeeMonster · Accepted Answer · 2010-01-13 03:04:55Z

I ended up going with a RegExp match to override the options. jQuery.param takes a hash and serialises it to a query_string but it doesn't provide the inverse (breaking up a query_string).

// put function into jQuery namespace
jQuery.redirect = function(url, params) {

    url = url || window.location.href || '';
    url =  url.match(/\?/) ? url : url + '?';

    for ( var key in params ) {
        var re = RegExp( ';?' + key + '=?[^&;]*', 'g' );
        url = url.replace( re, '');
        url += ';' + key + '=' + params[key]; 
    }  
    // cleanup url 
    url = url.replace(/[;&]$/, '');
    url = url.replace(/\?[;&]/, '?'); 
    url = url.replace(/[;&]{2}/g, ';');
    // $(location).attr('href', url);
    window.location.replace( url ); 
};

Then in the html

$('#selector').change(function(){ 
   $.redirect( location.href, { id : $(this).val() })
})

Thanks to everyone that responded.

Alpha Codemonkey · Accepted Answer · 2010-01-12 23:18:01Z

7

setting window.location.search will update the url's query string (and overwrite a value if it already exits)

$('#selector').change(function(){  
  window.location.search = "id=" + $(this).val();
});

answered Jan 12, 2010 at 23:18

Alpha Codemonkey

3,27123 silver badges27 bronze badges

2 Comments

Alpha Codemonkey Over a year ago

What browser? Whats your HTML and JS look like?

crizCraig Over a year ago

Sorry, I was mistaking .search for a 'search' querystring parameter. Really search means the entire querystring in the DOM's location object.

Benkinass · Accepted Answer · 2012-11-02 11:59:15Z

7

Based on CoffeeMonster's answer:

There is a problem when the location.href contains a hash part:

www.example.com#hash becomes www.example.com#hash?id=whatever which results in ?id=whatever not being interpreted by the server.

Fixed it by removing the hash part of the url: url.split("#")[0];

// put function into jQuery namespace
jQuery.redirect = function(url, params) {

    url = url || window.location.href || '';
    url = url.split("#")[0];
    url =  url.match(/\?/) ? url : url + '?';

    for ( var key in params ) {
        var re = RegExp( ';?' + key + '=?[^&;]*', 'g' );
        url = url.replace( re, '');
        url += ';' + key + '=' + params[key]; 
    }  
    // cleanup url 
    url = url.replace(/[;&]$/, '');
    url = url.replace(/\?[;&]/, '?'); 
    url = url.replace(/[;&]{2}/g, ';');
    // $(location).attr('href', url);
    window.location.replace( url ); 
};

Now www.example.com#hash becomes www.example.com?id=whatever

answered Nov 2, 2012 at 11:59

Benkinass

1812 silver badges4 bronze badges

1 Comment

Martijn Pieters Over a year ago

Now, for bonus points, re-attach the hash to the end of the url. :-)

Jacob Relkin · Accepted Answer · 2010-01-12 23:52:25Z

2

This works like a charm:

jQuery.redirect = function( url ) {
   window.location.replace( url );  
};
$( "#selector" ).change( function() {
    var href = window.location.href.substring( 0, window.location.href.indexOf( '?' ) );
    $.redirect( href + '?id=' + $( this ).val() );
} );

edited Jan 12, 2010 at 23:52

answered Jan 12, 2010 at 23:14

Jacob Relkin

163k34 gold badges351 silver badges321 bronze badges

Comments

Danny Roberts · Accepted Answer · 2010-01-12 23:14:12Z

1

Try using the split function:

var url = location.href.split('?')[0] + '?;id=' + $(this).val();

split returns a list made up of the string split up by the string (like '?'), with that string removed.

answered Jan 12, 2010 at 23:14

Danny Roberts

3,61225 silver badges28 bronze badges

Comments

Grimace of Despair · Accepted Answer · 2010-02-25 09:34:15Z

0

I suspect the alleged solution is not working with specific variable names. Especially the line:

RegExp( ';?' + key + '=?[^&;]*', 'g' )

If key is a character sequence present elsewhere within the querystring, that occurrence will be mistakenly replaced also (try one letter, e.g. 'a'). This is because the regex leaves the string boundaries open (leading ';' and trailing '=' are both optional). Maybe the epxression better be something like:

RegExp( '[;&]' + key + '=?[^&;]*', 'g' )

Though I haven't tested it yet.

answered Feb 25, 2010 at 9:34

Grimace of Despair

3,52628 silver badges41 bronze badges

1 Comment

CoffeeMonster Over a year ago

Nice bug find! Just checked my code and I'm passing in client_id=12;project_id=45; etc. but I see how easily it would break with just id= I think I'll go with something like RegExp( '[;&]?\b' ... ) Will test when I get to work. Thanks.

Collectives™ on Stack Overflow

How to use jquery to manipulate the querystring

6 Answers 6

Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related