www.webdeveloper.com
Results 1 to 5 of 5

Thread: calculate form values from radio group

Hybrid View

  1. #1
    Join Date
    Feb 2014
    Posts
    2

    calculate form values from radio group

    Trying to calculate a selection value from a radio group and values from other fields. Any 'Name' input adds a value to the Total. I need the value from the radio group to be added to that total. Here is the HTML:

    HTML Code:
    <table>
        <tr>
          <td><label>
              <input type="radio" name="sponsorship" value="3000" id="sponsor1" />
              $3,000</label>
            <br />
            <label>
              <input type="radio" name="sponsorship" value="1500" id="sponsor2" />
              $1,500</label>
            <br />
            <label>
              <input type="radio" name="sponsorship" value="1000" id="sponsor3" />
              $1,000</label>
            <br /></td>
        </tr>
        <tr>
          <td>Name 1 <INPUT NAME="Name_1" TYPE="TEXT" id="name1" onchange="updatecost(1, 50)" onkeyup="updatecost(1, 50)" VALUE="" size="30"></td>
          <td><INPUT NAME="cost_1" TYPE="TEXT" VALUE="" size="4" id="cost1"></td>
        </tr>
        <tr>
          <td>Name 2<INPUT NAME="Name_2" TYPE="TEXT" id="name2" onchange="updatecost(2, 50)" onkeyup="updatecost(2, 50)" VALUE="" size="30"></td>
          <td><INPUT NAME="cost_2" TYPE="TEXT" VALUE="" size="4" id="cost2"></td>
        </tr>
        <tr>
          <td>Name 3<INPUT NAME="Name_3" TYPE="TEXT" id="name3" onchange="updatecost(3, 50)" onkeyup="updatecost(3, 50)" VALUE="" size="30"></td>
          <td><INPUT NAME="cost_3" TYPE="TEXT" VALUE="" size="4" id="cost3"></td>
        </tr>
        <tr>
          <td colspan="4">Total:
            <INPUT NAME="Total" id="Total" TYPE="TEXT" VALUE="" size="8" onFocus="this.form.elements[0].focus()" >
            <INPUT TYPE="HIDDEN" onchange="totalcost()" onkeyup="totalcost()"></td>
        </tr>
      </table>
      <INPUT TYPE="SUBMIT" VALUE="Submit">
      <input type="RESET" name="Reset" value="Reset" />
    </FORM>
    And here is the js:

    Code:
    <script language="JavaScript" type="text/javascript">
    function getRadioValue(name) {
        var group = document.getElementsByName('sponsorship');
        for (var i=0;i<group.length;i++) {
            if (group[i].checked) {
                return group[i].value;
            }
        }
        return '';
    }
    
    
    function updatecost(num, dollars) {
        var text = document.getElementById("name" + num);
        var cost = document.getElementById("cost" + num);
        if (!text) return;
        if (!cost) return;
        if (text.value == "") {
            cost.value = "";
        }
        else {
            cost.value = dollars;
        }
        totalcost();
    }
    function totalcost() {
        var total = 0;
        for (var i = 1; i <= 3; i++) {
            var cost = document.getElementById("cost" + i);
            if (cost.value) total += Number(cost.value);
        }
    
    
        document.getElementById("Total").value = total;
    }
    
    
    //-->
    </script>
    What am I missing? By the way, in case it is not clear, I am a JS novice, so I fully accept criticism that helps me understand a more fundamental error in my approach. Simple is best for me: ;-) Thank you in advance.

  2. #2
    Here is my approach. I think a single function will do the trick. Call it in a button click.

    function calculateValues(){
    var radioVal = 0;
    var textVal = 0;
    var group = document.getElementsByName('sponsorship');
    for (var i =0; i < 3; i++){
    if (group[i].checked) radioVal = Number(group[i].value);
    var index = i + 1;
    textVal += Number(document.getElementById("cost" + index).value);
    }
    return radioVal + textVal;
    }

  3. #3
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Just minor updates...didn't want to change anything!

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>Untitled</title>
    </head>
    <body>
      <form name="myForm" method="get">
      <table>
        <tr>
          <td><label>
              <input type="radio" name="sponsorship" value="3000" id="sponsor1" checked="checked" />
              $3,000</label>
            <br />
            <label>
              <input type="radio" name="sponsorship" value="1500" id="sponsor2" />
              $1,500</label>
            <br />
            <label>
              <input type="radio" name="sponsorship" value="1000" id="sponsor3" />
              $1,000</label>
            <br /></td>
        </tr>
        <tr>
          <td>Name 1 <INPUT NAME="Name_1" TYPE="TEXT" id="name1"  onkeyup="updatecost(1, 50)" VALUE="" size="30"></td>
          <td><INPUT NAME="cost_1" TYPE="TEXT" VALUE="" size="4" id="cost1"></td>
        </tr>
        <tr>
          <td>Name 2<INPUT NAME="Name_2" TYPE="TEXT" id="name2" onchange="updatecost(2, 50)" onkeyup="updatecost(2, 50)" VALUE="" size="30"></td>
          <td><INPUT NAME="cost_2" TYPE="TEXT" VALUE="" size="4" id="cost2"></td>
        </tr>
        <tr>
          <td>Name 3<INPUT NAME="Name_3" TYPE="TEXT" id="name3" onchange="updatecost(3, 50)" onkeyup="updatecost(3, 50)" VALUE="" size="30"></td>
          <td><INPUT NAME="cost_3" TYPE="TEXT" VALUE="" size="4" id="cost3"></td>
        </tr>
        <tr>
          <td colspan="4">Total:
            <INPUT NAME="Total" id="Total" TYPE="TEXT" VALUE="" size="8">
            <INPUT TYPE="HIDDEN" onchange="totalcost()" onkeyup="totalcost()"></td>
        </tr>
      </table>
      <INPUT TYPE="SUBMIT" VALUE="Submit">
      <input type="RESET" name="Reset" value="Reset" />
    </form>
    </body>
    </html>
    Code:
    function getRadioValue(name) {
        var group = document.getElementsByName('sponsorship');
        for (var i=0;i<group.length;i++) {
            if (group[i].checked) {
                return +group[i].value;
            }
        }
        return 0;
    }
    
    
    function updatecost(num, dollars) {
        var text = document.getElementById("name" + num);
        var cost = document.getElementById("cost" + num);
        if (!text) return;
        if (!cost) return;
        if (text.value == "") {
            cost.value = "";
        }
        else {
            cost.value = dollars;
        }
        totalcost();
    }
    function totalcost() {
        var total = 0;
        for (var i = 1; i <= 3; i++) {
            var cost = document.getElementById("cost" + i);
            if (cost.value) total += Number(cost.value);
        }
    
    
        document.getElementById("Total").value = getRadioValue() + total;
    }

  4. #4
    Join Date
    Feb 2014
    Posts
    2
    Thank you, tech_soul8. This is almost it, except I need the radio group value to populate the total even if no other entry is made. All values need to be totaled, but only the radio value should be required. If only the radio value, then the total should only be that. If other values, they get added to it. A selection of a radio value should immediately add that value to the total. As I write this, I realize an added complexity in that if someone changes their mind about the radio value, the total needs to reflect that change. I'm so hoping you can help me...

  5. #5
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Just call getRadioValue() function when web page gets fully loaded.

    For example add this inside the <script> tag:

    Code:
    window.onload=function() {document.getElementById("Total").value = getRadioValue()}
    oh... and you'll also have to add onclick event handler to the radio buttons elements and connect it to the totalcost() function.
    Last edited by tech_soul8; 02-09-2014 at 04:40 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles