Combining Radio button values into a hidden form element using jquery or javascript

Question

I have form where people search for a profile match on two values. In this case their role Specialist, Doctor or Nurse and their ranking - Gold, Silver or Bronze.

I need to be able to join these values and send to a hidden input which is submitted with the form. For example <input name="Icon" type="hidden" value="NurseSilver" /> is then used to determine which icon can be represented on a map that's returned. My code is looking something like this...

<input type="radio" name="role" value="Specialist" id="role1" />
<input type="radio" name="role" value="Doctor" id="role2" />
<input type="radio" name="role" value="Nurse" id="role3" />

<input type="radio" name="rank" value="Gold" id="rank1" />
<input type="radio" name="rank" value="Silver" id="rank2" />
<input type="radio" name="rank" value="Bronze" id="rank3" />

<input name="Icon" type="hidden" value="" />

Thanks for looking...

Answer 1

$('input[type=radio]').change(function(){
   $('input[name=Icon]').val(
      $('input[name=role]:checked').val()+
      $('input[name=rank]:checked').val()
   );
});

Answer 2

You can do something like this:

var selRole = $(":radio[name=role] :checked").val();
var selRank = $(":radio[name=rank] :checked").val();
$(":hidden[name=Icon]").val(selRole + selRank);