Question

I’m a novice. I’ve made a code based on this post:
SUM radio button values and checkboxes values in one calculation – javascript and html

I’ve made two groups of radio buttons with the values 1-5 (first group), and 100-500 (second group).
I need the value of the selected button from each groups to make different calculations with them and display the results.

Here I’ve multiplied the value of the first group with 2 and added the value of the second group. Now I want to display the result of an other calculation. For example:

var sum=parseInt(val1-3) + parseInt(val2*4)          

How can I display both the results at the same time in separate “cells”.

<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
<p><input id="rdo_1" type="radio" value="1" name="price" onClick="DisplayPrice(this.value);"><label for="radio1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="2" name="price" onClick="DisplayPrice(this.value);"><label for="radio2">Radio 2</label></p>
<p><input id="rdo_3" type="radio" value="3" name="price" onClick="DisplayPrice(this.value);"><label for="radio3">Radio 3</label></p>
<p><input id="rdo_4" type="radio" value="4" name="price" onClick="DisplayPrice(this.value);"><label for="radio4">Radio 4</label></p>
<p><input id="rdo_5" type="radio" value="5" name="price" onClick="DisplayPrice(this.value);"><label for="radio5">Radio 5</label></p>
</form>                    

<hr>

<form name="form2" id="form2" runat="server">
<legend>Header 2</legend>
<p><input id="rdo_1" type="radio" value="100" name="price2" onClick="DisplayPrice(this.value);"><label for="rad1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="200" name="price2" onClick="DisplayPrice(this.value);"><label for="rad2">Radio 2</label></p>
<p><input id="rdo_3" type="radio" value="300" name="price2" onClick="DisplayPrice(this.value);"><label for="rad3">Radio 3</label></p>
<p><input id="rdo_4" type="radio" value="400" name="price2" onClick="DisplayPrice(this.value);"><label for="rad4">Radio 4</label></p>
<p><input id="rdo_5" type="radio" value="500" name="price2" onClick="DisplayPrice(this.value);"><label for="rad5">Radio 5</label></p>
</form>                             


<p><label for="valueTotal">Value$:</label>
<input type="text" name="valueTotal" id="valueTotal" value="" size="2"readonly="readonly">    </p>

<script type="text/javascript">
function DisplayPrice(price)
{
    var val1 = 0;
    for( i = 0; i < document.form1.price.length; i++ )
    {
        if( document.form1.price[i].checked == true )
        {
            val1 = document.form1.price[i].value;
        }
    }

    var val2 = 0;
    for( i = 0; i < document.form2.price2.length; i++ )
    {
        if( document.form2.price2[i].checked == true )
        {
            val2 = document.form2.price2[i].value;
        }
    }

    var sum=parseInt(val1*2) + parseInt(val2);
    document.getElementById('valueTotal').value=sum;
}
</script>

Answer 1

Simply define different input fields for your results.

<p>
  <label for="valueTotal1">Value1$:</label>
  <input type="text" name="valueTotal1" id="valueTotal1"
  value="" size="2" readonly="readonly" />
</p>
<p>
  <label for="valueTotal2">Value2$:</label>
  <input type="text" name="valueTotal2" id="valueTotal2"
  value="" size="2" readonly="readonly" />
</p>
<p>
  <label for="valueTotal3">Value3$:</label>
  <input type="text" name="valueTotal3" id="valueTotal3"
  value="" size="2" readonly="readonly" />
</p>

function DisplayPrice() {
  for (i = 0; i < document.form1.price.length; i++) {
    if (document.form1.price[i].checked == true) {
      val1 = document.form1.price[i].value;
    }
  }
  for (i = 0; i < document.form2.price2.length; i++) {
    if (document.form2.price2[i].checked == true) {
      val2 = document.form2.price2[i].value;
    }
  }

  if (val1 != null && val2 != null) {
    document.getElementById('valueTotal1').value = parseInt(val1) * 2 + parseInt(val2);
    document.getElementById('valueTotal2').value = parseInt(val1) * 3 + parseInt(val2);
    document.getElementById('valueTotal3').value = parseInt(val1) * 4 + parseInt(val2);
  }
}

If you are allowed to use jQuery, you could simplyfy the function:

function DisplayPrice() {
  var val1 = $('input[name=price]:radio:checked').val();
  var val2 = $('input[name=price2]:radio:checked').val();

  if(val1 != null && val2 != null) {
    $('#valueTotal1').val(parseInt(val1) * 2 + parseInt(val2));
    $('#valueTotal2').val(parseInt(val1) * 3 + parseInt(val2));
    $('#valueTotal3').val(parseInt(val1) * 4 + parseInt(val2));
  }
}

I created two fiddles: with jQuery and without

Please note one other thing: Don’t write parseInt(val1-3). You can’t subtract 3 before the string is converted to an integer.

Edit
If you want to have default values, you can write them into the variables before searching for the checked radio button. If no checked button in found, the default value will stay the same. An other solution would be to check whether the variable is still empty and fill it with the default value after searching for the checked button.

function DisplayPrice() {
  //Default values - solution I
  var val1 = 1;
  var val2 = 1;

  val1 = $('input[name=price]:radio:checked').val();
  val2 = $('input[name=price2]:radio:checked').val();

  //Default values - solution II
  if(val1 == null) {
    val1 = 1;
  }
  if(val2 == null) {
    val2 = 1;
  }

  if(val1 != null && val2 != null) {
    $('#valueTotal1').val(parseInt(val1) * 2 + parseInt(val2));
    $('#valueTotal2').val(parseInt(val1) * 3 + parseInt(val2));
    $('#valueTotal3').val(parseInt(val1) * 4 + parseInt(val2));
  }
}