Getting url from 2 groups of radio buttons

Question

I'm trying to find an url based on two groups of radio buttons, my html look like these:

<form>
  <fieldset>
    <label><input type="radio" name="comp" id="pink" value="Pink">Pink</label>
    <label><input type="radio" name="comp" id="black" value="Black">Black</label>
    <br>
    <br>
    <label><input type="radio" name="skin" id="fair" value="Fair">Fair</label>
    <label><input type="radio" name="skin" id="medium" value="Medium">Medium</label>
    <label><input type="radio" name="skin" id="tan" value="Tan">Tan</label>
    <label><input type="radio" name="skin" id="dark" value="Dark">Dark</label>
  </fieldset>
</form>

<a href="url from script">CONTINUE</a>

I know that I here have to use javascript in order to get the correct url.

I imagine that it must be built somewhat like this:

if comp = "pink" then
  switch(skin)
  {
    case Fair:
      url = www.pinkfair.com;
      break;
    case Medium:
      url = www.pinkmedium.com;
      break;
    case Tan:
      url = www.pinktan.com;
      break;
    case Dark:
      url = www.pinkdark.com;
      break;
    }
else
  switch(skin)
  {
    case Fair:
      url = www.blackfair.com;
      break;
    case Medium:
      url = www.blackmedium.com;
      break;
    case Tan:
      url = www.blacktan.com;
      break;
    case Dark:
      url = www.blackdark.com;
      break;
    }

But as you can see i'm at bit of a javascript novice, is there anyone who can help me fine-tune the code.

Thanks in advance.

/Jean

Answer 1

A solution would be adding specific classes to radio buttons like this (you can also use selectors by name, I personally find selecting classes easier):

<form>
  <fieldset>
    <label><input class="first" type="radio" name="comp" id="pink" value="Pink">Pink</label>
    <label><input class="first" type="radio" name="comp" id="black" value="Black">Black</label>
    <br>
    <br>
    <label><input class="second" type="radio" name="skin" id="fair" value="Fair">Fair</label>
    <label><input class="second" type="radio" name="skin" id="medium" value="Medium">Medium</label>
    <label><input class="second" type="radio" name="skin" id="tan" value="Tan">Tan</label>
    <label><input class="second" type="radio" name="skin" id="dark" value="Dark">Dark</label>
  </fieldset>
</form>

<a class="resultLink" href="url from script">CONTINUE</a>

...and since you already keep parts of output url as values/ids, have jQuery handle the rest...

$('.first, .second').change(function() {
    var firstPart = $('.first:checked').val();
    var secondPart = $('.second:checked').val();
    var url = 'www.' + firstPart + secondPart + '.com';

    $('.resultLink').attr('href', url);
})

For more complex scenario, use solution provided by Sajad Deyargaroo.

Answer 2

As we have to fetch the url based on the selected radio buttons from two radio button groups, the logic that you have written will actually work perfectly fine. I have written the same in JavaScript/JQuery as you can see below.

But before that I want to show you the simple solution by adding the url attributes to the radio buttons, which will reduce code a little bit.

Here is the working (tested) solution.

Html

<form>
  <fieldset>
    <label><input type="radio" name="comp" id="pink" value="Pink">Pink</label>
    <label><input type="radio" name="comp" id="black" value="Black">Black</label>
    <br>
    <br>
    <label><input type="radio" name="skin" id="fair" value="Fair" data-pinkurl="www.pinkfair.com" data-blackurl="www.blackfair.com" >Fair</label>
    <label><input type="radio" name="skin" id="medium" value="Medium" data-pinkurl="www.pinkmedium.com" data-blackurl="www.blackmedium.com">Medium</label>
    <label><input type="radio" name="skin" id="tan" value="Tan" data-pinkurl="www.pinktan.com" data-blackurl="www.blacktan.com">Tan</label>
    <label><input type="radio" name="skin" id="dark" value="Dark" data-pinkurl="www.pinkdark.com" data-blackurl="www.blackdark.com">Dark</label>
  </fieldset>
</form>

Script

var comp = $("input[type='radio'][name='comp']:checked").val();
var url = '';

if (comp == "Pink"){
   url = $("input[type='radio'][name='skin']:checked").attr("data-pinkurl");
}
else{
   url = $("input[type='radio'][name='skin']:checked").attr("data-blackurl");
}

Also, as mentioned above, below is your updated code, which works fine as well.

var comp = $("input[type='radio'][name='comp']:checked").val();
var skin = $("input[type='radio'][name='skin']:checked").val();
var url = '';

if (comp == "Pink"){
  switch(skin)
  {
    case "Fair":
      url = "www.pinkfair.com";
      break;
    case "Medium":
      url = "www.pinkmedium.com";
      break;
    case "Tan":
      url = "www.pinktan.com";
      break;
    case "Dark":
      url = "www.pinkdark.com";
      break;
    }
}
else{
  switch(skin)
  {
    case "Fair":
      url = "www.blackfair.com";
      break;
    case "Medium":
      url = "www.blackmedium.com";
      break;
    case "Tan":
      url = "www.blacktan.com";
      break;
    case "Dark":
      url = "www.blackdark.com";
      break;
    }
}

Finally, if you don't want to use jQuery and want a pure JavaScript based solution then you need to check each radio button and see if it has been selected.

if (document.getElementById('pink').checked) {
  comp = document.getElementById('pink').value;
}