Hi there

Having trouble calculating the final cost of choices made by a user. I have 4 radio buttons and 2 checkboxes. The first three radio buttons are, all intensive purposes, chocolates with the last radio button stating that the user doesn't want any of the chocolates. The two checkboxes are a milkshake and candyfloss respectively.

The user may only choose one of the three chocolates and optionally the milkshake, candyfloss or both.

What I have so far is as follows:

Javascript code

function calc(sec,val,item)
{
	
	if(!item) { 
		var item = null;
	}

	
	switch(sec)
	{
	
	case 1:
	
		some code for a different function.
		
	break
	
	case 2:
		
		cValue = parseInt(document.getElementById("purchaseTotal").value);
	
		if(item.checked){
			document.getElementById("purchaseTotal").value = cValue+val;
		}else{
			document.getElementById("purchaseTotal").value = cValue-val;	
		}
	
	break;
        }
}

html

<td>Chocolate 1: ZAR 5.00</td>
<td><input name="chocolate" type="radio" id="chocolate" value="" onClick="calc(2,5.00, this);">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Chocolate 2: ZAR 5.00</td>
<td><input name="chocolate" type="radio" id="chocolate" value="" onClick="calc(2,5.00, this);">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Chocolate 3: ZAR 1 200.00</td>
<td><input name="chocolate" type="radio" id="chocolate" value="" onClick="calc(2,5.00, this);">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>I do not wish to buy a chocolate.</td>
<td><input name="chocolate" type="radio" id="chocolate" value="" onClick="calc(2,0, this);">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Milkshake: ZAR 13.00</td>
<td><input type="checkbox" name="milkshake" id="milkshake" value="" onClick="calc(2,13.00, this);"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Candyfloss: ZAR 8.00</td>
<td><input type="checkbox" name="candyfloss" id="candyfloss" value="" onClick="calc(2,8.00, this);"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="3" align="right" valign="top">Total ZAR  <input name="purchaseTotal" type="text" id="purchaseTotal" value="0"></td>

What happens at the moment is that clicking on one radio button doesn't subtract the amount from the previous selected radio button and clicking on the same radio button just keeps adding its value to the total. I'd like it to do the opposite and not add to the total if clicked repeatedly and if another radio button is selected the amount of the previous radio button must be deducted from the total.

I managed to solve my own problem although it isn't the most elegant method. Code is below:

function calc(sec,val,item)
{
	
	if(!item) { 
		var item = null;
	}

	
	switch(sec)
	{
	
	case 1:
	
		some code for a different function.
		
	break
	
	case 2:
		
		cValue = parseInt(document.getElementById("purchaseTotal").value);
	
		if(item.checked){
			document.getElementById("purchaseTotal").value = cValue+val;
		}else{
			document.getElementById("purchaseTotal").value = cValue-val;	
		}
	
	break;
        
        case 3:
		
		cValue = parseInt(document.getElementById("confRegFeeT").value);
	
		if(item.checked){
			if(val==5){
				if((cValue>=5) || (cValue>=26)){
					document.getElementById("confRegFeeT").value = cValue;
				}else{
					document.getElementById("confRegFeeT").value = cValue+val;
				}
			}else if(val==0){
				if(cValue<=21){
					document.getElementById("confRegFeeT").value = cValue;
				}else{
					document.getElementById("confRegFeeT").value = cValue-5;
				}
			}else{
				document.getElementById("confRegFeeT").value = cValue;
			}
		}
	
	break;
        }
}

In my html I changed the onclick for the radio buttons to calc(3,5,this)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.