Constructing a URL with parameters using jQuery

Question

I have for example the following URL stored in a global variable:

var myUrl = "http://mydomain.com/something?row=1";

Then a function has to add let's say another parameter called "column". How would that function add parameters to a pre-existing URL string using jQuery?

Example of the expected generated string:

"http://mydomain.com/something?row=1&column=9"

The problem is that myUrl could also be just:

var myUrl = "http://mydomain.com/something";

(Notice that there are not pre-existing parameters)

There is a component that needs that URL and has it's own way to fetch data using AJAX. — Alfredo Osorio
– Alfredo Osorio, Commented Jan 17, 2012 at 22:10

Jesse Pollak · Accepted Answer · 2012-01-17 22:09:10Z

58

Check out the jQuery function .param(), that should do the trick.

http://api.jquery.com/jQuery.param/

You can then just create a function which appends the string generated by .param() to a url.

answered Jan 17, 2012 at 22:09

Jesse Pollak

1,6001 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ioquatix Over a year ago

What happens if the string already has parameters? Or the string already has parameters with the same name?

johncip Over a year ago

In that case the best thing is probably to parse the URL up front, then rebuild it later with jQuery.param or similar. "The string is a stark data structure..."

epascarello · Accepted Answer · 2012-01-17 22:25:13Z

25

var myUrl = "http://mydomain.com/something";

function addQSParm(name, value) {
    var re = new RegExp("([?&]" + name + "=)[^&]+", "");

    function add(sep) {
        myUrl += sep + name + "=" + encodeURIComponent(value);
    }

    function change() {
        myUrl = myUrl.replace(re, "$1" + encodeURIComponent(value));
    }
    if (myUrl.indexOf("?") === -1) {
        add("?");
    } else {
        if (re.test(myUrl)) {
            change();
        } else {
            add("&");
        }
    }
}

console.log(myUrl);

addQSParm("foo", "asdf");
console.log(myUrl);

addQSParm("bar", "qwerty");
console.log(myUrl);

addQSParm("foo", "123");
console.log(myUrl);

jsFiddle

answered Jan 17, 2012 at 22:25

epascarello

208k20 gold badges206 silver badges246 bronze badges

1 Comment

RugerSR9 Over a year ago

Using the regex ([?&]" + name + "=)([^&]+)? will work better. This enables finding empty parameters within a URL.

Andrew Hare · Accepted Answer · 2012-01-17 22:09:39Z

21

You don't need jQuery, use a function like this:

var buildUrl = function(base, key, value) {
    var sep = (base.indexOf('?') > -1) ? '&' : '?';
    return base + sep + key + '=' + value;
}

You would use it like this:

buildUrl('http://www.example.com/foo', 'test', '123');
buildUrl('http://www.example.com/foo?bar=baz', 'test', '123');

answered Jan 17, 2012 at 22:09

Andrew Hare

353k75 gold badges649 silver badges642 bronze badges

2 Comments

Jon Koeter Over a year ago

This does not take into account that the parameter could already exist. It would be obvious when you invoke it the way you do in the examples, but it would not be obvious when you add parameters to the URL when all the parameters come from other variables.

Suma Over a year ago

This is missing URL encoding.

Esailija · Accepted Answer · 2012-01-17 22:17:43Z

4

Keep everything in an object until you actually need a string.

First populate the object from some initial values:

var $_GET = location.search.substr(1).split("&").reduce( function( obj, val ){
    if( !val ) return obj;
    var pair = val.split("=");
    obj[pair[0]] = pair[1];
    return obj;
}, {} );

Considering initial url of: "http://mydomain.com/something?row=1&column=9"

$_GET['column'] = 5;

$.param( $_GET ); //"row=1&column=5"

Array#reduce

answered Jan 17, 2012 at 22:17

Esailija

140k24 gold badges280 silver badges328 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2012-01-17 22:11:33Z

3

You can try this.

myUrl += ((myUrl.indexOf('?') == -1) ? '?' : '&');
myUrl += "column=9";

answered Jan 17, 2012 at 22:11

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

Omar Stewey · Accepted Answer · 2012-01-17 22:14:54Z

-2

if (myUrl.indexOf("?") != -1){
    // contains query string
}
else
{
    // doesn't
}

answered Jan 17, 2012 at 22:14

Omar Stewey

2242 silver badges9 bronze badges

2 Comments

Ryan Kohn Over a year ago

This question asks about constructing the query string, not reading it.

Omar Stewey Over a year ago

I don't think you read the question. It's about detecting query string parameters.

Collectives™ on Stack Overflow

Constructing a URL with parameters using jQuery

6 Answers 6

2 Comments

1 Comment

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related