Change an link depending on the radio button options selected using jquery

I have a form with two radio button groups. The form doesn't have a submit b开发者_JAVA百科utton but will have a <a href="varible address"> instead.

When the users clicks the A tag it will take them to a different place depending on which radio button options they've selected.

i.e

radiogroupone value ="YES"

radiogrouptwo value ="YES"

Result = <a href="www.addressone.com">Continue</a>

radiogroupone value ="YES"

radiogrouptwo value ="No"

Result = <a href="www.addresstwo.com">Continue</a>

radiogroupone value ="No"

radiogrouptwo value ="No"

Result = <a href="www.addressthree.com">Continue</a>

radiogroupone value ="No"

radiogrouptwo value ="Yes"

Result = <a href="www.addressfour.com">Continue</a>

I'd like to use jquery to perform this im quite new to anything other than the complete basics with jquery. I think i need to use IF statements and VARIBLES.

<form name="formone" id="optionsform">
<fieldset>
<label><input type="radio" name="group1" id="ac-yes" value="Yes">Yes</label>
<label><input type="radio" name="group1" id="ac-no" value="No">No</label>

<label><input type="radio" name="group2" id="bt-yes" value="Yes">Yes</label>
<label><input type="radio" name="group2" id="bt-no" value="No">No</label>

<a href="varible-address">CONTINUE</a>
</fieldset>
</form>

I'd go with something along these lines:

$('#optionsform input[type="radio"]').click(function() {
    var g1 = $("#ac-yes").is(":checked");
    var g2 = $("#bc-yes").is(":checked");

    var addr = "";
    if (g1) {
        if (g2) addr = "www.addressone.com";
        else    addr = "www.addresstwo.com";
    } else {
        if (g2) addr = "www.addressfour.com";
        else    addr = "www.addressthree.com";
    }
    $("#optionsform a").attr('href', addr);
});

Simply retrieve the checked state of the 'Yes' buttons in each of your groups and decide upon that. Since you want the URL of your link to change whenever you change the selection, you bind the function to the click event of all the radio buttons.

A small tip is that adding a class to all your radio buttons would simplify the #optionsform input[type="radio"] selector to just .yourclass.

...or you CAN use an array to store the various possibilities :

<form name="formone" id="optionsform">
<fieldset>
<label><input type="radio" name="group1" id="ac-yes" value="1">Yes</label>
<label><input type="radio" name="group1" id="ac-no" value="0">No</label>

<label><input type="radio" name="group2" id="bt-yes" value="2">Yes</label>
<label><input type="radio" name="group2" id="bt-no" value="0">No</label>

<a href="varible-address">CONTINUE</a>
</fieldset>
</form>
<script>
    $(function(){
      var urls = new Array();
      urls[0]='http://myurl1/';// no + no
      urls[1]='http://myurl2/';// yes + no
      urls[2]='http://myurl3/';// no + yes
      urls[3]='http://myurl4/';// yes + yes

      $('input[type=radio]').click(fonction(){
        var score = 0;
        $('input[type=radio]:checked').each(function(){score+=parseInt($(this).val())});//was missing ) before the the curly bracket
        $('a').attr('href',urls[score]);
      });//was missing ) and ;
   });
</script>

The advantage here is that you can easily add more choices.