How to make calculations with javascript or jQuery, grabbing values from various different elements?
<p>I am currently attempting to build a quote calculator for my first website, I have been learning Javascript for a week, I have used jQuery to hide various elements when the website loads then show upon clicking relevent buttons. First Q, by doing this, am I creating any conflict between any new javascript code and the jQuery code? </p>

<p>I have built a pop-out interface that breaks down services offered, there are 5 categories. I have further developed one category to show, when clicked 'How many boxes do you need to store?' with a textbox beneath it and a submit button next to it. On clicking the submit button it shows a new question; 'How long would you like to store for?' and two more textboxes named 'weeks' and 'months' with another submit button. </p>

<p>What I'm hoping to achieve is to create a function that grabs values entered into the first box, divides the given number by 18 and round it UP to the next whole number, even if its 1.000001. Simultaneously, I need the value entered into 'months' to be multiplied by 4.33 and rounded UP aswell. Then add the result from months*4.33 to the value entered into weeks to give total duration, and the final calculation must be (totalduration*2.50)*resultofthefirstcalculation. The final result must then be displayed in a textbox of my choosing as a monetary value - £0.00</p>

<p>Many questions:</p>

<p>Do all the textboxes I'm using have to be within 'form' tags for javascript to find them properly?
If so, does it all have to be in one form or can I use more than one?<br>
Can I mix Javascript and jQuery within the same 'script' tags? If so, should one go before the other?</p>

<p>Later on, once the quote calculator is functional, I plan to use PHP to send an email to the user with their quote details, and to myself with the same. Do I need to make considerations for this in my HTML/Javascript? Do all the details I want to send have to be in: one form/more than one form/doesn't matter, can be any element?</p>

<p>Here is the pop-out button in almost perfect working condition (minus the calculations lol), slight defect with the elements on the right but I have fixed this in the website code. At the top of the script tags, at the bottom of the code, I have included my best try at doing part of the calculation after some mind-mapping to make sense of what's required and in what order. </p>

<pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;title&gt;Untitled Document&lt;/title&gt;
    &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
    &lt;style type="text/css"&gt;
    body { width:100%; height:100%; text-align:center; margin:0px; }
    div#bodycontainer { position:absolute; min-width:100%; height:100%; padding:0px; z-index:100; }
    div.centerdiv { position:relative; width:1100px; height:100%; margin:0 auto; border-left:solid 2px #ddd; border-right:solid 2px #ddd; background-image:url(images/transport_background_alt.png); overflow:visible; background-position:0px 0px; background-repeat:no-repeat; z-index:1 }
    div#getaquote { width:320px; height:55px; border:solid 1px #516c84; border-radius:15px; float:right; background:url(images/quotebkgd.png) no-repeat #fff; background-position:500px -50px; padding:none; }
    button#quote { width:300px; height:50px; margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#516c84; background-color:#fff; border:none; }
    p#quotetitle { position:relative; top:20px; left:20px; width:500px; height:100px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:28px; color:#516c84; margin:0px; text-align:left; }
    div#callus { position:absolute; top:435px; width:340px; height:110px; font-family:"Bookman Old Style", Times New Roman, Times, serif; float:left;/*border:solid 1px #000;*/ }
    div#emailus { position:absolute; top:435px; left:340px; width:370px; height:110px; font-family:"Bookman Old Style", Times New Roman, Times, serif; float:left; }
    img.icon { float:left; }
    p#email { position:absolute; top:10px; left:120px; font-size:30px; font-weight:bold; color:#516c84; margin:0px; line-height:34px; }
    p#smallertxt { position:absolute; top:50px; left:100px; font-size:22px; color:#516c84; margin:0px; }
    p#call { position:absolute; top:10px; left:105px; font-size:28px; font-weight:bold; color:#516c84; margin:0px; line-height:34px; }
    div#minbutton { width:52px; height:52px; position:absolute; top:15px; left:915px;/*border:solid 1px #000;*/ }
    div#minbutton a:hover img { background:#516c84; }
    div.quotebuttons { position:absolute; top:70px; left:15px; width:200px; height:auto; }
    button#servcat1 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
    button#servcat1:hover { background:#516c84; color:#fff; }
    button#servcat1:click {
    background:#516c84;
    color:#fff;
    }
    button#servcat2 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
    button#servcat2:hover { background:#516c84; color:#fff; }
    button#servcat3 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
    button#servcat3:hover { background:#516c84; color:#fff; }
    button#servcat4 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
    button#servcat4:hover { background:#516c84; color:#fff; }
    button#servcat5 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
    button#servcat5:hover { background:#516c84; color:#fff; }
    div#transportopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
    div#storageopt { position:absolute; top:73px; left:230px; width:500px; height:330px;/*border:outset 3px #000;*/
    }
    div#freightopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
    div#relocationopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
    div#exhibitionopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
    div#quoteelements { position:absolute; left:750px; width:auto; height:auto; left:750px; }
    form#form { position:absolute; top:270px; width:205px; height:225px; /*border:solid 1px #000;*/ font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:20px; color:#fff; line-height:30px; }
    form#quoteform { background:none; }
    input.formdata { height:30px; width:200px; border-radius:5px; }
    input#submitbtn { position:relative; display:block; float:right; width:130px; height:50px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; background:#516c84; color:#fff; border:outset 3px #516c84; border-radius:5px; }
    input#submitbtn:hover { color:#516c84; background:#fff; border-radius:5px; }
    div#quotecalc { position:absolute; top:63px; width:205px; height:210px; }
    div#total { width:200px; height:52px; margin-top:7px; background:#516c84; border-radius:5px; border:outset 1px #fff; padding:4px; }
    div#tax { width:200px; height:52px; margin-top:7px; background:#516c84; border-radius:5px; border:outset 1px #fff; padding:4px; }
    div#grandtotal { width:200px; height:52px; margin-top:7px; background:#516c84; border-radius:5px; border:outset 1px #fff; padding:4px; }
    p.calctitles { font-family:"Bookman Old Style", Times New Roman, Times, serif; font-weight:bold; color:#fff; text-align:left; margin-left:5px; margin-top:0px; text-decoration:underline; }
    #numberprice { max-width:150px; max-height:22px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-weight:500; font-size:20px; padding:0px; color:#fff; text-align:right; text-decoration:underline; margin-top:0px; border:none; background:#516c84; }
    #storagebutton1 { width:230px; height:70px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; background:#516c84; color:#fff; border:outset 3px #516c84; border-radius:5px; margin-right:10px; }
    #storagebutton1:hover { background:#fff; color:#516c84; font-weight:bold; }
    #storagebutton2 { width:230px; height:70px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; background:#516c84; color:#fff; border:outset 3px #516c84; border-radius:5px; }
    #storagebutton2:hover { background:#fff; color:#516c84; font-weight:bold; }
    #backbutton { width:70px; height:70px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:16px; background:#516c84; color:#fff; border:outset 3px #516c84; border-radius:5px; margin-right:10px; }
    #backbutton:hover { background:#fff; color:#516c84; font-weight:bold; }
    #backbutton2 { width:70px; height:70px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:16px; background:#516c84; color:#fff; border:outset 3px #516c84; border-radius:5px; margin-right:10px; }
    #backbutton2:hover { background:#fff; color:#516c84; font-weight:bold; }
    .optdisplay { width:470px; height:8px; background:#516c84; margin:10px auto; border:outset 3px #116c84; border-radius:5px; }
    .boxtext { font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:28px; font-weight:bold; color:#fff; margin-top:10px; }
    #numbofboxes { width:85px; height:55px; background:#fff; color:#516c84; text-align:center; border:outset 2px #516c84; border-radius:5px; font-size:34px; font-weight:bold; margin:0px; }
    #numbweeks { width:60px; height:40px; background:#fff; color:#516c84; text-align:center; border:outset 5px #516c84; border-radius:5px; font-size:34px; font-weight:bold; margin:0px; }
    #numbmonths { width:60px; height:40px; background:#fff; color:#516c84; text-align:center; border:outset 5px #516c84; border-radius:5px; font-size:34px; font-weight:bold; margin-top:0px; }
    .btw { font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:18px; font-weight:bold; color:#fff; }
    #smtbxno { width:85px; height:55px; background:#516c84; color:#fff; text-align:center; border-top:solid #fff 2px; border-left:solid #eee 1px; border-right:outset 3px #516c84; border-bottom:outset 2px #516c84; border-radius:5px; font-size:24px; font-weight:bold; font-family:"Bookman Old Style", Times New Roman, Times, serif; }
    #tick2 { width:85px; height:55px; background:#516c84; color:#fff; text-align:center; border-top:solid #fff 2px; border-left:solid #eee 1px; border-right:outset 3px #516c84; border-bottom:outset 2px #516c84; border-radius:5px; font-size:24px; font-weight:bold; font-family:"Bookman Old Style", Times New Roman, Times, serif; }
    &lt;/style&gt;
    &lt;/head&gt;&lt;body&gt;
    &lt;div id="bodycontainer"&gt;
    &lt;div id="getaquote"&gt; &lt;a&gt;
    &lt;button id="quote"&gt; &lt;strong&gt;Get A Quote Now&lt;/strong&gt;&lt;/br&gt;
    &lt;/button&gt;
    &lt;/a&gt;
    &lt;p id="quotetitle"&gt; &lt;strong&gt;Choose The Services You Require:&lt;/strong&gt; &lt;/p&gt;
    &lt;div id="callus"&gt; &lt;img class="icon" src="images/phoneicon.gif" /&gt;
    &lt;p id="call"&gt; 0208 208 4411 &lt;/br&gt;
    07850 495 804 &lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="emailus"&gt; &lt;img class="icon" src="images/aticon.gif" /&gt;
    &lt;p id="email"&gt; EMAIL: INFO

    &lt;p id="smallertxt"&gt; &lt;strong&gt;BelmontTransport.com&lt;/strong&gt; &lt;/p&gt;
    &lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="minbutton"&gt; &lt;a&gt;&lt;img class="minimize" src="images/minimizebutton.png" /&gt;&lt;/a&gt; &lt;/div&gt;
    &lt;div class="quotebuttons"&gt; &lt;a&gt;
    &lt;button id="servcat1"&gt; &lt;strong&gt;Transport&lt;/strong&gt; &lt;/button&gt;
    &lt;/a&gt; &lt;a&gt;
    &lt;button id="servcat2"&gt; &lt;strong&gt;Storage&lt;/strong&gt; &lt;/button&gt;
    &lt;/a&gt; &lt;a&gt;
    &lt;button id="servcat3"&gt; &lt;strong&gt;Freight&lt;/strong&gt; &lt;/button&gt;
    &lt;/a&gt; &lt;a&gt;
    &lt;button id="servcat4"&gt; &lt;strong&gt;Relocation&lt;/strong&gt; &lt;/button&gt;
    &lt;/a&gt; &lt;a&gt;
    &lt;button id="servcat5"&gt; &lt;strong&gt;Exhibition&lt;/strong&gt; &lt;/button&gt;
    &lt;/a&gt; &lt;/div&gt;
    &lt;div id="transportopt"&gt;
    &lt;div id="dedicatedtransport" onclick="addselected"&gt;
    &lt;input type="checkbox" name="options" onclick="options" value=250&gt;
    Dedicated Transport
    &lt;/input&gt;
    &lt;/div&gt;
    &lt;div id="commercialtransport"&gt; Commercial Transport &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="storageopt"&gt; &lt;a&gt;
    &lt;button id="backbutton"&gt; Back &lt;/button&gt;
    &lt;/a&gt; &lt;a&gt;
    &lt;button id="backbutton2"&gt; Back &lt;/button&gt;
    &lt;/a&gt; &lt;a&gt;
    &lt;button id="storagebutton1"&gt; Palletised Storage &lt;/button&gt;
    &lt;/a&gt; &lt;a&gt;
    &lt;button id="storagebutton2"&gt; Boxed Storage &lt;/button&gt;
    &lt;/a&gt;
    &lt;div class="optdisplay"&gt;
    &lt;div id="noboxes"&gt;
    &lt;p class="boxtext"&gt;How many boxes do you need to store?&lt;/p&gt;
    &lt;div id="boxinputs"&gt;
    &lt;input type="text" id="numbofboxes" value="0" name="boxnumber"/&gt;
    &lt;button id="smtbxno"&gt; &lt;img src="images/tick.gif" alt="proceed"/&gt; &lt;/button&gt;
    &lt;/div&gt;
    &lt;p class="btw"&gt; Standard box dimensions: 40cm x 40cm x 40cm &lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="storetimebox"&gt;
    &lt;p class="boxtext"&gt; How long do you need to store for? &lt;/p&gt;
    &lt;p class="btw"&gt; Weeks
    &lt;input type="text" id="numbweeks" value="0" name="weekno" /&gt;
    Months
    &lt;input type="text" id="numbmonths" value="0" name="monthno"/&gt;
    &lt;/p&gt;
    &lt;button id="tick2" onclick="workitout()"&gt; &lt;img src="images/tick.gif" alt="proceed"/&gt; &lt;/button&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="freightopt"&gt; This is where freight options are displayed &lt;/div&gt;
    &lt;div id="relocationopt"&gt; This is where relocation options are displayed &lt;/div&gt;
    &lt;div id="exhibitionopt"&gt; This is where exhibition options are displayed &lt;/div&gt;
    &lt;div id="quoteelements"&gt;
    &lt;form id="form"&gt;
    &lt;strong&gt;Name:&lt;/strong&gt;
    &lt;input class="formdata" type="text" name="name"&gt;
    &lt;strong&gt;Business:&lt;/strong&gt;
    &lt;input class="formdata" type="text" name="business"&gt;
    &lt;strong&gt;Email Address:&lt;/strong&gt;
    &lt;input class="formdata" type="text" name="email"&gt;
    &lt;a&gt;
    &lt;input id="submitbtn" type="submit" value="Get Quote"&gt;
    &lt;/a&gt;
    &lt;/form&gt;
    &lt;div id="quotecalc"&gt;
    &lt;div id="total"&gt;
    &lt;p class="calctitles"&gt; Sub-Total &lt;/p&gt;
    &lt;p id="stresult"&gt; WOULD LIKE SUB TOTAL HERE &lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="tax"&gt;
    &lt;p class="calctitles"&gt; VAT &lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="grandtotal"&gt;
    &lt;p class="calctitles"&gt; Grand Total &lt;/p&gt;
    &lt;p id="numberprice"&gt; &lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type="text/javascript"&gt;

    var totalprice=""
    var storagetime=""
    var boxno=""

    function workitout(){
    var a=parseInt(document.boxnumber.value);
    var b=parseInt(document.weekno.value);
    var c=parseInt(document.monthno.value);
    storagetime=(c*4.3);
    Math.round(storagetime)=totalprice;
    document.quotecalc.grandtotal.value=totalprice;
    };

    $(document).ready(function(){
    $("#quotetitle").hide();
    $("#callus").hide();
    $("#emailus").hide();
    $(".quotebuttons").hide();
    $("#minbutton").hide();
    $("#transportopt").hide();
    $("#storageopt").hide();
    $("#freightopt").hide();
    $("#relocationopt").hide();
    $("#exhibitionopt").hide();
    $("#quoteelements").hide();
    $("#quotecalc").hide();
    $("#quoteform").hide();
    $(".optdisplay").hide();
    $("#backbutton").hide();
    $("#backbutton2").hide();
    $("#noboxes").hide();
    $("#storetimebox").hide();

    });

    $("#quote").click(function(){
    $("#getaquote").animate({height:"550px",position:"absolute",top:"125px"});
    $("#getaquote").animate({width:"980px",left:"-245px"})
    $("#quotetitle").show(1000);
    $("#getaquote").css({"border-style":"solid","border-width":"2px","border-color":"#516c84"});
    $("#quote").hide(500);
    $("#bodytext").fadeTo(2500,0.15);
    $("#callus").show(1000);
    $("#emailus").show(1000);
    $(".quotebuttons").show(2000);
    $("#minbutton").show(1500);
    $("#quotecalc").show();
    $("#quoteelements").show(1000);

    /*$("#bodytext").css({"background":"#516c84"});9e9ec6*/


    });

    $("#minbutton").click(function(){
    $("#getaquote").animate({width:"320px",left:"435px"});
    $("#getaquote").animate({height:"55px",position:"absolute",top:"65px"});
    $("#quotetitle").hide();
    $("#getaquote").css({"border-style":"none"});
    /*$("#getaquote").css({"border-style":"solid","border-width":"2px","border-color":"#516c84"});*/
    $("#quote").show(2000);
    $("#bodytext").fadeTo(2500,1);
    $("#callus").hide(1000);
    $("#emailus").hide(1000);
    $(".quotebuttons").hide();
    $("#minbutton").hide();
    $("#transportopt").hide();
    $("#storageopt").hide();
    $("#freightopt").hide();
    $("#relocationopt").hide();
    $("#exhibitionopt").hide();
    $("#quoteelements").hide();

    });

    $("#servcat1").click(function(){
    $("#transportopt").show();
    $("#storageopt").hide();
    $("#freightopt").hide();
    $("#relocationopt").hide();
    $("#exhibitionopt").hide();

    });

    $("#servcat2").click(function(){
    $("#transportopt").hide();
    $("#storageopt").show();
    $("#freightopt").hide();
    $("#relocationopt").hide();
    $("#exhibitionopt").hide();

    });

    $("#servcat3").click(function(){
    $("#transportopt").hide();
    $("#storageopt").hide();
    $("#freightopt").show();
    $("#relocationopt").hide();
    $("#exhibitionopt").hide();

    });

    $("#servcat4").click(function(){
    $("#transportopt").hide();
    $("#storageopt").hide();
    $("#freightopt").hide();
    $("#relocationopt").show();
    $("#exhibitionopt").hide();

    });

    $("#servcat5").click(function(){
    $("#transportopt").hide();
    $("#storageopt").hide();
    $("#freightopt").hide();
    $("#relocationopt").hide();
    $("#exhibitionopt").show();

    });

    $("#storagebutton1").click(function(){
    $("#backbutton").show();
    $(".optdisplay").show()
    $(".optdisplay").animate({height:"245px"});
    $("#storagebutton2").hide();
    $("#storagebutton1").animate({width:"390px"})(5000)

    });

    $("#storagebutton2").click(function(){
    $("#backbutton").show();
    $(".optdisplay").show()
    $(".optdisplay").animate({height:"245px"});
    $("#storagebutton1").hide();
    $("#noboxes").show(500);
    $("#storagebutton2").animate({width:"390px"})(5000)

    });

    $("#backbutton").click(function(){
    $("#storagebutton1").show();
    $("#storagebutton2").show();
    $(".optdisplay").hide();
    $("#backbutton").hide();
    $("#storagebutton2").animate({width:"230px"});
    $("#noboxes").hide();
    $("#storagebutton1").animate({width:"230px"})(5000);

    });

    $("#smtbxno").click(function(){
    $("#noboxes").hide(1000);
    $("#storetimebox").show(1500);
    $("#backbutton").hide();
    $("#backbutton2").show();
    });

    $("#backbutton2").click(function(){
    $("#noboxes").show(1000);
    $("#storetimebox").hide(500);
    $("#backbutton").show();
    $("#backbutton2").hide();
    });

    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>
