How to change this html and script to work with 6 different buttons vs 6 radio & 1 button

Question

I'm working on a page redesign, and I've added 6 different buttons for the 6 options a user can choose instead of 6 radio boxes & 1 button. I just need to adjust the code to make sure that on the next page, the right total and text is displayed based on what button is pushed.

I just need some of the text on the next page to change depending on which of the buttons is pressed.

Here is what was there originally:

<input id="diamondmonthly" class="radio" type="radio" value="diamondmonthly" name="membership">

<input id="diamondyearly" class="radio" type="radio" checked="checked" value="diamondyearly" name="membership">

<input id="c4" class="radio" type="radio" value="c4" name="membership">

<input id="c3" class="radio" type="radio" value="c3" name="membership">

<input id="c2" class="radio" type="radio" value="c2" name="membership">

<input id="c1" class="radio" type="radio" value="c1" name="membership">

<a id="btnSave" class="xlarge button-submit" onclick="$j('#btnSave').attr('disabled', 'disabled');qc.recordControlModification('btnSave', 'Enabled', '0'); qc.pB('MembershipForm', 'btnSave', 'QClickEvent', '');" href="#">

<script>
//<![CDATA[
qc.registerForm(); qc.imageAssets = "http://images.comfiles.com/assets/images"; qc.cssAssets = "http://images.comfiles.com/assets/css"; qc.phpAssets = "/assets/php"; qc.jsAssets = "http://images.comfiles.com/assets/js"; qc.regCA(new Array("btnSave","btnSave2","c1","c2","c3","c4","diamondyearly","diamondmonthly")); jQuery(document).ready(function($j){if($j.isFunction($j().tooltip)){$j("#MembershipForm :input[data-error]").tooltip({ position: "center right", tipClass: "error_tooltip", offset: [0, -4] })}}); 
//]]>
</script>

Answer 1

This can be dealt with using a listener one each button, or by delegating the work to a single ancestor element. In this case, it's probably easiest to put a single click listener on the form. When it's called, you can use the associated event object to see where it came from and react accordingly.

Note that when getting form controls by name, if only a single control has that name then only a single element is returned. If two or more controls have the name, then a HTMLCollection of the elements with that name is returned.

The listener can be something like:

<form onclick="handleClick(this)" ...>

And the listener (untested but you should be able to get it going from here):

function handleClick(form) {
  var button, buttons = form['membership'];

  // Now show text depending on which membership button is checked
  for (var i=0, iLen=buttons.length, i<iLen; i++) {
      button = buttons[i];

      // Assuming that the text element to display has an ID 
      // matching the value of the checked button
      if (button.checked) {
        document.getElementById(button.value).style.display = '';
      } else {
        document.getElementById(button.value).style.display = 'none';
      }
  }
}

The script will run every time there is a click anywhere in the form, so the right text will always be displayed, even if the reset button is clicked.

The if..else can be replaced by:

      document.getElementById(button.value).style.display = button.checked? '' : 'none';

but the longer version may be clearer.

Oh, and get rid of the CDATA delimiters in the script element, they are only required for documents that are served as XML.