JavaScript - How To Add Radio Button Values Together Based On Radio Button Clicked?

I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with.

I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this:

Code:

<thead><tr class="Answers">

			<th class='c1 BorderColor' width="25%" class='c1'> &nbsp; </th>
		<th class='c2 BorderColor' class='c2 yAxisBorder' > &nbsp; </th>
		<th class='c3 BorderColor' class='c3 yAxisBorder' > &nbsp; </th>
	
	
										
		<th width="25%" class='Selection BorderColor c4   ' id='header~QID19~1~4' >

			<label>Disagree</label>
		</th>
										
		<th width="25%" class='Selection BorderColor c5   ' id='header~QID19~2~5' >
			<label>Neither agree nor disagree</label>
		</th>
										
		<th width="25%" class='Selection BorderColor c6 last  ' id='header~QID19~3~6' >
			<label>Agree</label>

		</th>
	
	
</tr></thead><tr class='ChoiceRow   '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3'  ></td></tr><tr class='ChoiceRow ReadableAlt  '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3'  ></td></tr><tr class='ChoiceRow  bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3'  ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div>

I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads.

What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered.

I used the following JS code:

Code:

var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');

function getLabels()
  {
    for (x=0; x<spans.length; x++)
  {
    if (spans[x].className == "LabelWrapper")
    {
      labelspans.push(spans[x]);
    }
  }
    for (y=0; y<labelspans.length; y++)
  {
   labels.push(labelspans[y].firstChild);
   radioname.push(labelspans[y].firstChild.htmlFor);
  }
}
  
function getRadios()
{   
  //will put all radio groups into the "radiolist" array
  for (z=0; z<radioname.length; z++)
   {
     radiolist.push(document.getElementsByName(radioname[z]));
     //will add Event Listener to each radio button, and add each one to the "radios" array
     for (i=0; i<radiolist[z].length; i++)
       {
        chkradio = radiolist[z][i];
        chkradio.setAttribute("count",Number(z));
        chkradio.addEventListener("click", function(){changeLabel()}, false);
        radios.push(chkradio);
       }
  }
}

function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly          
   {
    for (w=0; w<radios.length; w++)   
      {
       if (radios[w].checked)
           {
            a = radios[w].getAttribute("count");
            labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
           }
       }
    }
getLabels();  
getRadios();

This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster?

Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative?

I would like to display one of two different <div> tags based on a radio button.

In essence, this would be the "basic" and "advanced" options as the user end. Can this be done easily or will it be complex?

Hello I am very new to Java Script. I am working on a website which requires me to use it. The site is selling items that are priced depending on the size. There are 6 fixed sizes for the width and the length can come in any size 1 through 200. So that will be user input on the length and radio buttons on the width. I am trying to have the user put in the length and click a radio button for width and then calculate the price by multiplying them. I am trying to get 1 price to display right now just to test it but I can't figure out why it isn't working. Again I am fairly new at this so there might be multiple problems with my code. Thanks in advance for the help.
Code:

<script type = "text/javascript">
function buttoncheck(){
	var selection1 = document.menu.selection;
	if (selection1 == 60) {choice1()}
	if (selection1 == 50) {choice2()}
	if (selection1 == 25) {choice3()}
	if (selection1 == 10) {choice4()}
	if (selection1 == 4) {choice5()}
	if (selection1 == 2) {choice6()}
	
function choice1(){
	var len = Number(document.getElementById("length").value) || 0;
	var area1 = selection1 * len;
	var cost = 0;
	if (area1 == 60) { cost = 60}
	return cost;
	document.getElementById("TotalCost").innerHTML = "$" + cost.toFixed(2); 
}

Code:

<h4 class="auto-style3">Pricing Calculator:</h4>
<p>
<form method="post">
	<div class="auto-style1">
		<span class="auto-style2">LENGTH:</span>
		<input name="length" type="text" id="length" /><br />
</form>
	<div class="auto-style1">
	
<form name="menu">
<input type="radio" value="60" name="selection">60 inch</input>
<input type="radio" value="50" name="selection">50 inch</input>
<input type="radio" value="25" name="selection">25 inch</input>
<input type="radio" value="10" name="selection">10 inch</input>
<input type="radio" value="4" name="selection">4 inch label</input>
<input type="radio" value="2" name="selection">2 inch label</input>
</form>


&nbsp;</div>
	<p class="auto-style1">

			<input type="button" value="Calculate" onClick="buttoncheck()" </p>
</p>
<p>&nbsp;</p>
			&nbsp;<span id="TotalCost"></span><script type = "text/javascript">
		document.getElementById("TotalCost").innerHTML = "Total cost is $" + cost.toFixed(2);

I am a complete JS noob. I have been googling for hours trying to find a way to implement what I think is a simple thing - but alas my deadline is here, and I need to solve this and seek guidance from courteous experts!

In a nutshell I have a simple form that has radio buttons:

Code:

<p><input id="amount" name="amount" type="radio" value="125" />$125</p>
<p><input id="amount" name="amount" type="radio" value="75" />$75</p>
<p><input id="amount" name="amount" type="radio" value="50" />$50</p>
<p><input id="amount" name="amount" type="radio" value="25" />$25</p>
<p><input id="amount" name="amount" type="radio" value="other" /><input id="other_amount" name="other_amount" type="text" maxlength="7" style="width:100px;" /> Other ($10 minimum donation)</p>

The point of the form is to assign the value to "amount" for sending on to a paypal form.

The problem is, I need the value of "amount" to change (be assigned) if they chose "other". To take the value from the text input box "other_amount" and assign it to "amount" but only if they chose the 5th radio button.

I have some JS that I hacked together that checks to see if they chose the 5th radio button. attempts to assign the "other amount" to "amount" and then pops up an alert (only so I know the script is pushing the right value - wont be needed when complete.)

However, Even though the alert pops up with the proper "other_amount" as if it has been assigned properly, the data is not sent on properly I presume, as it is the only aspect of the paypal donation amount form that is not working or providing the next page with the right "amount" pre-determined.

Code:

<script type="text/javascript">
<!--

function get_radio_value()
{
if (document.donation.amount[4].checked)
	{
	document.getElementById('amount').value = document.donation.other_amount.value;
	alert(document.getElementById('amount').value);
	}
	
}
//-->
</script>

Help please!
Many thanks in advance!
Deadline agh!

Hi i have 2 radios :

what i need is once i choose the 1st radio i will get 1st DDL with folollwing element :

Orange
Apple
Kiwi


if i chose the 2nd radio i should have the 2nd DDL with :

Potato
Tomato
legume

?

thanks