How to find url parameters in JavaScript, or jQuery, then apply an event listener?

Question

So I have this url: /somepage/goes-here/something?image=main_image.jpg&type=shirt

How do I get out the two different attributes to then apply an eventListener to them?

I've tried the following:

var originalUrl = window.location.href
var type = originalUrl.search.get("type");
var image = originalUrl.search.get("image");

But I don't really think I'm getting the attributes with .search.get. Plus it errors with .search.get("type") is not a function.

I've also tried the following:

function getParam(param){
return new URLSearchParams(window.location.search).get(type);
}

I'm honestly not too familiar with URLSearchParams but wouldn't it be similar to above? How would I get both params here?

I also have for jQuery, which I'm not familiar with, the following:

$(function(){
$.url.attr('image')
$.url.attr('type')
});

This one...no idea. But it fails as it's not bringing in the url.

I don't. I want to add event listeners to buttons that are associated with the parameters. For instance the image has a container around it that I want to be made active. And the type is actually associated with a button. Based on the image and the type being present I want their associations to be made active. Step one, read through and find the parameters being passed. Step two, apply event listeners. — Jake
– Jake, Commented Dec 6, 2017 at 18:44

Carl Edwards · Accepted Answer · 2017-12-06 19:06:17Z

3

Alternatively you could construct a URL object and grab them as so:

var originalUrl = new URL(location.href);
var type = originalUrl.searchParams.get('type');
var image = originalUrl.searchParams.get('image');

One thing to note. As of this post it seems that it's not supported by IE.

answered Dec 6, 2017 at 18:49

Carl Edwards

14.6k12 gold badges70 silver badges131 bronze badges

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

2 Comments

Using searchParams.get('type') would I get shirt?

If your url was something like http://example.com/?type=shirt I would assume so.