Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Dynamic Calculator Help

    I am wanting to create a simple dynamic calculator.

    That when a radio button in the HTML <form> is selected is adds a value to the calculation and displays it live below.

    For example the select a package:
    [] one [] two [] three

    then they choose an extra's they want to add on:
    [] one [] two [] three [] four

    and below it displays this:

    [ The name of package selected + value of it in (£) ] + The value of all the add ons they have selected in (£)


    ...
    I'm sure it's not that hard to write, i'm just not familar with the javascript language.

    Thanks in advance!
    Haydn

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,022
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Sounds like homework! Or do you think that this forum is a free coding service?

    Show us your effort and then I am sure that someone will correct/improve it for you. If the user may select more than one extra then you need to use checkboxes, not radios.

    This will give you a start:-

    Code:
    <form name= "myform">
    <input type = "radio" name = "rad1" value = "20Package1">Package 1
    <input type = "radio" name = "rad1" value = "50Package2">Package 2
    <input type = "radio" name = "rad1" value = "75Package3">Package 3
    <br><br>
    <input type = "button" value = "Which Package Selected?" onclick = "chkrads()">
    </form>
    
    <script type = "text/javascript">
    
    function chkrads() {
    var chosen = "None";
    var len = document.myform.rad1.length;
    for (i = 0; i <len; i++) {
    if (document.myform.rad1[i].checked) {
    chosen = document.myform.rad1[i].value;
    }
    }
    if (chosen == "None") {
    alert("No Package Chosen");
    }
    else {
    var price = parseInt(chosen);
    var pl = price.toString().length;
    chosen = chosen.substring(pl);
    alert("You selected  " +  chosen + " costing £" + price);
    }
    }
    
    </script>

    BTW, the time to say "thanks" is afterwards, not beforehand which gives the - doubtless unintended - impression that you take other people's voluntary unpaid assistance and expertise for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the "Thank User For This Post" button.


    The ball is unpredicatble, but not all the time. - Football Commentator, Radio 5 Live

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by hbowley View Post
    I'm sure it's not that hard to write, i'm just not familar with the javascript language.
    Weird assumption If you are not familiar with a language, you can not know how hard is to write a code or another

    We expected you to show us a code, even wrong

    Nevermind, here's a basic example, but on using list boxes:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function calculate(f){
    var prod=Number(f['product'].value);
    var quan=Number(f['quantity'].value);
    var tot=prod*quan;
    f['total'].value=tot==0?'':tot.toFixed(2);
    }
    </script>
    </head>
    <body>
    <form action="">
    <select name="product" onchange="calculate(this.form)">
    <option value="0">-- Chose a product --</option>
    <option value="20.5">nails</option>
    <option value="42.5">screws</option>
    <option value="0.7">nuts</option>
    </select>
    <br>
    <select name="quantity" onchange="calculate(this.form)">
    <option value="0">-- How many kilos? --</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <br><br>
    Total cost: <input type="text" name="total" readonly="readonly">
    </form>
    </body>
    </html>
    If you want something, you should post at least the significant part of your HTML code.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi,

    sorry that I came accross that way. I just jumped straight to the forum rather thinking about it...

    Thank you for your examples and help but its not quite what I'm looking for..

    So I have had a play around with the examples and snippets of code and this what i have so far:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    // (c) Splash Work Animations 2010. 
    
    calculate = function(){ 
    var total = 0
    //Get Package values + add to total
     if(document.getElementById('started').checked == true) 
    {total=total + document.getElementById('started').value}
     if(document.getElementById('small').checked == true) 
    {total=total + document.getElementById('small').value}
     if(document.getElementById('large').checked == true) 
    {total=total + document.getElementById('large').value}
    //Get addon values + add to total
     if(document.getElementById('domain').checked == true) 
    {total=total + document.getElementById('domain').value}
     if(document.getElementById('privacy').checked == true) 
    {total=total + document.getElementById('privacy').value}
     if(document.getElementById('dedicated').checked == true) 
    {total=total + document.getElementById('dedicated').value}
     if(document.getElementById('shell').checked == true) 
    {total=total + document.getElementById('shell').value}
     if(document.getElementById('backup').checked == true) 
    {total=total + document.getElementById('backup').value}
     if(document.getElementById('ssl').checked == true) 
    {total=total + document.getElementById('ssl').value}
    
    document.getElementById(totalboxid).innerHTML = total
    }
    </script>
    </head>
    
    <body>
    <p>Choose the type of business you have to see more information on what its for and the prices.</p>
    <p><form>
    <input type="checkbox" value="200" id="started" onclick="calculate();"  /> Getting Started
    <input type="checkbox" value="500" id="small" onclick="calculate();"  /> Small/Medium Business
    <input type="checkbox" value="800" id="large" onclick="calculate();"  /> Large Business</form></p>
    <br />
            
    <table width="100%" border="0">
      <tr>    
            <td width="50%" id="extra" valign="top">
        <h1>Add-ons</h1>
        <form>
        <p><input value="15" type="checkbox" onclick="calculate();" id="domain" />Add another domain (£15 per year) </p>
        <p><input value="14" type="checkbox" onclick="calculate();"  id="privacy" />Add domain privacy (£14 per year)</p>
    	<p><input value="18" type="checkbox" onclick="calculate();"  id="dedicated"/>Dedicated IP (£18 per year)</p>
    	<p><input value="18" type="checkbox" onclick="calculate();"  id="shell" />Shell Access (£18 per year)</p> 
        <p><input value="10" type="checkbox" onclick="calculate();"  id="backup" />Daily Backup (£10 per year)</p>
        <p><input value="45" type="checkbox" onclick="calculate();"  id="ssl" />Private SSL Certificate (£45 per year) </p>
        </form>
        </td>
      </tr>
    </table>
    
    <div id="totalboxid"></div>
    
    </body>
    </html>
    For some reason it's not working, any ideas?
    Last edited by hbowley; 07-27-2010 at 03:06 PM. Reason: Improved code


  •  

    Tags for this Thread

    Posting Permissions

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