www.webdeveloper.com
Results 1 to 8 of 8

Thread: How can I display a text value for radio buttons using javascript

  1. #1
    Join Date
    Sep 2010
    Posts
    4

    How can I display a text value for radio buttons using javascript

    I am building an online store where the customer can select custom parts. I'm quite new to javascript, but I've managed to create a radio button list, where the price is added from each section.

    I would like a box to show all of the options selected, not just the sum total.

    I've included the text with value and used parseInt. I have been told I can use value.split(" "), but I don't really know how to go about doing that. I've been fiddling for hours now and don't seem to be able to get anywhere.

    I would also like to include a 3rd value, another number, and add that one in a separate calculation.

    E.g. For "50 5850ati1gb 56" I would like one calculation which adds 50 to the total, another calculation adding 56 to a different total and 5850ati1gb added to a list of all of the components.

    I am not very experienced with this, so don't be afraid to talk to me like I'm stupid! Thank you in advance.

    My code so far:

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

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

    var val3 = 0;
    for( i = 0; i < document.form3.part3.length; i++ ){
    if( document.form3.part3[i].checked == true ){
    val3 = document.form3.part3[i].value;
    }
    }


    var sum=parseInt(val1) + parseInt(val2) + parseInt(val3);
    document.getElementById('totalSum').value=sum;
    }
    </script>
    </head>
    <body>
    <form name="form1" id="form1" runat="server">
    <br>
    <input id="rdo_1" type="radio" value="0 1.8ghz2xAMD" name="part" checked="checked" onclick="DisplayPrice(this.value);">1.8Ghz Dual Core AMD
    <br>
    <input id="rdo_2" type="radio" value="50 2ghz2xAMD" name="part" onclick="DisplayPrice(this.value);">2Ghz Dual Core AMD
    <br>
    </form>Choose your memory:<br />
    <form name="form2" id="form2" runat="server">
    <br>
    <input id="rdo_1" type="radio" value="0 1333corsair1gb" name="part2" checked="checked" onclick="DisplayPrice(this.value);">1333 Corsair 1GB
    <br>
    <input id="rdo_2" type="radio" value="50 1333corsair2x1gb" name="part2" onclick="DisplayPrice(this.value);">1333 Corsair 2x1GB
    <br>
    </form>Choose your graphics card:<br />
    <form name="form3" id="form3" runat="server">
    <br />
    <input id="rdo_1" type="radio" value="0 5830ATI1gb" name="part3" checked="checked" onclick="DisplayPrice(this.value);">1GB ATI 5830
    <br />
    <input id="rdo_2" type="radio" value="50 5850ATI1gb" name="part3" onclick="DisplayPrice(this.value);">1GB ATI 5850
    <br />
    <input id="rdo_3" type="radio" value="75 5870ATI1gb" name="part3" onclick="DisplayPrice(this.value);">1GB ATI 5870
    <br />
    </form>
    </body>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb Something to consider ...

    I'm only guessing what you are trying to do, so if the assumptions are wrong let me know.
    Code:
    <html>
    <head>
    <title> RBtn Selections </title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=235581
    
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      return str;
    } 
    
    function DisplayPrice(price){
      var val1 = getRBtnName('part1').split(',');
      var val2 = getRBtnName('part2').split(',');
      var val3 = getRBtnName('part3').split(',');
    
      var sum=parseInt(val1[0]) + parseInt(val2[0]) + parseInt(val3[0]);
      document.getElementById('totalSum').value=sum;
      
      var str=val1[1] +'\n'+ val2[1] +'\n'+ val3[1] +'\n';
      document.getElementById('TArea').value=str;
      
      sum=parseInt(val1[2]) + parseInt(val2[2]) + parseInt(val3[2]);
      document.getElementById('markup').value=sum;
    }
    onload=function() {
      DisplayPrice();	
    }
    
    </script>
    </head>
    <body>
    <form name="form1" onsubmit="return false"> <!-- runat="server" -->
    
    Choose your CORE<br>
    <input type="radio" value="0,1.8ghz2xAMD,25" name="part1" checked="checked"
     onclick="DisplayPrice();">1.8Ghz Dual Core AMD<br>
    <input type="radio" value="50,2ghz2xAMD,50" name="part1"
     onclick="DisplayPrice();">2Ghz Dual Core AMD<br>
    
    <br>Choose your memory:<br>
    <input type="radio" value="0,1333corsair1gb,75" name="part2" checked="checked"
     onclick="DisplayPrice();">1333 Corsair 1GB<br>
    <input type="radio" value="50,1333corsair2x1gb,100" name="part2"
     onclick="DisplayPrice();">1333 Corsair 2x1GB<br>
    
    <br>Choose your graphics card:<br>
    <input type="radio" value="0,5830ATI1gb,33" name="part3" checked="checked"
     onclick="DisplayPrice();">1GB ATI 5830<br>
    <input type="radio" value="50,5850ATI1gb,66" name="part3"
     onclick="DisplayPrice();">1GB ATI 5850<br>
    <input type="radio" value="75,5870ATI1gb,100" name="part3"
     onclick="DisplayPrice();">1GB ATI 5870<br>
     
    <br>
    <table border="1">
    <tr><th>Cost</th><th>Description</th><th>Markup (???)</th></tr>
    <tr>
     <td valign="top"><input type="text" id="totalSum" value="" readonly></td>
     <td><textarea id="TArea" readonly></textarea></td>
     <td valign="top"><input type="text" id="markup" value="" readonly></td>
    </tr>
    </table>
    
    </form>
    </body> 
    </html>
    Things to note:

    1. I saw no reason to do the radio button checks 3 times in a row, so I changed it to a function.

    2. I 'split' the value of the radio buttons into 3 separate arrays (val1, val2 and val3).
    Do ALL summations and displays 'onclick=' rather than passing the information for the particular radio button value for EACH button.

    3. I don't believe you need 3 separate forms, but then again I'm making an assumption here.
    Put your 'action=' back in when you are satisfied with operations.

    4. You did not specify what the 3rd value represented, so I just made up a 'markup' summation.
    Change as needed.

    BTW: Enclose you script between [ code] and [ /code] tags (without the spaces)
    to make it easier to spot your code attempts.

  3. #3
    Join Date
    Sep 2010
    Posts
    4
    Thank you! That's absolutely fantastic - exactly what I was after.
    You've really helped me out

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    You're most welcome.
    Happy to help!
    Good Luck!


    BTW: Mark thread as 'resolved' if you are done.

  5. #5
    Join Date
    Sep 2010
    Posts
    4
    I've tried to add a drop-down menu to the form, but can't seem to get the script to add/display the values.

    I've added new parts like so:
    Code:
    function DisplayPrice(price){
      var val1 = getRBtnName('part1').split(',');
      var val2 = getRBtnName('part2').split(',');
      var val3 = getRBtnName('part3').split(',');
      var val4 = getRBtnName('part4').split(',');
      var val5 = getRBtnName('part5').split(',');
    
      var sum=parseInt(val1[0]) + parseInt(val2[0]) + parseInt(val3[0]) + parseInt(val4[0]) + parseInt(val5[0]);
      document.getElementById('totalSum').value=sum;
      
      var str=val1[1] +'\n'+ val2[1] +'\n'+ val3[1] +'\n'+ val4[1] +'\n'+ val5[1] +'\n';
      document.getElementById('TArea').value=str;
      
      sum=parseInt(val1[2]) + parseInt(val2[2]) + parseInt(val3[2]) + parseInt(val4[2]) + parseInt(val5[2]);
    I've been trying to add a simple < select > feature, like so:

    Code:
    <SELECT name="part5">
    <OPTION value="10,abc,10">one</OPTION>
    <OPTION value="20,bcd,20">two</OPTION>
    <OPTION value="30,cde,30">three</OPTION>
    <OPTION value="40,efg,40">four</OPTION>
    </SELECT>
    I feel like this should work, but I don't fully understand the javascript, and I'm starting to feel quite rubbish at this! Any help would be appreciated

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb 2nd Attempt ...

    I'm not sure I understand ...

    Is the <select> logic supposed to replace one of the radio buttons?
    Or is it supposed to be in addition to the radio button displays?
    Do the values of the <select> options represent the same things as the radio buttons?

    Again, making some assumptions because the request is unclear to me as it stands.

    Code:
    <html>
    <head>
    <title> RBtn Selections </title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=235581
    
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      return str;
    } 
    
    function DisplayPrice(price){
      var val1 = getRBtnName('part1').split(',');
      var val2 = getRBtnName('part2').split(',');
      var val3 = getRBtnName('part3').split(',');
      var val5 = document.getElementById('part5').value.split(',');
      
      var sum = parseInt(val1[0]) + parseInt(val2[0]) 
              + parseInt(val3[0]) + parseInt(val5[0]);
      document.getElementById('totalSum').value=sum;
      
      var str = val1[1] +'\n' + val2[1] +'\n'
              + val3[1] +'\n' + val5[1] +'\n';
      document.getElementById('TArea').value=str;
      
      sum = parseInt(val1[2]) + parseInt(val2[2]) 
          + parseInt(val3[2]) + parseInt(val5[2]);
      document.getElementById('markup').value=sum;
    }
    onload=function() {
      DisplayPrice();	
    }
    
    </script>
    </head>
    <body>
    <form name="form1" onsubmit="return false"> <!-- runat="server" -->
    
    Choose your CORE<br>
    <input type="radio" value="0,1.8ghz2xAMD,25" name="part1" checked="checked"
     onclick="DisplayPrice()">1.8Ghz Dual Core AMD<br>
    <input type="radio" value="50,2ghz2xAMD,50" name="part1"
     onclick="DisplayPrice()">2Ghz Dual Core AMD<br>
    
    <br>Choose your memory:<br>
    <input type="radio" value="0,1333corsair1gb,75" name="part2" checked="checked"
     onclick="DisplayPrice()">1333 Corsair 1GB<br>
    <input type="radio" value="50,1333corsair2x1gb,100" name="part2"
     onclick="DisplayPrice()">1333 Corsair 2x1GB<br>
    
    <br>Choose your graphics card:<br>
    <input type="radio" value="0,5830ATI1gb,33" name="part3" checked="checked"
     onclick="DisplayPrice()">1GB ATI 5830<br>
    <input type="radio" value="50,5850ATI1gb,66" name="part3"
     onclick="DisplayPrice()">1GB ATI 5850<br>
    <input type="radio" value="75,5870ATI1gb,100" name="part3"
     onclick="DisplayPrice()">1GB ATI 5870<br>
     
    <br>
    <SELECT name="part5" id="part5" onchange="DisplayPrice()">
     <OPTION value="10,abc,10" selected>one</OPTION>
     <OPTION value="20,bcd,20">two</OPTION>
     <OPTION value="30,cde,30">three</OPTION>
     <OPTION value="40,efg,40">four</OPTION>
    </SELECT>
    
    <p>
    <table border="1">
    <tr><th>Cost</th><th>Description</th><th>Markup (???)</th></tr>
    <tr>
     <td valign="top"><input type="text" id="totalSum" value="" readonly></td>
     <td><textarea id="TArea" rows="6" readonly></textarea></td>
     <td valign="top"><input type="text" id="markup" value="" readonly></td>
    </tr>
    </table>
    
    </form>
    </body> 
    </html>
    NOTE: <select> values are not obtained the same way as 'radio' buttons
    hence the different logic to get the values of the user's selection.

    Good Luck Again!

  7. #7
    Join Date
    Sep 2010
    Posts
    4
    That is what I meant, sorry I didn't make it too clear.
    I thought making the option of a 2nd hard drive a drop down menu would be a bit neater.
    Thank you again! I hope you charge people for this, you're a star.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Talking

    No charge, it's just my $0.02 worth.

Thread Information

Users Browsing this Thread

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

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
  •  
HTML5 Development Center



Recent Articles