www.webdeveloper.com
Results 1 to 8 of 8

Thread: Clear innerhtml when user clicks radio button?

  1. #1
    Join Date
    Jan 2013
    Posts
    17

    Clear innerhtml when user clicks radio button?

    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.

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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.

  3. #3
    Join Date
    Jan 2013
    Posts
    17
    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

  4. #4
    Join Date
    Jan 2013
    Posts
    17
    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.

  5. #5
    Join Date
    Jan 2013
    Posts
    17
    any ideas on the checkboxes?

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,655
    is this a kind of quest or what? ))

  7. #7
    Join Date
    Jan 2013
    Posts
    17
    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?

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,655
    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
    Last edited by Padonak; 01-15-2013 at 07:18 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles