radio buttons in an order form 3

nm61 · May 25, 2004

Hello
I have an order form with radio buttons divided into groups and when I select a button the value (price) is added into a text field. My problem is that the value keeps being added even when I select buttons from the same group. I have not been able to have the script add only once from the same group. For example if the selected button one from group one has a value of $15 and I change to button two from that same group one valued at $12 I would like it to subs tract the $15 and add $12. What should i add or change to the script to make this happen can any one help me. I am very much new to JavaScript and I am still learning so I still can't with a script from scratch. Many thanks and sorry for the length of this post.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"

http://www.w3.org/TR/html4/loose.dtd">

<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">





<!-- A SNG/RSHWeb Company

http://java.searchrealm.com

-->

function checkChoice(whichbox) {

with (whichbox.form) {

if (whichbox.checked == false)

hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value);

else

hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value);

return(formatCurrency(hiddentotal.value));

}

}

function formatCurrency(num) {



<!-- Web Site:

http://www7.ewebcity.com/cyanide7

-->

num = num.toString().replace(/\$|\,/g,'');

if(isNaN(num)) num = "0";

cents = Math.floor((num*100+0.5)%100);

num = Math.floor((num*100+0.5)/100).toString();

if(cents < 10) cents = "0" + cents;

for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)

num = num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));

return ("$" + num + "." + cents);

}

var topMargin = 100
var slideTime = 1200
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
window.setInterval("main()", 10)

</script>

<style type="text/css">

</style>
</HEAD>

<BODY>

<center>

<form action="" name="myform2" id="myform2">
<table width="133" border="0" bordercolor="#FFFFFF">
<tr bgcolor="#00008A">
<td colspan="3"><span class="style1">Groupe 1</span></td>
</tr>
<tr>
<td width="51">1-1</td>
<td width="48">None</td>
<td><input name=1 type=radio onClick="this.form.total.value=checkChoice(this);" value="0" checked></td>
</tr>
<tr>
<td>1-2 </td>
<td>$12.39 </td>
<td><input type=radio name=1 value="12.39" onClick="this.form.total.value=checkChoice(this);"></td>
</tr>
<tr>
<td>1-3</td>
<td>$18.75</td>
<td><input type=radio name=1 value="18.75" onClick="this.form.total.value=checkChoice(this);"></td>
</tr>
<tr>
<td height="3" colspan="3"> </td>
</tr>
<tr bgcolor="#00008A">
<td colspan="3"><span class="style1">Groupe 2</span></td>
</tr>
<tr>
<td>2-1</td>
<td>None</td>
<td><input name=2 type=Radio onClick="this.form.total.value=checkChoice(this);" value="0" checked></td>
</tr>
<tr>
<td>2-2</td>
<td>$ .79</td>
<td><input type=Radio name=2 value=".79" onClick="this.form.total.value=checkChoice(this);"></td>
</tr>
<tr>
<td>2-3</td>
<td>$ 1.75</td>
<td><input type=Radio name=2 value="1.75" onClick="this.form.total.value=checkChoice(this);"></td>
</tr>
<tr>
<td height="3" colspan="3"> </td>
</tr>
<tr bgcolor="#00008A">
<td colspan="3"><span class="style1">Groupe 3</span></td>
</tr>
<tr>
<td>3-1</td>
<td>None</td>
<td><input name=3 type=radio onClick="this.form.total.value=checkChoice(this);" value="0" checked></td>
</tr>
<tr>
<td>3-2</td>
<td>$1.99</td>
<td><input type=radio name=3 value="1.99" onClick="this.form.total.value=checkChoice(this);"></td>
</tr>
<tr>
<td>3-3</td>
<td>$22.75</td>
<td><input type=radio name=3 value="22.75" onClick="this.form.total.value=checkChoice(this);"></td>
</tr>
<tr>
<td height="3" colspan="3"> </td>
</tr>
<tr bgcolor="#00008A">
<td height="20" colspan="3"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="3"><input type="submit" name="Submit" value="Send"> </td>
<td height="3"><input name=total type=text value="$0.00" size="7" maxlength="10" readonly>
<input type=hidden name=hiddentotal value=0></td>
<td height="3"><input type="reset" name="Reset" value="Reset"></td>
</tr>
</table>
</form>
</center>
</body>
</html>

kaht · May 25, 2004

Here's an example I typed up to help you. You could loop thru the radio groups each time to find the selected button and extract the value that way, but it's much easier (in my opinion) to just have a javascript variable stored away to keep track of the price for each radio group and add them together to get the total:

Code:

<script language=JavaScript>

var group1price = 0;
var group2price = 2;
var group3price = 8;

function calculateTotals(str, price) {
   eval(str + "price = " + price);
   blahForm.priceTotal.value = group1price + group2price + group3price;
}

</script>
<body>
<form name=blahForm>
<h1><b>DRINKS</b></h1><br>
<input type=radio name=group1 onclick='calculateTotals(this.name, this.value)' value=0 checked>Water - 0<br>
<input type=radio name=group1 onclick='calculateTotals(this.name, this.value)' value=1>Lemonade - 1<br>
<input type=radio name=group1 onclick='calculateTotals(this.name, this.value)' value=2>Soda - 2<br><br>
<h1><b>APPETIZER</b></h1><br>
<input type=radio name=group2 onclick='calculateTotals(this.name, this.value)' value=2 checked>Breadsticks - 2<br>
<input type=radio name=group2 onclick='calculateTotals(this.name, this.value)' value=3>Cheesesticks - 3<br>
<input type=radio name=group2 onclick='calculateTotals(this.name, this.value)' value=2>Nachos - 2<br>
<input type=radio name=group2 onclick='calculateTotals(this.name, this.value)' value=4>Toasted Ravioli - 4<br>
<input type=radio name=group2 onclick='calculateTotals(this.name, this.value)' value=5>Jalepeño Poppers - 5<br>
<h1><b>ENTREE</b></h1><br>
<input type=radio name=group3 onclick='calculateTotals(this.name, this.value)' value=8 checked>Fried Chicken - 8<br>
<input type=radio name=group3 onclick='calculateTotals(this.name, this.value)' value=10>Steak - 10<br><br>
<b>TOTAL: </b><input type=text name=priceTotal value=10>
</form>
</body>

-kaht

nm61 · May 25, 2004

Thanks this is working great [thumbsup2]

nm61 · May 26, 2004

Hello Kaht
I just noticed while the script works wonderfly in IE it is does not seem to work with Netscape or Mozilla. Any ideas. My thanks again. [smile]

kaht · May 26, 2004

Sorry, I'm not good with debugging cross-browser solutions. (I've only ever developed in IE) Perhaps Dan or another member could help ya out.

-kaht

nm61 · May 26, 2004

Thanks anyway . [bigsmile]

nm61 · May 27, 2004

Adding document. before blahForm.priceTotal.value
as in document.blahForm.priceTotal.value fixes the problem with both Netscape and Mozilla.

kaht · May 27, 2004

Way to go!

Good job finding your problem. Here's a star for sticking with it.

-kaht

nm61 · Jun 15, 2004

Is there a way to add a group of checkboxes to your script Kaht with the respective values added to or subtracted from the total? Many thanks for any help.

LFI · Jun 15, 2004

Yes,

make the onclick property of each checkbox: onclick='addCheckboxValue(this.value)'

Then create function addCheckboxValue(...):

Code:

function addCheckboxValue(valueToAdd)
{
 document.blahForm.priceTotal.value += valueToAdd;
}

Obviously, each checkbox will have to have a value-parameter with the corresponding value you want added.

'hope this helps. I didn't test it.

--Dave

nm61 · Jun 16, 2004

Thanks Dave
It does help. I am a little bit further than I was before. The problem I am encountering now is that when I check or uncheck a box I get the digit rather that the value. For example if the value of a ckeckbox in 7 and I select it it will get and 7 but when I unchek it I get a 77 and so on. The same thing is happening it I have a previous value in the textfields. The numbers are not adding up.
NM

kaht · Jun 16, 2004

nm61, sorry for the late reply.....

It sounds like what you're trying to do is replace the radio buttons with checkboxes instead so that they aren't grouped. (Like being able to check 2 appetizers from my above example, not possible with radio buttons). Here's an example of what you're looking for:

Code:

<script language=JavaScript>

function updatePrice(obj, total) {
   var price = (obj.checked) ? obj.value : (obj.value * -1);
   total.value = parseInt(total.value, 10) + parseInt(price, 10);
}

</script>
<body>
<form name=blahForm>
<b>Select which video games you would like to purchase:</b><br><br>
<input type=checkbox name=blahCheck onclick='updatePrice(this, document.blahForm.blahTotal)' value=50>Final Fantasy XI<br>
<input type=checkbox name=blahCheck onclick='updatePrice(this, document.blahForm.blahTotal)' value=45>Need For Speed: Underground<br>
<input type=checkbox name=blahCheck onclick='updatePrice(this, document.blahForm.blahTotal)' value=20>Metal Gear Solid 2<br>
<input type=checkbox name=blahCheck onclick='updatePrice(this, document.blahForm.blahTotal)' value=30>Grand Theft Auto: Vice City<br>
<input type=checkbox name=blahCheck onclick='updatePrice(this, document.blahForm.blahTotal)' value=40>Metroid Prime<br>
<input type=checkbox name=blahCheck onclick='updatePrice(this, document.blahForm.blahTotal)' value=5>Kid Icarus<br><br>
<input type=text name=blahTotal value=0><b>Total Price</b>
</form>
</body>

-kaht

LFI · Jun 16, 2004

I suspected that might happen. I'm going to attempt to fix it here, but there is a totally different solution to your problem below and I really recommend you use that.

Nevertheless, for academic purposes:

In the existing implementation, change:

Code:

document.blahForm.priceTotal.value += valueToAdd;

...to:

Code:

document.blahForm.priceTotal.value = parseInt(document.blahForm.priceTotal.value) + parseInt(valueToAdd);

If the script is regarding what-looks-like-numbers-to-us as strings, then the plus-operation concatenates them (e.g., 7 + 7 = 14, but "7" + "7" = "77").

Also, change the onclick event to include the checkbox itself instead of its value: onclick='addCheckboxValue(this)' (instead of this.value), and change the function to:

Code:

function addCheckboxValue(cb)
{
 if(cb.checked)
 {
  document.blahForm.priceTotal.value = parseInt(document.blahForm.priceTotal.value) + parseInt([b]cb.value[/b]);
 }
 else
 {
  document.blahForm.priceTotal.value = parseInt(document.blahForm.priceTotal.value) - parseInt([b]cb.value[/b]); [b]//this assumes value was previously added and now needs subtracting[/b]
 }
}

All that being said, I can see a problem brewing. Whenever calculateTotals(...) is called again, the checkboxes will not be included.

Here is a better solution (if, as I suspect, a user can click on a radio button after he/she has clicked on some checkboxes).

Code:

[b]var radioTotals = 0;
var checkboxTotals = 0;[/b]

function calculateTotals(str, price) {
   eval(str + "price = " + price);
   [b]radioTotals[/b] = [b]parseInt([/b]group1price[b])[/b] + [b]parseInt([/b]group2price[b])[/b] + [b]parseInt([/b]group3price[b])[/b]; [b]//parseInt's probably not needed here.[/b]

   [b]blahForm.priceTotal.value = radioTotals + checkboxTotals;[/b]
}//end function

[b]
function addCheckboxValues()
{
   checkboxTotals = 0;

   for(var i=0; i<blahForm.checkBoxesName.length; i++)
   {
    if(blahForm.checkBoxesName[i].checked)
    {
     checkboxTotals += parseInt(blahForm.checkBoxesName[i].value);
    }//end if
   }//end for

   blahForm.priceTotal.value = radioTotals + checkboxTotals;
}//end function
[/b]

Then, with the checkboxes onclick command: onclick='addCheckboxValues()'

I think that should do it. Notice the radios will be calculated when a radio button is clicked, then added to the existing checkbox totals. Likewise, the checkboxes will be calculated when one is clicked, then added to the existing radio totals.

Let us know if that does it for you.

--Dave

nm61 · Jun 18, 2004

Thanks guys
The first two work at the start but once I select a checkbox the radio buttons stop working right. As for Dave's second code I am having allot of trouble making anything happen. I am very much a neebie. Thanks very much for the help.

nm61 · Jun 18, 2004

I have uploaded the test page I've made with the first checkbox code. I hope someone can find were I'm going wrong. Many thanks. NM.

http://testsitetest.50megs.com/checks_n_radios2.htm

LFI · Jun 18, 2004

Go with my second method. I have changed the code I supplied earlier to match the form names and element names you are using.

Code:

var radioTotals = 0;
var checkboxTotals = 0;

function calculateTotals(str, price) {
   eval(str + "price = " + price);
   radioTotals = parseInt(group1price) + parseInt(group2price) + parseInt(group3price); //parseInt's probably not needed here.

   document.Form1.priceTotal.value = radioTotals + checkboxTotals;
}//end function


function addCheckboxValue()
{
   checkboxTotals = 0;

   for(var i=0; i<document.Form1.checkboxGroup.length; i++)
   {
    if(document.Form1.checkboxGroup[i].checked)
    {
     checkboxTotals += parseInt(document.Form1.checkboxGroup[i].value);
    }//end if
   }//end for

   document.Form1.priceTotal.value = radioTotals + checkboxTotals;
}//end function

The other thing you have to do it name all your checkboxes the same name. In the above code, I named them 'checkboxGroup'.

This now works for me in IE6. Let me know if you want me to explain what I'm doing in any part of the code.

--Dave

nm61 · Jun 18, 2004

Thanks Dave
The radio buttons seem to works only after a checkbox has been selected. Also for some reason the .50 is being registered as 5. It might be something I did wrong mind you [blush]

. You can view what I did here. NM.

http://testsitetest.50megs.com/newchecks_n_radios2.htm

LFI · Jun 18, 2004

For starters, you took out your (needed) lines:

var group1price = 0;
var group2price = 0;
var group3price = 0;

Also, if you need fractional values (I didn't notice that before; sorry!), then change all the parseInt's to parseFloat.

'hope that does it!

--Dave

nm61 · Jun 22, 2004

THANKS. Looks great and it works exactly as I wanted. You guys are fanatstic. Great place for newbies. And this is what it looks like. [thumbsup2]

http://testsitetest.50megs.com/FINAL.htm

LFI · Jun 22, 2004

I like the floating Total-box!

'glad we could help!

--Dave

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

radio buttons in an order form 3

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor