/    Sign up×
Community /Pin to ProfileBookmark

Printing calculations – embedded or in popup window

Copy linkTweet thisAlerts:
Jun 24.2015

I am a graphic and web designer, but not so great at javascript. I use a program called Wufoo for my job request forms, but they don’t have any calculation integration. I’m just trying to come up with an area – whether it be embedded or popup – where the college students or faculty can estimate about how much their printing will cost. I would need the user to be able to enter in the height in inches and the width in inches (but restrict at least one of the measurements to be no larger than 42″ as the largest media roll is 42″). I also need them to choose a print media which should self populate an area with the cost per square foot. I say that we charge per square foot, but I believe with how I figure out the cost that I’m really charging per square inch. (Height in. x width in. /144 x amount per square foot – i.e. (24×36)/144 x $3.00 = $18.00) If possible, I would like the dollar amount to round up to the nearest quarter ($.25) or ($.50). I don’t know how difficult that is.

The paper I use has several different prices.
Plain paper $1.50/sq. ft.
Simple bond $2.00/sq. ft.
Satin paper $3.00/sq. ft.
Polypropylene $3.00/sq. ft.
Clear Film $4.00/sq. ft.
Backlight Film $5.00/sq. ft.
Adhesive Vinyl $5.00/sq. ft.
Window Cling $5.00/sq. ft.

Please let me know if you can help me! Thanks!

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@wbportJun 25.2015 — Rounding a dollars and cents amount [B]up[/B] to the next quarter isn't that difficult.
[LIST=1]
  • [*]Multiply by 4 (actually multiply by 100 and divide by 25).

  • [*]Replace that amount by running it through the Math.ceil function.

  • [*]Divide by 4.

  • [*]

    • [/LIST]
    [CODE]function roundup(x) {
    return Math.ceil(x*4)/4;
    }[/CODE]     is one way.

    I have examples of both the ceil function and creating a new window here.
    Copy linkTweet thisAlerts:
    @cootheadJun 25.2015 — Hi there waitekd,

    [indent]

    and a warm welcome to these forums. ?

    Here is one possible solution to your problem...

    [color=navy]
    <!DOCTYPE html>
    <html lang="en">
    <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>untitled document</title>

    <style media="screen">
    body {
    background-color:rgba(0,0,0,0.06);
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:100%;
    text-align:center;
    }
    .nojs {
    display:none;
    }
    .hasjs{
    display:inline-block;
    }
    #calculator {
    padding:20px;
    border:1px solid rgba(0,0,0,0.5);
    border-radius:10px;
    box-shadow:inset 0 0 20px rgba(0,0,0,0.5),
    6px 6px 6px rgba(0,0,0,0.5);
    background-color:rgba(255,255,255,1);
    color:rgba(0,0,0,0.5);
    }
    #calculator select,#calculator input {
    color:rgba(0,0,0,0.5);
    }
    #calculator fieldset {
    border:0;
    }
    .hide {
    visibility:hidden;
    }
    #calculator div {
    margin-top:10px;
    line-height:1.8;
    border:1px solid rgba(0,0,0,0.5);
    border-radius:5px;
    text-indent:10px;
    text-align:left;
    }
    #calculator sup {
    font-size:75%;
    }
    </style>

    <script>
    (function() {
    'use strict';

    var d=document,s,f,cal,c,w,h,p,t;

    function init(){
    d.getElementById('njs').className='nojs';
    cal=d.getElementById('calculator');
    cal.className=cal.className.replace('nojs','hasjs');
    cal.reset();
    s=cal.getElementsByTagName('select');
    f=d.getElementById('field')
    for(c=0;c<s.length;c++) {
    s[c].addEventListener('change',selectValues(c));
    }
    d.getElementById('clear').onclick=function() {
    f.className='hide';
    w=h=p=t=NaN;
    }
    }

    function selectValues(c) {
    s[c].onchange=function() {

    this.id==='wth'?w=this.value:this.id==='hgt'?h=this.value:p=this.value;

    if((!isNaN(w))&&(!isNaN(h))&&(!isNaN(p))) {
    t=w*h*p/144;
    t=Math.ceil(t*4)/4;
    d.getElementById('area').innerHTML='Paper area='+(w*h/144).toFixed(2)+'ft<sup>2</sup>'
    d.getElementById('paper').innerHTML='Paper cost=$'+p+'ft<sup>2</sup>';
    d.getElementById('price').innerHTML='Print cost=$'+t;
    f.className='';
    }
    else {
    f.className='hide';}
    }
    }
    window.addEventListener('load',init,false);
    })();
    </script>

    </head>
    <body>

    <h2 id="njs">Javascript needs to be enabled for the Print Calculator to work</h2>

    <form id="calculator" class="nojs" action="#">

    <h3>Print Calculator</h3>

    <select id="wth">
    <option value="w">width</option>
    <option value="1">1in.</option>
    <option value="2">2in.</option>
    <option value="3">3in.</option>
    <option value="4">4in.</option>
    <option value="5">5in.</option>
    <option value="6">6in.</option>
    <option value="7">7in.</option>
    <option value="8">8in.</option>
    <option value="9">9in.</option>
    <option value="10">10in.</option>
    <option value="11">11in.</option>
    <option value="12">12in.</option>
    <option value="13">13in.</option>
    <option value="14">14in.</option>
    <option value="15">15in.</option>
    <option value="16">16in.</option>
    <option value="17">17in.</option>
    <option value="18">18in.</option>
    <option value="19">19in.</option>
    <option value="20">20in.</option>
    <option value="21">21in.</option>
    <option value="22">22in.</option>
    <option value="23">23in.</option>
    <option value="24">24in.</option>
    <option value="25">25in.</option>
    <option value="26">26in.</option>
    <option value="27">27in.</option>
    <option value="28">28in.</option>
    <option value="29">9in.</option>
    <option value="30">30in.</option>
    <option value="31">31in.</option>
    <option value="32">32in.</option>
    <option value="33">33in.</option>
    <option value="34">34in.</option>
    <option value="35">35in.</option>
    <option value="36">36in.</option>
    <option value="37">37in.</option>
    <option value="38">38in.</option>
    <option value="39">39in.</option>
    <option value="40">40in.</option>
    <option value="41">41in.</option>
    <option value="42">42in.</option>
    </select>

    <select id="hgt">
    <option value="h">height</option>
    <option value="1">1in.</option>
    <option value="2">2in.</option>
    <option value="3">3in.</option>
    <option value="4">4in.</option>
    <option value="5">5in.</option>
    <option value="6">6in.</option>
    <option value="7">7in.</option>
    <option value="8">8in.</option>
    <option value="9">9in.</option>
    <option value="10">10in.</option>
    <option value="11">11in.</option>
    <option value="12">12in.</option>
    <option value="13">13in.</option>
    <option value="14">14in.</option>
    <option value="15">15in.</option>
    <option value="16">16in.</option>
    <option value="17">17in.</option>
    <option value="18">18in.</option>
    <option value="19">19in.</option>
    <option value="20">20in.</option>
    <option value="21">21in.</option>
    <option value="22">22in.</option>
    <option value="23">23in.</option>
    <option value="24">24in.</option>
    <option value="25">25in.</option>
    <option value="26">26in.</option>
    <option value="27">27in.</option>
    <option value="28">28in.</option>
    <option value="29">9in.</option>
    <option value="30">30in.</option>
    <option value="31">31in.</option>
    <option value="32">32in.</option>
    <option value="33">33in.</option>
    <option value="34">34in.</option>
    <option value="35">35in.</option>
    <option value="36">36in.</option>
    <option value="37">37in.</option>
    <option value="38">38in.</option>
    <option value="39">39in.</option>
    <option value="40">40in.</option>
    <option value="41">41in.</option>
    <option value="42">42in.</option>
    </select>

    <select id="ppr">
    <option value="p">paper</option>
    <option value="1.5">Plain Paper</option>
    <option value="2">Simple Bond</option>
    <option value="3">Satin Paper</option>
    <option value="3">Polypropylene</option>
    <option value="4">Clear Film</option>
    <option value="5">Backlight Film</option>
    <option value="5">Adhesive Vinyl</option>
    <option value="5">Window Cling</option>
    </select>

    <input id="clear" type="reset" value="clear">

    <fieldset id="field" class="hide">
    <div id="area"> </div>
    <div id="paper"> </div>
    <div id="price"> </div>
    </fieldset>

    </form>

    </body>
    </html>[/color]

    Note that the 'CSS' and 'Javascript' should be externalised.

    [/indent]

    [i]coothead[/i]
    Copy linkTweet thisAlerts:
    @waitekdauthorJun 30.2015 — Thank you so much!!!! You are a lifesaver!

    Is there anyway to have the height/width areas not a dropdown list but an area where they can type in an amount?

    If it's too difficult I will stick with what you created for me.

    Thanks again!!
    Copy linkTweet thisAlerts:
    @cootheadJun 30.2015 — Hi there waitekd,

    [indent]
    [color=navy]Is there anyway to have the height/width areas not a dropdown list but an area where they can type in an amount?[/color][/quote]

    And what possible advantages do you see in applying that? ?

    [/indent]

    [i]coothead[/i]
    Copy linkTweet thisAlerts:
    @waitekdauthorJun 30.2015 — when calculating a banner or larger print - one of the sides can be larger than 42" - so long as one side is 42" or smaller. We print banners that are up to 36x84.

    I don't need anything to restrict them from making both sides larger than 42" - I can let them know that in text.
    Copy linkTweet thisAlerts:
    @cootheadJun 30.2015 — Hi there waitekd,

    [indent]

    OK, I understand your requirement now. ?

    Try this amended version...

    [color=navy]
    <!DOCTYPE html>
    <html lang="en">
    <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>untitled document</title>

    <style media="screen">
    body {
    background-color:rgba(0,0,0,0.06);
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:100%;
    text-align:center;
    }
    .nojs {
    display:none;
    }
    .hasjs{
    display:inline-block;
    }
    #calculator {
    padding:20px;
    border:1px solid rgba(0,0,0,0.5);
    border-radius:10px;
    box-shadow:inset 0 0 20px rgba(0,0,0,0.5),
    6px 6px 6px rgba(0,0,0,0.5);
    background-color:rgba(255,255,255,1);
    color:rgba(0,0,0,0.5);
    }
    #calculator select,#calculator input {
    color:rgba(0,0,0,0.5);
    }
    #calculator fieldset {
    border:0;
    }
    .hide {
    visibility:hidden;
    }
    #calculator fieldset div, .toolarge-style {
    margin-top:10px;
    line-height:1.8;
    border:1px solid rgba(0,0,0,0.5);
    border-radius:5px;
    text-indent:10px;
    text-align:left;
    }
    #calculator sup {
    font-size:75%;
    }
    </style>

    <script>
    (function() {
    'use strict';

    var d=document,f,cal,c,w,h,p,t,tl;

    function init(){
    d.getElementById('njs').className='nojs';
    cal=d.getElementById('calculator');
    cal.className=cal.className.replace('nojs','hasjs');
    cal.reset();
    f=d.getElementById('field');
    tl=d.getElementById('toolarge');
    d.getElementById('but').onclick=function() {
    selectValues();
    }
    d.getElementById('clear').onclick=function() {
    f.className='hide';
    tl.innerHTML='';
    tl.className='';
    w=h=p=t=NaN;
    }
    }

    function selectValues() {

    w=d.getElementById('wth').value;
    h=d.getElementById('hgt').value;
    p=d.getElementById('ppr').value;

    if((w>42)&&(h>42)){
    tl.innerHTML='Note:- only one of the dimensions may be greater then 42 inches';
    tl.className='toolarge-style';
    return;
    }
    else {
    tl.innerHTML='';
    tl.className='';
    }
    if((!isNaN(w))&&(!isNaN(h))&&(!isNaN(p))) {
    t=w*h*p/144;
    t=Math.ceil(t*4)/4;
    d.getElementById('area').innerHTML='Paper area='+(w*h/144).toFixed(2)+'ft<sup>2</sup>'
    d.getElementById('paper').innerHTML='Paper cost=$'+p+' per ft<sup>2</sup>';
    d.getElementById('price').innerHTML='Print cost=$'+t;
    f.className='';
    }
    else {
    f.className='hide';
    }
    }
    window.addEventListener('load',init,false);
    })();
    </script>

    </head>
    <body>

    <h2 id="njs">Javascript needs to be enabled for the Print Calculator to work</h2>

    <form id="calculator" class="nojs" action="#">

    <h3>Imperial Print Calculator</h3>

    <input id="wth" type="text" placeholder="width in inches">
    <input id="hgt" type="text" placeholder="height in inches">

    <select id="ppr">
    <option value="p">paper</option>
    <option value="1.5">Plain Paper</option>
    <option value="2">Simple Bond</option>
    <option value="3">Satin Paper</option>
    <option value="3">Polypropylene</option>
    <option value="4">Clear Film</option>
    <option value="5">Backlight Film</option>
    <option value="5">Adhesive Vinyl</option>
    <option value="5">Window Cling</option>
    </select>

    <input id="but" type="button" value="calculate">
    <input id="clear" type="reset" value="clear">

    <div id="toolarge"></div>

    <fieldset id="field" class="hide">
    <div id="area"> </div>
    <div id="paper"> </div>
    <div id="price"> </div>
    </fieldset>

    </form>

    </body>
    </html>[/color]

    [/indent]

    [i]coothead[/i]
    Copy linkTweet thisAlerts:
    @cootheadJul 01.2015 — Hi there waitekd,

    [indent]

    I would suggest that you use this amended code...

    [color=navy]
    <!DOCTYPE html>
    <html lang="en">
    <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Imperial Print Calculator</title>

    <style media="screen">
    body {
    background-color:rgba(0,0,0,0.06);
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:100%;
    text-align:center;
    }
    .nojs {
    display:none;
    }
    .hasjs{
    display:inline-block;
    }
    #calculator {
    padding:20px;
    border:1px solid rgba(0,0,0,0.5);
    border-radius:10px;
    box-shadow:inset 0 0 20px rgba(0,0,0,0.5),
    6px 6px 6px rgba(0,0,0,0.5);
    background-color:rgba(255,255,255,1);
    color:rgba(0,0,0,0.5);
    }
    #calculator select,#calculator input {
    color:rgba(0,0,0,0.5);
    width:120px;
    }
    #calculator fieldset {
    border:0;
    }
    .hide {
    visibility:hidden;
    }
    #calculator fieldset div, .toolarge-style {
    margin-top:10px;
    line-height:1.8;
    border:1px solid rgba(0,0,0,0.5);
    border-radius:5px;
    padding:0 10px;
    text-align:left;
    }
    #but-holder {
    margin:5px 0;
    }
    #calculator sup {
    font-size:75%;
    }
    @media screen and (max-width:500px){
    #calculator select,#calculator input {
    display:block;
    margin:5px auto;
    }
    }
    </style>

    <script>
    (function() {
    'use strict';

    var d=document,f,cal,c,w,h,p,pv,pn,t,tl;

    function init(){
    d.getElementById('njs').className='nojs';
    cal=d.getElementById('calculator');
    cal.className=cal.className.replace('nojs','hasjs');
    cal.reset();
    f=d.getElementById('field');
    tl=d.getElementById('toolarge');
    p=d.getElementById('ppr');
    d.getElementById('but').onclick=function() {
    selectValues();
    }
    d.getElementById('clear').onclick=function() {
    f.className='hide';
    tl.innerHTML='';
    tl.className='';
    w=h=pv=t=NaN;
    }
    }

    function selectValues() {

    w=d.getElementById('wth').value;
    h=d.getElementById('hgt').value;
    if(w===''){
    w=NaN;
    }
    if(h===''){
    h=NaN;
    }
    pv=p.value;
    pn=p.options[p.selectedIndex].text;

    if((w>42)&&(h>42)){
    tl.innerHTML='Note:- only one of the dimensions may be greater then 42 inches';
    tl.className='toolarge-style';
    f.className='hide';
    return;
    }
    else {
    tl.innerHTML='';
    tl.className='';
    }
    if((!isNaN(w))&&(!isNaN(h))&&(!isNaN(pv))) {
    t=w*h*pv/144;
    t=Math.ceil(t*4)/4;
    d.getElementById('area').innerHTML='Paper area is '+(w*h/144).toFixed(2)+'ft<sup>2</sup>';
    d.getElementById('paper').innerHTML=pn+' cost is $'+pv+' per ft<sup>2</sup>';
    d.getElementById('price').innerHTML='Print cost is $'+t;
    f.className='';
    }
    else {
    f.className='hide';
    }
    }
    window.addEventListener('load',init,false);
    })();
    </script>

    </head>
    <body>

    <h2 id="njs">Javascript needs to be enabled for the Print Calculator to work</h2>

    <form id="calculator" class="nojs" action="#">

    <h3>Imperial Print Calculator</h3>

    <input id="wth" type="text" placeholder="width in inches">
    <input id="hgt" type="text" placeholder="height in inches">

    <select id="ppr">
    <option value="p">paper</option>
    <option value="1.5">Plain Paper</option>
    <option value="2">Simple Bond</option>
    <option value="3">Satin Paper</option>
    <option value="3">Polypropylene</option>
    <option value="4">Clear Film</option>
    <option value="5">Backlight Film</option>
    <option value="5">Adhesive Vinyl</option>
    <option value="5">Window Cling</option>
    </select>

    <div id="toolarge"></div>

    <div id="but-holder">
    <input id="but" type="button" value="calculate">
    <input id="clear" type="reset" value="clear">
    </div>

    <fieldset id="field" class="hide">
    <div id="area"> </div>
    <div id="paper"> </div>
    <div id="price"> </div>
    </fieldset>

    </form>

    </body>
    </html>[/color]

    ...rather than that of my previous post, as it contains some useful cosmetic enhancements. ?

    [/indent]

    [i]coothead[/i]
    ×

    Success!

    Help @waitekd spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...