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;
}
}
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.
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
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.
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.
Reply With Quote
Something to consider ...
Bookmarks