JavaScript to put multiple Blogger labels into URL and then 'open' on click?

Question

I'm sure JavaScript can do this easily but I'm a novice.

My blogger site has many labels applied to the posts. I want the user to be able to load a URL with multiple labels to effectively filter the results, according to the radio buttons they choose.

http://my.blogspot.com/feeds/posts/default/-/lable1/label4/lable17

The form would look like this:

0 Inside
X Outside

0 Kids
X Adults

X Easy
0 Hard


0 Option 1
0 Option 2
0 Option 3
X Option 4
0 Option 5
0 Option 6
0 Option 7

[get games]

It would load this URL when they press "get games":

http://my.blogspot.com/feeds/posts/default/-/outside/adults/easy/option4

Is there a JavaScript guru who can point me to how to do this?

Answer 1

When the button is clicked you need to run JavaScript that looks something like this:

// Get the selected alternatives.
var side = document.querySelector('input[name="side"]:checked').value;
var age = document.querySelector('input[name="age"]:checked').value;
var difficulty = document.querySelector('input[name="difficulty"]:checked').value;
var option = document.querySelector('input[name="option"]:checked').value;

// Construct the URL.
var url = "http://my.blogspot.com/feeds/posts/default/-/" + side + "/" + age + "/" + difficulty + "/" + option;

// Go to the URL.
window.location.href = url;

This assumes that you have HTML that looks something like this for the radio buttons:

<input type="radio" name="side" value="inside" /> Inside
<input type="radio" name="side" value="outside" /> Outside

Where the value attribute is what is going to end up in the URL.

Please note that querySelector is not available for IE < 9. See this question for more on how to get the value of the selected radio button. Using jQuery could be one alternative approach.