Clear innerhtml when user clicks radio button?

**cameronnicolson** · 01-14-2013 12:44 PM

Hey.

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>

--------------

I hope I haven't confused anyone.

**ReFreezed** · 01-14-2013 01:55 PM

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.

**cameronnicolson** · 01-14-2013 02:10 PM

This is truly amazing. I've only just started working with JS so I'm all new to some things.

I just came across an article toggling the display and was about to try it out and then I also read someone using css to replace text with an image.

Have you ever heard of that method before? Interesting or what!

Thank you so much

**cameronnicolson** · 01-14-2013 05:21 PM

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.

----------------------------
Script:

<fieldset id="filling"> <legend class="formheading">Select fillings</legend>
<br />
<input type="checkbox" name="filling" value="mushrooms" onClick="showFillingPrice('filling1');" >Mushrooms <span class="pricetext" id="filling1">£0.50</span><br>
<input type="checkbox" name="filling" value="ham" onClick="showFillingPrice('filling2');" >Ham <span class="pricetext" id="filling2">£0.50</span> <br />
<input type="checkbox" name="filling" value="peppers" onClick="showFillingPrice('filling3');" >Peppers <span class="pricetext" id="filling3">£0.50</span> <br />
<input type="checkbox" name="filling" value="pepperoni" onClick="showFillingPrice('filling4');" >Pepperoni <span class="pricetext" id="filling4">£0.50</span> <br />
<input type="checkbox" name="filling" value="bbq" onClick="showFillingPrice('filling5');" >BBQ Chicken <span class="pricetext" id="filling5">£0.50</span> <br />
<input type="checkbox" name="filling" value="meatballs" onClick="showFillingPrice('filling6');" >Meatballs <span class="pricetext" id="filling6">£0.50</span> <br />
<br />
</fieldset>

---------------------------------------------------------

Continuing with this code I can only select one topping at a time.

**cameronnicolson** · 01-15-2013 08:44 AM

any ideas on the checkboxes?

**Padonak** · 01-15-2013 08:54 AM

is this a kind of quest or what? ))

**cameronnicolson** · 01-15-2013 09:49 AM

I'm just messing around with javascript as a bit of fun.

I can't get text to hide when the checkbox is ticked then unticked and with checkboxes you can have more one option.

Was just wanting to know how I could edit the above code to get the right results?

**Padonak** · 01-15-2013 06:14 PM

here is jQuery based script with some animation and total cost count:

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#total{color:Green;background-color:transparent;font-weight:bold;}
#gearbox{text-align:center;padding:20px 20px;}
#gearbox input{background-color:transparent;color:Crimson;font-weight:bold;margin-left:10px;margin-right:10px;border:none;cursor:pointer;}
input{cursor:pointer;}
.pricetext{display:none;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function countTotal(){
var tot=0;
$('#orderpizza').find(':checked').each(function(){var tt=$(this).next().next().text(),p_curr=parseFloat(tt.substring(1,tt.length));tot+=p_curr;});
res=tot.toString();
if(res.indexOf('.')==-1){res+='.00';}
else{var tail=res.substring(res.indexOf('.'),res.length);if(tail.length==2){res+='0';}}
$('#total').html(res);
}

$(document).ready(function(){

$('#reset').click(function(){$('#orderpizza').find('.pricetext').css('display','none').css('margin-left','0px');setTimeout("countTotal()",100);});

$('#Size input').each(function(){
$(this).click(function(){
if($(this).next().next().css('display')=='none'){
$(this).parent().parent().find('.pricetext').css('display','none').css('margin-left','0px');
$(this).next().next().fadeIn('fast',function(){
$(this).animate({marginLeft:'10px'},'fast',function(){countTotal();});
});
}
});
});

$('#filling input').each(function(){
$(this).click(function(){
if($(this).is(':checked')){$(this).next().next().fadeIn('fast',function(){$(this).animate({marginLeft:'10px'},'fast',function(){countTotal();});});}
else{$(this).next().next().animate({marginLeft:'0px'},'fast',function(){$(this).fadeOut('fast',function(){countTotal();});});}
});
});

});
</script>
</head>
<body>
<p>Select the size, base and toppings for you pizza.</p>
<form id="orderpizza" action="" onsubmit="return false;">
<p>Total cost: £<span id="total">0.00</span></p>
<fieldset id="Size"><legend class="formheading">Select the size of pizza</legend>
<p><input type="radio" name="selectedpizza" value="size10" /><span>10" pizza base </span><span class="pricetext" id="pizzasize1">£4.50</span></p>
<p><input type="radio" name="selectedpizza" value="size12" /><span>12" pizza base </span><span class="pricetext" id="pizzasize2">£6.00</span></p>
<p><input type="radio" name="selectedpizza" value="size15" /><span>15" pizza base </span><span class="pricetext" id="pizzasize3">£7.50</span></p>
</fieldset>
<fieldset id="filling"> <legend class="formheading">Select fillings</legend> 
<br />
<input type="checkbox" name="filling" value="mushrooms" /><span>Mushrooms </span><span class="pricetext" id="filling1">£0.50</span><br>
<input type="checkbox" name="filling" value="ham" /><span>Ham </span><span class="pricetext" id="filling2">£0.50</span><br /> 
<input type="checkbox" name="filling" value="peppers" /><span>Peppers </span><span class="pricetext" id="filling3">£0.50</span><br />
<input type="checkbox" name="filling" value="pepperoni" /><span>Pepperoni </span><span class="pricetext" id="filling4">£0.50</span><br />
<input type="checkbox" name="filling" value="bbq" /><span>BBQ Chicken </span><span class="pricetext" id="filling5">£0.50</span><br /> 
<input type="checkbox" name="filling" value="meatballs" /><span>Meatballs </span><span class="pricetext" id="filling6">£0.50</span><br />
<br />
</fieldset>
<div id="gearbox"><input id="reset" type="reset" value="Reset" /><input type="submit" value="Submit" /></div>
</form>
</body>
</html>

working example pizza

hope it will be useful

Thread: Clear innerhtml when user clicks radio button?

Thread Tools

Display

Clear innerhtml when user clicks radio button?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions