Radio input and alert in Javascript

I need some help. I have program that changes table values based on user input in radio box similar to this page:

clicky

But the problem is I want users to select the radio input only once; if they select another radio then values of tables get messed up. So what I want to know is how can I make an alert box whe开发者_开发百科n user selects the radio input twice?

Similar to this website clicky try clicking radio button twice and alert popsup.

Please can anyone help?

It's difficult to prevent an event on a radio button input node without bringing in help from outside libraries. A simple solution is to just disable the buttons from within an onclick function attached to each input node. Like so: http://jsfiddle.net/c73Mh/ . If they still need to be able to select the radio buttons for whatever reason, you can cancel the selection by selecting the button that was initially selected from within that same function. Hope this helps!

For simplicity in my example I'm assuming that the id of each radio button is a combination of the name and value attributes. In addition to what I've given you below you will need to add a reset() function of some kind that sets selectedValues = {}; and deselects all radio buttons.

<input type="radio" name="group1" value="A" id="group1A" onclick="radioClicked(this);" />First option
<input type="radio" name="group1" value="B" id="group1B" onclick="radioClicked(this);" />Second option

<input type="radio" name="group2" value="A" id="group2A" onclick="radioClicked(this);" />First option
<input type="radio" name="group2" value="B" id="group2B" onclick="radioClicked(this);" />Second option

var selectedValues = {};

function radioClicked(rb) {
  if (selectedValues[rb.name] === undefined) {
    selectedValues[rb.name] = rb.value;
    doTableProcessing();
  }
  else {
    alert("You can't change the selected values");
    document.getElementById(rb.name + selectedValues[rb.name]).checked = true;
  }
}