Question

I have a form with two radio button groups. The form doesn’t have a submit button 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>

Answer 1

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.