Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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:
    Code:
    <FORM NAME="testauthorization" ACTION="" METHOD=POST id="exhibitreg">
      <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
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script  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*1;
            }
        }
        return 0;
    }
    
    
    function updatecost(num, dollars) {
        var text = document.getElementById("name" + num);
        var cost = document.getElementById("cost" + num);
        if (text&&cost){;
         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);
        }
    
    
        total?document.getElementById("Total").value = total+getRadioValue('sponsorship'):null;
    }
    
    
    //-->
    </script></head>
    
    <body>
    <FORM NAME="testauthorization" ACTION="" METHOD=POST id="exhibitreg">
      <table>
        <tr>
          <td><label>
              <input type="radio" name="sponsorship" value="3000" id="sponsor1" onclick="totalcost();"/>
              $3,000</label>
            <br />
            <label>
              <input type="radio" name="sponsorship" value="1500" id="sponsor2" onclick="totalcost();" />
              $1,500</label>
            <br />
            <label>
              <input type="radio" name="sponsorship" value="1000" id="sponsor3" onclick="totalcost();" />
              $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>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    PeregrineDesign (02-09-2014)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,710
    Thanks
    25
    Thanked 660 Times in 659 Posts
    You have three functions: getRadioValue() is never called, totalcost() would be called if the the method thart called was not hidden, and updatecost() which is called two times every time - when the <input name="name_1" type="text" id="name1" onchange="updatecost(1, 50)" onkeyup="updatecost(1, 50)".... That's onchange and then again onkeyup.

    On the getRadioValue() function I don't see what your going to do with it and I definitely wouldn't use the 'return' statements in it, but it does obtain the value of the radio group.
    You are not and shouldn't pass anything into it:
    Code:
    function getRadioValue() {
        var group = document.getElementsByName('sponsorship');
        for (var i=0;i<group.length;i++) {
            if (group[i].checked) {
                alert(group[i].value);
            }
        }
    }
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    helpful, but...

    Thank you, vwphillips. However, I really need the radio value to fill in the total even if no other entry in any field is made. In other words, all values need to be added but none require another. Make sense? I would very much appreciate another whack at the code to accomplish that.

  • #5
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 (not require a secondary action). 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...

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script  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*1;
            }
        }
        return 0;
    }
    
    
    function updatecost(num, dollars) {
        var text = document.getElementById("name" + num);
        var cost = document.getElementById("cost" + num);
        if (text&&cost){;
         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+getRadioValue('sponsorship');
    }
    
    
    //-->
    </script></head>
    
    <body>
    <FORM NAME="testauthorization" ACTION="" METHOD=POST id="exhibitreg">
      <table>
        <tr>
          <td><label>
              <input type="radio" name="sponsorship" value="3000" id="sponsor1" onclick="totalcost();"/>
              $3,000</label>
            <br />
            <label>
              <input type="radio" name="sponsorship" value="1500" id="sponsor2" onclick="totalcost();" />
              $1,500</label>
            <br />
            <label>
              <input type="radio" name="sponsorship" value="1000" id="sponsor3" onclick="totalcost();" />
              $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>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thank you!

    vwphillips, you have made my day (week)! The answer was simple, I think for you, but out of my reach. Thank you so much! I have now bookmarked your site as future script resource. And, by the way, I know God loves me and will never love me less. He is an awesome God!


  •  

    Tags for this Thread

    Posting Permissions

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