Let me lay down the scenario. I have three radio buttons and when the user clicks any 1 of them it displays a price beside it. Now this is all well and good if the user just clicks 1 and moves on but because it's writing in innerhtml when they change their option the price of the first click stays and the second then appears.
What I want is for the only one price to appear at a time, meaning it will have to clear any written innerhtml but I have no idea how you go around doing this.
So this is why I'm here I guess
My script:
<script type="text/javascript">
function addPrice(){
document.getElementById('pizzasize1').innerHTML = '£4.50';
}
function addPrice2(){
document.getElementById('pizzasize2').innerHTML = '£6.00';
}
function addPrice3(){
document.getElementById('pizzasize3').innerHTML = '£7.50';
}
</script>
</head>
<p>Select the size, base and toppings for you pizza.</p>
<form id="orderpizza" action="" onSubmit="return false;">
<fieldset id="Size"> <legend class="formheading">Select the size of pizza</legend>
<br />
<input type="radio" name="selectedpizza" value="size10" onclick='addPrice()' /> 10" pizza base <span class="pricetext"><b id='pizzasize1'> </b></span> <br />
<br />
<input type="radio" name="selectedpizza" value="size12" onclick="addPrice2()" /> 12" pizza base <span class="pricetext"> <b id='pizzasize2'> </b> </span> <br />
<br />
<input type="radio" name="selectedpizza" value="size15" onclick="addPrice3()" /> 15" pizza base <span class="pricetext" id='pizzasize3'></span><br />
<br /><br /> </select>
</fieldset>
It's better to show/hide the prices by changing the styles instead of messing around with the innerHTML property. Something like this will also make the webpage accessible if the user has disabled JavaScript:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function hidePrices(){
document.getElementById('pizzasize1').style.display = 'none';
document.getElementById('pizzasize2').style.display = 'none';
document.getElementById('pizzasize3').style.display = 'none';
}
function showPrice(id){
hidePrices();
document.getElementById(id).style.display = ''; // restore the visibility
}
</script>
</head>
<body onload="hidePrices();">
<p>Select the size, base and toppings for you pizza.</p>
<form id="orderpizza" action="" onsubmit="return false;">
<fieldset id="Size"><legend class="formheading">Select the size of pizza</legend>
<p>
<input type="radio" name="selectedpizza" value="size10" onclick="showPrice('pizzasize1');" />
10" pizza base <span class="pricetext" id="pizzasize1">£4.50</span>
</p>
<p>
<input type="radio" name="selectedpizza" value="size12" onclick="showPrice('pizzasize2');" />
12" pizza base <span class="pricetext" id="pizzasize2">£6.00</span>
</p>
<p>
<input type="radio" name="selectedpizza" value="size15" onclick="showPrice('pizzasize3');" />
15" pizza base <span class="pricetext" id="pizzasize3">£7.50</span>
</p>
</fieldset>
</form>
</body>
</html>
I also combined your showPrice functions to a single one that takes the ID of the element you want to show as an argument.
I now have checkboxes and need the price to show when selected and hide when unselected. Plus because the user can have more than one topping more than one price can display this time.
Reply With Quote
Bookmarks