I'm having trouble with my price quote calculator, it just doesn't work and I have tried researching why and changing up the code and re-starting before uploading this.
My questions Can anybody find the fault in my code to make this work?
Javascript:
var theQuoteForm = document.forms["quoteForm"];
var additionalLogo= new Array();
additionalLogo["graphicNone"]=0;
additionalLogo["graphicOne"]=10;
additionalLogo["graphicTwo"]=20;
additionalLogo["graphicThree"]=30;
additionalLogo["graphicFour"]=40;
additionalLogo["graphicFive"]=50;
additionalLogo["graphicSix"]=60;
additionalLogo["graphicSeven"]=70;
additionalLogo["graphicEight"]=80;
additionalLogo["graphicNine"]=90;
additionalLogo["graphicTen"]=100;
var additionalEmail= new Array();
additionalEmail["webNone"]=0;
additionalEmail["webOne"]=10;
additionalEmail["webTwo"]=20;
additionalEmail["webThree"]=30;
additionalEmail["webFour"]=40;
additionalEmail["webFive"]=50;
additionalEmail["webSix"]=60;
additionalEmail["webSeven"]=70;
additionalEmail["webEight"]=80;
additionalEmail["webNine"]=90;
additionalEmail["webTen"]=100;
function getGraphicBasePrice()
{
var graphicBasePrice=0;
var theQuoteForm = document.forms["quoteForm"];
var graphics = theQuoteForm.elements["graphics"];
if(graphics.checked==true)
{
graphicBasePrice=100;
}
else if(graphics.checked==false)
{
graphicBasePrice=0;
}
return graphicBasePrice;
}
function sLogosPrice()
{
var sLogoPrice=0;
var theQuoteForm = document.forms["quoteForm"];
var smallLogo = theQuoteForm.elements["sLogo"];
if(smallLogo.checked==true)
{
sLogoPrice=20;
}
else if(smallLogo.checked==false)
{
sLogoPrice=0;
}
return sLogoPrice;
}
function mLogosPrice()
{
var mLogoPrice=0;
var theQuoteForm = document.forms["quoteForm"];
var mediumLogo = theQuoteForm.elements["mLogo"];
if(mediumLogo.checked==true)
{
mLogoPrice=40;
}
else if(mediumLogo.checked==false)
{
mLogoPrice=0;
}
return mLogoPrice;
}
function lLogosPrice()
{
var lLogoPrice=0;
var theQuoteForm = document.forms["quoteForm"];
var largeLogo = theQuoteForm.elements["lLogo"];
if(largeLogo.checked==true)
{
lLogoPrice=60;
}
else if(largeLogo.checked==false)
{
lLogoPrice=0;
}
return lLogoPrice;
}
function getAdditionalLogoPrice()
{
var additionalLogoPrice=0;
var theQuoteForm = document.forms["quoteForm"];
var selectedAdditionalLogo = theQuoteForm.elements["additLogo"];
additionalLogoPrice = additionalLogo[selectedAdditionalLogo.value];
return additionalLogoPrice;
}
function postersPrice()
{
var posterPrice=0;
var theQuoteForm = document.forms["quoteForm"];
var Poster = theQuoteForm.elements["poster"];
if(Poster.checked==true)
{
posterPrice=60;
}
return posterPrice;
}
function illustrativesPrice()
{
var illustrativePrice=0;
var theQuoteForm = document.forms["quoteForm"];
var Illustrative = theQuoteForm.elements["illustrative"];
if(Illustrative.checked==true)
{
illustrativePrice=60;
}
return illustrativePrice;
}
function getWebBasePrice()
{
var webBasePrice=0;
var theQuoteForm = document.forms["quoteForm"];
var web = theQuoteForm.elements["web"];
if(web.checked==true)
{
webBasePrice=150;
}
return webBasePrice;
}
function designsPrice()
{
var designPrice=0;
var theQuoteForm = document.forms["quoteForm"];
var Design = theQuoteForm.elements["design"];
if(Design.checked==true)
{
designPrice=60;
}
return designPrice;
}
function developsPrice()
{
var developPrice=0;
var theQuoteForm = document.forms["quoteForm"];
var Develop = theQuoteForm.elements["develop"];
if(Develop.checked==true)
{
developPrice=60;
}
return developPrice;
}
function seosPrice()
{
var seoPrice=0;
var theQuoteForm = document.forms["quoteForm"];
var Seo = theQuoteForm.elements["seo"];
if(Seo.checked==true)
{
seoPrice=60;
}
return seoPrice;
}
function cmssPrice()
{
var cmsPrice=0;
var theQuoteForm = document.forms["quoteForm"];
var Cms = theQuoteForm.elements["cms"];
if(Cms.checked==true)
{
cmsPrice=60;
}
return cmsPrice;
}
function hostingsPrice()
{
var hostingPrice=0;
var theQuoteForm = document.forms["quoteForm"];
var Hosting = theQuoteForm.elements["hosting"];
if(Hosting.checked==true)
{
hostingPrice=60;
}
return hostingPrice;
}
function emailsPrice()
{
var emailPrice=0;
var theQuoteForm = document.forms["quoteForm"];
var emailAccount = theQuoteForm.elements["emailAccount"];
if(emailAccount.checked==true)
{
emailPrice=60;
}
return emailPrice;
}
function getAdditionalEmailPrice()
{
var additionalEmailPrice=0;
var theQuoteForm = document.forms["quoteForm"];
var selectedAdditionalEmail = theQuoteForm.elements["additEmail"];
additionalEmailPrice = additionalEmail[selectedAdditionalEmail.value];
return additionalEmailPrice;
}
function maintenancesPrice()
{
var maintenancePrice=0;
var theQuoteForm = document.forms["quoteForm"];
var maintenance = theQuoteForm.elements["maintenance"];
if(maintenance.checked==true)
{
maintenancePrice=60;
}
return maintenancePrice;
}
function calculateTotal()
{
var quoteFormPrice = getGraphicBasePrice() + sLogosPrice() + mLogosPrice() + lLogosPrice() + getAdditionalLogoPrice() + postersPrice() + illustrativesPrice() + getWebBasePrice() + designsPrice() + developsPrice() + seosPrice() + cmssPrice() + hostingsPrice() + emailsPrice() + getAdditionalEmailPrice() + maintenancesPrice();
var calculateObject = document.getElementById('totalPrice');
calculateObject.innerHTML = "<b>Total Quote Price:</b> £"+quoteFormPrice;
}
HTML:
<script type="text/javascript" src="external/scripts/quoteCalculator.js"></script>
<form action="" id="quoteForm" onsubmit="return false;" style="width: 630px; margin-top: 40px; margin-left: 20px; background-color: #fff; color: #000;">
<fieldset style="width: 600px;">
<label for="graphics" class="graphicsLbl">Graphics</label>
<input id="graphics" class="checkBox" name="graphics" type="checkbox" onclick="calculateTotal()" tabindex=1><br /><br />
<label for="sLogo" class="Lbl">Small Logo (150px to 225px)</label>
<input id="sLogo" class="checkBox" name="sLogo" type="checkbox" onclick="calculateTotal()" tabindex=2><br /><br />
<label for="mLogo" class="Lbl">Medium Logo (226px to 360px)</label>
<input id="mLogo" class="checkBox" name="mLogo" type="checkbox" onclick="calculateTotal()" tabindex=3><br /><br />
<label for="lLogo" class="Lbl">Large Logo (361px+)</label>
<input id="lLogo" class="checkBox" name="lLogo" type="checkbox" onclick="calculateTotal()" tabindex=4><br /><br />
<label for="aLogo" class="additLogoLbl">Would you like additional logos?</label>
<input id="aLogo" class="checkBox" name="aLogo" type="checkbox" onclick="calculateTotal()" tabindex=5><br /><br />
<label for="additLogo" class="additLogoLbl">Choose amount of additional logos you would like:</label>
<select name="additLogo" id="additLogo" style="width: 100%; border: 1px solid #000" onchange="calculateTotal()" tabindex=6>
<option value="graphicNone">0</option>
<option value="graphicOne">1</option>
<option value="graphicTwo">2</option>
<option value="graphicThree">3</option>
<option value="graphicFour">4</option>
<option value="graphicFive">5</option>
<option value="graphicSix">6</option>
<option value="graphicSeven">7</option>
<option value="graphicEight">8</option>
<option value="graphicNine">9</option>
<option value="graphicTen">10</option>
</select><br /><br />
<label for="poster" class="Lbl">Poster</label>
<input id="poster" class="checkBox" name="poster" type="checkbox" onclick="calculateTotal()" tabindex=7><br /><br />
<label for="illustrative" class="Lbl">Illustrative</label>
<input id="illustrative" class="checkBox" name="illustrative" type="checkbox" onclick="calculateTotal()" tabindex=8><br /><br />
<label for="web" class="webLbl">Web</label>
<input id="web" class="checkBox" name="web" type="checkbox" onclick="calculateTotal()" tabindex=9><br /><br />
<label for="design" class="Lbl">Just design the look (Design)</label>
<input id="design" class="checkBox" name="design" type="checkbox" onclick="calculateTotal()" tabindex=10><br /><br />
<label for="develop" class="Lbl">We have a design to implement (Develop)</label>
<input id="develop" class="checkBox" name="develop" type="checkbox" onclick="calculateTotal()" tabindex=11><br /><br />
<label for="seo" class="Lbl">Search Engine Optimization (SEO)</label>
<input id="seo" class="checkBox" name="seo" type="checkbox" onclick="calculateTotal()" tabindex=12><br /><br />
<label for="cms" class="Lbl">Content Management Systems (CMS)</label>
<input id="cms" class="checkBox" name="cms" type="checkbox" onclick="calculateTotal()" tabindex=13><br /><br />
<label for="hosting" class="Lbl">We want the/a Website hosted (Hosting)</label>
<input id="hosting" class="checkBox" name="hosting" type="checkbox" onclick="calculateTotal()" tabindex=14><br /><br />
<label for="emailAccount" class="emailAccountLbl">Email Account Creation (Only with hosting)</label>
<input id="emailAccount" class="checkBox" name="emailAccount" type="checkbox" onclick="calculateTotal()" tabindex=15><br /><br />
<label for="aEmail" class="aEmailLbl">Would you like additional email accounts?</label>
<input id="aEmail" class="checkBox" name="aEmail" type="checkbox" onclick="calculateTotal()" tabindex=16><br /><br />
<label for="additEmailAccount" class="additEmailAccountLbl">Choose amount of additional email accounts you would like</label>
<select name="additEmailAccount" id="additEmailAccount" style="width: 100%; border: 1px solid #000" onchange="calculateTotal()" tabindex=17>
<option value="webNone">0</option>
<option value="webOne">1</option>
<option value="webTwo">2</option>
<option value="webThree">3</option>
<option value="webFour">4</option>
<option value="webFive">5</option>
<option value="webSix">6</option>
<option value="webSeven">7</option>
<option value="webEight">8</option>
<option value="webNine">9</option>
<option value="webTen">10</option>
</select><br /><br />
<label for="maintenance" class="Lbl">We would like you to maintain our Website (On-Going Maintenance)</label>
<input id="maintenance" class="checkBox" name="maintenance" type="checkbox" onclick="calculateTotal()" tabindex=18><br /><br />
It all goes into this div:
<div id="totalPrice"></div>
</fieldset>
</form>
