www.webdeveloper.com
Results 1 to 13 of 13

Thread: [RESOLVED] JavaScript that calculates costs

  1. #1
    Join Date
    May 2014
    Posts
    7

    resolved [RESOLVED] JavaScript that calculates costs

    Hi Guys, I'm new to javaScript and could use some help building a form. This is the situation, my work is running a promotional service which costs a base price of $19.99 for 5 employees, every employee beyond 5 costs $1 extra. So for example if there are 8 employees the calculated cost would be $22 ($19.99-base price + $3 for 3 extra employees). I imagine this as a form with one input field and one button. A site visitor would be able to enter a number of employees in the field, click the button and calculate the cost based on our pricing. Could someone help me build this form, I'm pretty sure that JavaScript could handle this.

    Thanks in advance!

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    $19.99 + $3 is going to be $23 rather than $22, am i wrong?
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    try this
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    May 2014
    Posts
    905
    Bit of advice: Even if you use JavaScript to show the calculation to the user, that's ALL the scripted calculation should be used for. Don't send it server-side or trust it's values. ALL user input is suspect, particularly things like prices. Re-calculate it server-side.

    Scripting is cute for enhancing the user experience, but don't trust anything it does server-side.

    I might take a stab at tossing together a working example of how I'd go about it later tonight; depends on how the insomina works out.

  5. #5
    Join Date
    May 2014
    Posts
    7
    Quote Originally Posted by Padonak View Post
    $19.99 + $3 is going to be $23 rather than $22, am i wrong?
    Thanks for pointing that out, I was a bit tired when drafting this and my simple math skills were lost at that point.

  6. #6
    Join Date
    May 2014
    Posts
    7
    Quote Originally Posted by Padonak View Post
    try this
    Yes! That is how the math is supposed to work. Thank you Padonak! I like the slider and the employee icon, could this be applied to a form with an input text field and a button? Similar to a form like this below:


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8" />
    <title>Title</title>
    </head>

    <body>
    <form id="cost" name="cost" method="post" action="">
    <p>
    <label for="textfield">How many employees do you have?</label>
    <input type="text" name="textfield" id="textfield" />
    </p>
    <p>
    <input type="submit" name="button" id="button" value="Calculate Cost" />
    </p>
    <p>Your Cost is: </p>
    </form>
    </body>
    </html>

  7. #7
    Join Date
    May 2014
    Posts
    7
    Agreed. We just wanted something to catch the attention of our users. Thanks for the advice.

  8. #8
    Join Date
    May 2014
    Posts
    7
    Quote Originally Posted by Dgonzales View Post
    Agreed. We just wanted something to catch the attention of our users. Thanks for the advice.
    What I can't edit my posts? Ok. This was supposed to be a reply to deathshadow's post earlier.

  9. #9
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    may be this will help

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Title</title>
    <style>
    input{text-align:center;}
    input[type="button"],input[type="submit"],input[type="reset"]{cursor:pointer;margin-left:10px;margin-right:10px;}
    </style>
    <script>
    var basecount=5,
    	baseprice=19.99;
    
    function $(id){return document.getElementById(id);}
    
    function calc(val){
    if(!val||val<basecount){
    $('textfield').value=$('result').innerHTML=$('sum').value='';
    $('textfield').focus();
    return;
    }
    else{
    $('sum').value=(val==basecount)?baseprice:((baseprice+(val-basecount)).toFixed(2));
    $('result').innerHTML='$'+$('sum').value;
    }
    }
    
    onload=function(){
    $('calculate').onclick=function(){calc($('textfield').value);}
    $('cost').onreset=function(){calc();}
    $('cost').onsubmit=function(){
    /* the form won't be sent if there is no any calculation result */
    return ($('sum').value)?true:false;
    }
    }
    </script>
    </head>
    <body>
    <form id="cost" name="cost" method="post" action="">
    <p>
    <label for="textfield">How many employees do you have?</label>
    <input type="text" name="textfield" id="textfield" placeholder="up from five" />
    </p>
    <p>
    <input type="button" id="calculate" value="Calculate Cost" />
    </p>
    <p>Your Cost is: <span id="result"></span></p>
    <p>
    <input type="hidden" name="sum" id="sum" value="" />
    <input type="submit" id="subm" value="Send" /><input type="reset" id="clear" value="Clear" />
    </p>
    </form>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  10. #10
    Join Date
    May 2014
    Posts
    7
    Awesome! That's exactly what I was looking for, sorry to ask but could this logic be added: if the number of employees entered into the text field is 5 or less than the price is $19.99

    So if they enter 5,4,3,2 or 1 the calculated cost is still 19.99

    Thanks again!

  11. #11
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Title</title>
    <style>
    input{text-align:center;}
    input[type="button"],input[type="submit"],input[type="reset"]{cursor:pointer;margin-left:10px;margin-right:10px;}
    </style>
    <script>
    var basecount=5,
    	baseprice=19.99,
    	bads=/[^\d]/g,
    	lnull=/^[0]{1,}/;
    
    function $(id){return document.getElementById(id);}
    
    function calc(val){
    if(!val){
    $('textfield').value=$('result').innerHTML=$('sum').value='';
    $('textfield').focus();
    return;
    }
    else{
    $('sum').value=(val <= basecount)?baseprice:((baseprice+(val-basecount)).toFixed(2));
    $('result').innerHTML='$'+$('sum').value;
    }
    }
    
    onload=function(){
    $('textfield').onkeyup=function(){
    /* 
    this forces the user to input only digits
    and removes leading zero(-es)
    */
    this.value=this.value.replace(bads,'').replace(lnull,'');
    
    }
    $('calculate').onclick=function(){calc($('textfield').value);}
    $('cost').onreset=function(){calc();}
    $('cost').onsubmit=function(){
    /* the form won't be sent if there is no any calculation result */
    return ($('sum').value)?true:false;
    }
    }
    </script>
    </head>
    <body>
    <form id="cost" name="cost" method="post" action="">
    <p>
    <label for="textfield">How many employees do you have?</label>
    <input type="text" name="textfield" id="textfield" placeholder="only digits allowed" />
    </p>
    <p>
    <input type="button" id="calculate" value="Calculate Cost" />
    </p>
    <p>Your Cost is: <span id="result"></span></p>
    <p>
    <input type="hidden" name="sum" id="sum" value="" />
    <input type="submit" id="subm" value="Send" /><input type="reset" id="clear" value="Clear" />
    </p>
    </form>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  12. #12
    Join Date
    May 2014
    Posts
    7
    Perfect! Thanks Padonak, You're a lifesaver!

  13. #13
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    lol )) you're welcome
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

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