We help IT Professionals succeed at work.

Add a Location and Color Price based on select box selected option

niceoneishere
on
233 Views
Last Modified: 2017-03-26
I have a price calculator which calculates the price of shirts based on quantity entered and design location and colors.

I got the quantity part calculating correctly based on the number of units entered per size. But location and design is where I am getting stuck.

There are basically 4 max locations a shirt design can have and each location can have 4 max colors.

The base price per unit includes the first location and first color and from then no there is the price distribution

Locations:

1 location price is 0 as its included in the base price
2 locations price is extra dollar
3 locations price is extra 2 dollars
4 locations price is extra 3 dollars

Colors Per Location:

1 color price is 0 as its included in the base price
2 colors price is extra dollar
3 colors price is extra 2 dollars
4 colors price is extra 3 dollars

So far example, If an adult xs size shirt unit price is 7.66 and 15 units with one location and one color are selected then price will be 15 * 7.66 = 114.90

but for the same 15 units if 2 locations and 2 colors are selected then price should be (7.66 + 1 + 1) * 15 = 144.90.

And this where I am stuck. Here is my complete code I have so far in the link below and I am using pure JavaScript. Thanks and appreciate it

jFiddle

	<form id="quoteform" action="mail_quote.php" method="post">
  <div class="adult-sizes-box">
	<h2 class="section-title">1. Quantities and Sizes (A minimum total of 12 shirts is required.)</h2>
	<h3 class="small-title">Adult Sizes</h3>
	<div class="pc-row">
	<ul class="quote-sizes adult-sizes noul pc-col">
	  <li><label><span>Adult X Small</span><input id="adult_xs" type="text" name="adult_xs" data-var="adult_xs" class="amtbox" placeholder="quanity"  /></label></li>
	  <li><label><span>Adult Small</span><input id="adult_s" type="text" name="adult_s" data-var="adult_s" class="amtbox" placeholder="quanity" /></label></li>
	  <li><label><span>Adult Medium</span><input id="adult_m" type="text" name="adult_m" data-var="adult_m" class="amtbox" placeholder="quanity" /></label></li>
	  <li><label><span>Adult Large</span><input id="adult_l" type="text" name="adult_l" data-var="adult_l" class="amtbox" placeholder="quanity" /></label></li>
	  <li><label><span>Adult X Large</span><input id="adult_xl" type="text" name="adult_xl" data-var="adult_xl" class="amtbox" placeholder="quanity" /></label></li>
	  
	</ul>
   <ul class="quote-sizes adult-sizes noul pc-col">
	  <li><label><span>Adult 2X Large</span><input id="adult_2xl" type="text" name="adult_2xl" data-var="adult_2xl" class="amtbox" placeholder="quanity" /></label></li>
	  <li><label><span>Adult 3X Large</span><input id="adult_3xl" type="text" name="adult_3xl" data-var="adult_3xl" class="amtbox" placeholder="quanity" /></label></li>
	  <li><label><span>Adult 4X Large</span><input id="adult_4xl" type="text" name="adult_4xl" data-var="adult_4xl" class="amtbox" placeholder="quanity" /></label></li>
      <li><label><span>Adult 5X Large</span><input id="adult_5xl" type="text" name="adult_5xl" data-var="adult_5xl" class="amtbox" placeholder="quanity" /></label></li>
	</ul>	
	</div>
	<div class="clear"></div>
	<div class="adult-sizes-box">
	<h2 class="section-title">2. Design Location and Colors</h2>
	<div class="pc-row">
	<ul class="quote-sizes locations-colors noul pc-col post-96 quote-item type-quote-item status-publish has-post-thumbnail hentry barndoor-quotes-tee-shirts">
	 <li><label for="front_left_chest"><span>Front Left Chest</span>
	    <select name="front_left_chest" id="front_left_chest" onchange="getFrontLeftChestColor()">
         <option value="none">Number of Colors</option>
         <option value="one color">1 Color</option>
         <option value="two colors">2 Colors</option>
         <option value="three colors">3 Colors</option>
         <option value="four colors">4 Colors</option>
        </select></label>
	 </li>
	 	 <li><label><span>Full Chest</span>
	    <select name="full_chest" id="full_chest">
        <option value="none">Number of Colors</option>
         <option value="one color">1 Color</option>
         <option value="two colors">2 Colors</option>
         <option value="three colors">3 Colors</option>
         <option value="four colors">4 Colors</option>
        </select></label>
	 </li>
	<li><label><span>Left Sleeve</span>
	    <select name="left_sleeve" id="left_sleeve">
        <option value="none">Number of Colors</option>
         <option value="one color">1 Color</option>
         <option value="two colors">2 Colors</option>
         <option value="three colors">3 Colors</option>
         <option value="four colors">4 Colors</option>
        </select></label>
	 </li>
	</ul>
		<ul class="quote-sizes locations-colors noul pc-col post-96 quote-item type-quote-item status-publish has-post-thumbnail hentry barndoor-quotes-tee-shirts">
	 <li><label><span>Front Right Chest</span>
	    <select name="front_right_chest" id="front_right_chest" onchange="getFrontRightChestColor()">
         <option value="none">Number of Colors</option>
         <option value="one color">1 Color</option>
         <option value="two colors">2 Colors</option>
         <option value="three colors">3 Colors</option>
         <option value="four colors">4 Colors</option>
        </select></label>
	 </li>
	 	 <li><label><span>Full Back</span>
	    <select name="full_back" id="full_back">
        <option value="none">Number of Colors</option>
         <option value="one color">1 Color</option>
         <option value="two colors">2 Colors</option>
         <option value="three colors">3 Colors</option>
         <option value="four colors">4 Colors</option>
        </select></label>
	 </li>
	<li><label><span>Right Sleeve</span>
	    <select name="right_sleeve" id="right_sleeve">
        <option value="none">Number of Colors</option>
         <option value="one color">1 Color</option>
         <option value="two colors">2 Colors</option>
         <option value="three colors">3 Colors</option>
         <option value="four colors">4 Colors</option>
        </select></label>
	 </li>
	</ul>
	</div>
	</div>
	
	
<input id="adult_xsxl_price24" type="hidden" name="adult_xsxl_price24" value="7.66" />
<input id="adult_xsxl_price36" type="hidden" name="adult_xsxl_price36" value="6.66" />
<input id="adult_xsxl_price48" type="hidden" name="adult_xsxl_price48" value="6.29" />
<input id="adult_xsxl_price60" type="hidden" name="adult_xsxl_price60" value="5.94" />
<input id="adult_xsxl_price72" type="hidden" name="adult_xsxl_price72" value="5.65" />
<input id="adult_xsxl_price96" type="hidden" name="adult_xsxl_price96" value="5.38" />
<input id="adult_xsxl_price144" type="hidden" name="adult_xsxl_price144" value="4.98" />

	<div class="quote-total">
    <button type="button" id="get-quote" onclick="calculateTotal()">Get Quote Total </button>
	<h3 id="totalprice"> </h3>
	<div id="quote-details"></div>
	</div>
	</div>
  </form>

Open in new window


and JavaScript

// adult x-small qty and price
function getAdultXSQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_xs"];
var howmany_adult_xs =0;
if(quantity.value!=""){var howmany_adult_xs = parseInt(quantity.value);}
return howmany_adult_xs;
}
function getAdultXSPrice()
{
var adult_xs_qty =  getAdultXSQty();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["adult_xsxl_price24"].value);
var price36 = parseFloat(theForm.elements["adult_xsxl_price36"].value);
var price48 = parseFloat(theForm.elements["adult_xsxl_price48"].value);
var price60 = parseFloat(theForm.elements["adult_xsxl_price60"].value);
var price72 = parseFloat(theForm.elements["adult_xsxl_price72"].value);
var price96 = parseFloat(theForm.elements["adult_xsxl_price96"].value);
var price144 = parseFloat(theForm.elements["adult_xsxl_price144"].value);
if(adult_xs_qty <=24){
	var adult_xs_totprice = adult_xs_qty * price24;
}else if(adult_xs_qty > 24 && adult_xs_qty <=36){
		var adult_xs_totprice = adult_xs_qty * price36;
}else if(adult_xs_qty > 36 && adult_xs_qty <=48){
		var adult_xs_totprice = adult_xs_qty * price48;
}else if(adult_xs_qty > 48 && adult_xs_qty <=60){
		var adult_xs_totprice = adult_xs_qty * price60;
}else if(adult_xs_qty > 60 && adult_xs_qty <=72){
		var adult_xs_totprice = adult_xs_qty * price72;
}else if(adult_xs_qty > 72 && adult_xs_qty <=96){
		var adult_xs_totprice = adult_xs_qty * price96;
}else if(adult_xs_qty > 96 && adult_xs_qty <=144){
		var adult_xs_totprice = adult_xs_qty * price144;
}else{
		var adult_xs_totprice = adult_xs_qty * price144;
}
return adult_xs_totprice;
}

// adult small qty and price
function getAdultSQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_s"];
var howmany_adult_s =0;
if(quantity.value!=""){var howmany_adult_s = parseInt(quantity.value);}
return howmany_adult_s;
}
function getAdultSPrice()
{
var adult_s_qty =  getAdultSQty();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["adult_xsxl_price24"].value);
var price36 = parseFloat(theForm.elements["adult_xsxl_price36"].value);
var price48 = parseFloat(theForm.elements["adult_xsxl_price48"].value);
var price60 = parseFloat(theForm.elements["adult_xsxl_price60"].value);
var price72 = parseFloat(theForm.elements["adult_xsxl_price72"].value);
var price96 = parseFloat(theForm.elements["adult_xsxl_price96"].value);
var price144 = parseFloat(theForm.elements["adult_xsxl_price144"].value);
if(adult_s_qty <=24){
	var adult_s_totprice = adult_s_qty * price24;
}else if(adult_s_qty > 24 && adult_s_qty <=36){
		var adult_s_totprice = adult_s_qty * price36;
}else if(adult_s_qty > 36 && adult_s_qty <=48){
		var adult_s_totprice = adult_s_qty * price48;
}else if(adult_s_qty > 48 && adult_s_qty <=60){
		var adult_s_totprice = adult_s_qty * price60;
}else if(adult_s_qty > 60 && adult_s_qty <=72){
		var adult_s_totprice = adult_s_qty * price72;
}else if(adult_s_qty > 72 && adult_s_qty <=96){
		var adult_s_totprice = adult_s_qty * price96;
}else if(adult_s_qty > 96 && adult_s_qty <=144){
		var adult_s_totprice = adult_s_qty * price144;
}else{
		var adult_s_totprice = adult_s_qty * price144;
}
return adult_s_totprice;
}

// adult medium qty and price
function getAdultMQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_m"];
var howmany_adult_m =0;
if(quantity.value!=""){var howmany_adult_m = parseInt(quantity.value);}
return howmany_adult_m;
}
function getAdultMPrice()
{
var adult_m_qty =  getAdultMQty();

var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["adult_xsxl_price24"].value);
var price36 = parseFloat(theForm.elements["adult_xsxl_price36"].value);
var price48 = parseFloat(theForm.elements["adult_xsxl_price48"].value);
var price60 = parseFloat(theForm.elements["adult_xsxl_price60"].value);
var price72 = parseFloat(theForm.elements["adult_xsxl_price72"].value);
var price96 = parseFloat(theForm.elements["adult_xsxl_price96"].value);
var price144 = parseFloat(theForm.elements["adult_xsxl_price144"].value);
if(adult_m_qty <=24){
	var adult_m_totprice = adult_m_qty * price24;
}else if(adult_m_qty > 24 && adult_m_qty <=36){
		var adult_m_totprice = adult_m_qty * price36;
}else if(adult_m_qty > 36 && adult_m_qty <=48){
		var adult_m_totprice = adult_m_qty * price48;
}else if(adult_m_qty > 48 && adult_m_qty <=60){
		var adult_m_totprice = adult_m_qty * price60;
}else if(adult_m_qty > 60 && adult_m_qty <=72){
		var adult_m_totprice = adult_m_qty * price72;
}else if(adult_m_qty > 72 && adult_m_qty <=96){
		var adult_m_totprice = adult_m_qty * price96;
}else if(adult_m_qty > 96 && adult_m_qty <=144){
		var adult_m_totprice = adult_m_qty * price144;
}else{
		var adult_m_totprice = adult_m_qty * price144;
}
return adult_m_totprice;
}

// adult large qty and price
function getAdultLQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_l"];
var howmany_adult_l =0;
if(quantity.value!=""){var howmany_adult_l = parseInt(quantity.value);}
return howmany_adult_l;
}

function getAdultLPrice()
{
var adult_l_qty =  getAdultLQty();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["adult_xsxl_price24"].value);
var price36 = parseFloat(theForm.elements["adult_xsxl_price36"].value);
var price48 = parseFloat(theForm.elements["adult_xsxl_price48"].value);
var price60 = parseFloat(theForm.elements["adult_xsxl_price60"].value);
var price72 = parseFloat(theForm.elements["adult_xsxl_price72"].value);
var price96 = parseFloat(theForm.elements["adult_xsxl_price96"].value);
var price144 = parseFloat(theForm.elements["adult_xsxl_price144"].value);
if(adult_l_qty <=24){
	var adult_l_totprice = adult_l_qty * price24;
}else if(adult_l_qty > 24 && adult_l_qty <=36){
		var adult_l_totprice = adult_l_qty * price36;
}else if(adult_l_qty > 36 && adult_l_qty <=48){
		var adult_l_totprice = adult_l_qty * price48;
}else if(adult_l_qty > 48 && adult_l_qty <=60){
		var adult_l_totprice = adult_l_qty * price60;
}else if(adult_l_qty > 60 && adult_l_qty <=72){
		var adult_l_totprice = adult_l_qty * price72;
}else if(adult_l_qty > 72 && adult_l_qty <=96){
		var adult_l_totprice = adult_l_qty * price96;
}else if(adult_l_qty > 96 && adult_l_qty <=144){
		var adult_l_totprice = adult_l_qty * price144;
}else{
		var adult_l_totprice = adult_l_qty * price144;
}
return adult_l_totprice;
}

// adult x-large qty and price
function getAdultXLQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_xl"];
var howmany_adult_xl =0;
if(quantity.value!=""){var howmany_adult_xl = parseInt(quantity.value);}
return howmany_adult_xl;
}
function getAdultXLPrice()
{
var adult_xl_qty =  getAdultLQty();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["adult_xsxl_price24"].value);
var price36 = parseFloat(theForm.elements["adult_xsxl_price36"].value);
var price48 = parseFloat(theForm.elements["adult_xsxl_price48"].value);
var price60 = parseFloat(theForm.elements["adult_xsxl_price60"].value);
var price72 = parseFloat(theForm.elements["adult_xsxl_price72"].value);
var price96 = parseFloat(theForm.elements["adult_xsxl_price96"].value);
var price144 = parseFloat(theForm.elements["adult_xsxl_price144"].value);
if(adult_xl_qty <=24){
	var adult_xl_totprice = adult_xl_qty * price24;
}else if(adult_xl_qty > 24 && adult_xl_qty <=36){
		var adult_xl_totprice = adult_xl_qty * price36;
}else if(adult_xl_qty > 36 && adult_xl_qty <=48){
		var adult_xl_totprice = adult_xl_qty * price48;
}else if(adult_xl_qty > 48 && adult_xl_qty <=60){
		var adult_xl_totprice = adult_xl_qty * price60;
}else if(adult_xl_qty > 60 && adult_xl_qty <=72){
		var adult_xl_totprice = adult_xl_qty * price72;
}else if(adult_xl_qty > 72 && adult_xl_qty <=96){
		var adult_xl_totprice = adult_xl_qty * price96;
}else if(adult_xl_qty > 96 && adult_xl_qty <=144){
		var adult_xl_totprice = adult_xl_qty * price144;
}else{
		var adult_xl_totprice = adult_xl_qty * price144;
}
return adult_xl_totprice;
}

// adult 2xl qty and price
function getAdult2XLQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_2xl"];
var howmany_adult_2xl =0;
if(quantity.value!=""){var howmany_adult_2xl = parseInt(quantity.value);}
return howmany_adult_2xl;
}
function getAdult2XLPrice()
{
var adult_2xl_qty =  getAdult2XLQty();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["adult_xsxl_price24"].value) +1;
var price36 = parseFloat(theForm.elements["adult_xsxl_price36"].value) +1;
var price48 =  parseFloat(theForm.elements["adult_xsxl_price48"].value) +1;
var price60 =  parseFloat(theForm.elements["adult_xsxl_price60"].value) +1;
var price72 =  parseFloat(theForm.elements["adult_xsxl_price72"].value) +1;
var price96 =  parseFloat(theForm.elements["adult_xsxl_price96"].value) +1;
var price144 =  parseFloat(theForm.elements["adult_xsxl_price144"].value) +1;
if(adult_2xl_qty <=24){
	var adult_2xl_totprice = adult_2xl_qty * price24;
}else if(adult_2xl_qty > 24 && adult_2xl_qty <=36){
		var adult_2xl_totprice = adult_2xl_qty * price36;
}else if(adult_2xl_qty > 36 && adult_2xl_qty <=48){
		var adult_2xl_totprice = adult_2xl_qty * price48;
}else if(adult_2xl_qty > 48 && adult_2xl_qty <=60){
		var adult_2xl_totprice = adult_2xl_qty * price60;
}else if(adult_2xl_qty > 60 && adult_2xl_qty <=72){
		var adult_2xl_totprice = adult_2xl_qty * price72;
}else if(adult_2xl_qty > 72 && adult_2xl_qty <=96){
		var adult_2xl_totprice = adult_2xl_qty * price96;
}else if(adult_2xl_qty > 96 && adult_2xl_qty <=144){
		var adult_2xl_totprice = adult_2xl_qty * price144;
}else{
		var adult_2xl_totprice = adult_2xl_qty * price144;
}
return adult_2xl_totprice;
}

// adult 3xl qty and price
function getAdult3XLQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_3xl"];
var howmany_adult_3xl =0;
if(quantity.value!=""){var howmany_adult_3xl = parseInt(quantity.value);}
return howmany_adult_3xl;
}
function getAdult3XLPrice()
{
var adult_3xl_qty =  getAdult3XLQty();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["adult_xsxl_price24"].value) + 2;
var price36 = parseFloat(theForm.elements["adult_xsxl_price36"].value) + 2;
var price48 =  parseFloat(theForm.elements["adult_xsxl_price48"].value) + 2;
var price60 =  parseFloat(theForm.elements["adult_xsxl_price60"].value) + 2;
var price72 =  parseFloat(theForm.elements["adult_xsxl_price72"].value) + 2;
var price96 =  parseFloat(theForm.elements["adult_xsxl_price96"].value) + 2;
var price144 =  parseFloat(theForm.elements["adult_xsxl_price144"].value) + 2;
if(adult_3xl_qty <=24){
	var adult_3xl_totprice = adult_3xl_qty * price24;
}else if(adult_3xl_qty > 24 && adult_3xl_qty <=36){
		var adult_3xl_totprice = adult_3xl_qty * price36;
}else if(adult_3xl_qty > 36 && adult_3xl_qty <=48){
		var adult_3xl_totprice = adult_3xl_qty * price48;
}else if(adult_3xl_qty > 48 && adult_3xl_qty <=60){
		var adult_3xl_totprice = adult_3xl_qty * price60;
}else if(adult_3xl_qty > 60 && adult_3xl_qty <=72){
		var adult_3xl_totprice = adult_3xl_qty * price72;
}else if(adult_3xl_qty > 72 && adult_3xl_qty <=96){
		var adult_3xl_totprice = adult_3xl_qty * price96;
}else if(adult_3xl_qty > 96 && adult_3xl_qty <=144){
		var adult_3xl_totprice = adult_3xl_qty * price144;
}else{
		var adult_3xl_totprice = adult_3xl_qty * price144;
}
return adult_3xl_totprice;
}

// adult 4xl qty and price
function getAdult4XLQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_4xl"];
var howmany_adult_4xl =0;
if(quantity.value!=""){var howmany_adult_4xl = parseInt(quantity.value);}
return howmany_adult_4xl;
}
function getAdult4XLPrice()
{
var adult_4xl_qty =  getAdult4XLQty();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["adult_xsxl_price24"].value) + 3;
var price36 = parseFloat(theForm.elements["adult_xsxl_price36"].value) + 3;
var price48 =  parseFloat(theForm.elements["adult_xsxl_price48"].value) + 3;
var price60 =  parseFloat(theForm.elements["adult_xsxl_price60"].value) + 3;
var price72 =  parseFloat(theForm.elements["adult_xsxl_price72"].value) + 3;
var price96 =  parseFloat(theForm.elements["adult_xsxl_price96"].value) + 3;
var price144 =  parseFloat(theForm.elements["adult_xsxl_price144"].value) + 3;
if(adult_4xl_qty <=24){
	var adult_4xl_totprice = adult_4xl_qty * price24;
}else if(adult_4xl_qty > 24 && adult_4xl_qty <=36){
		var adult_4xl_totprice = adult_4xl_qty * price36;
}else if(adult_4xl_qty > 36 && adult_4xl_qty <=48){
		var adult_4xl_totprice = adult_4xl_qty * price48;
}else if(adult_4xl_qty > 48 && adult_4xl_qty <=60){
		var adult_4xl_totprice = adult_4xl_qty * price60;
}else if(adult_4xl_qty > 60 && adult_4xl_qty <=72){
		var adult_4xl_totprice = adult_4xl_qty * price72;
}else if(adult_4xl_qty > 72 && adult_4xl_qty <=96){
		var adult_4xl_totprice = adult_4xl_qty * price96;
}else if(adult_4xl_qty > 96 && adult_4xl_qty <=144){
		var adult_4xl_totprice = adult_4xl_qty * price144;
}else{
		var adult_4xl_totprice = adult_4xl_qty * price144;
}
return adult_4xl_totprice;
}

// adult 5xl qty and price
function getAdult5XLQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_5xl"];
var howmany_adult_5xl =0;
if(quantity.value!=""){var howmany_adult_5xl = parseInt(quantity.value);}
return howmany_adult_5xl;
}
function getAdult5XLPrice()
{
var adult_5xl_qty =  getAdult5XLQty();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["adult_xsxl_price24"].value) + 4;
var price36 = parseFloat(theForm.elements["adult_xsxl_price36"].value) + 4;
var price48 =  parseFloat(theForm.elements["adult_xsxl_price48"].value) + 4;
var price60 =  parseFloat(theForm.elements["adult_xsxl_price60"].value) + 4;
var price72 =  parseFloat(theForm.elements["adult_xsxl_price72"].value) + 4;
var price96 =  parseFloat(theForm.elements["adult_xsxl_price96"].value) + 4;
var price144 =  parseFloat(theForm.elements["adult_xsxl_price144"].value) + 4;
if(adult_5xl_qty <=24){
	var adult_5xl_totprice = adult_5xl_qty * price24;
}else if(adult_5xl_qty > 24 && adult_5xl_qty <=36){
		var adult_5xl_totprice = adult_5xl_qty * price36;
}else if(adult_5xl_qty > 36 && adult_5xl_qty <=48){
		var adult_5xl_totprice = adult_5xl_qty * price48;
}else if(adult_5xl_qty > 48 && adult_5xl_qty <=60){
		var adult_5xl_totprice = adult_5xl_qty * price60;
}else if(adult_5xl_qty > 60 && adult_5xl_qty <=72){
		var adult_5xl_totprice = adult_5xl_qty * price72;
}else if(adult_5xl_qty > 72 && adult_5xl_qty <=96){
		var adult_5xl_totprice = adult_5xl_qty * price96;
}else if(adult_5xl_qty > 96 && adult_5xl_qty <=144){
		var adult_5xl_totprice = adult_5xl_qty * price144;
}else{
		var adult_5xl_totprice = adult_5xl_qty * price144;
}
return adult_5xl_totprice;
}



function calculateTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
	var totalqty = getAdultXSQty() + getAdultSQty() + getAdultMQty() + getAdultLQty() + getAdultXLQty() + getAdult2XLQty() + getAdult3XLQty() + getAdult4XLQty() + getAdult5XLQty();
	var qtymsg; var totprice = document.getElementById('totalprice'); var qdetails = document.getElementById('quote-details');
	if(totalqty < 12){	
	     totprice.style.display='none';	qdetails.style.display='none';
		 alert("You must order at least 12 shirts.");
		 
	}else{
		   var quoteprice = (getAdultXSPrice() + getAdultSPrice() + getAdultMPrice() + getAdultLPrice() + getAdultXLPrice() + getAdult2XLPrice() + getAdult3XLPrice() + getAdult4XLPrice() + getAdult5XLPrice()).toFixed(2);
            var perpiece = parseFloat(quoteprice/totalqty);
			totprice.style.display='block';qdetails.style.display='block';
            totprice.innerHTML = "Total quantity "+totalqty + " - Total Price $"+quoteprice;
			qdetails.innerHTML = "Cost per Piece: $"+perpiece.toFixed(2);
	        document.getElementById('totalquoteprice').value = quoteprice;
	
    }	
	
}

Open in new window

Comment
Watch Question

Prakash SamariyaIT Professional
CERTIFIED EXPERT
Top Expert 2015

Commented:
Missing javascript function implementation getFrontLeftChestColor() and getFrontRightChestColor() from provided code (in jsFiddle: https://jsfiddle.net/pepin/z363exaw/10/)

So implemented common function to get Location wise color's extraDollar values in array in getFrontRightChestColor().

Implemented on "Adult X Small" Textbox only, so you must need to implement/modify code for rest of the textboxes!

Implemented new functions!
var selectedColor = [];
function getFrontRightChestColor()
{
  selectedColor = [];
  //---For Left Dropdown
  var flc = document.getElementById('front_left_chest').value;
  selectedColor.push(getAdditionalCharge(flc));
  var fc = document.getElementById('full_chest').value;
  selectedColor.push(getAdditionalCharge(fc));
  var ls = document.getElementById('left_sleeve').value;
  selectedColor.push(getAdditionalCharge(ls));
  
  //---For Right Dropdown
  var frc = document.getElementById('front_right_chest').value;
  selectedColor.push(getAdditionalCharge(frc));
  var fb = document.getElementById('full_back').value;
  selectedColor.push(getAdditionalCharge(fb));
  var rs = document.getElementById('right_sleeve').value;
  selectedColor.push(getAdditionalCharge(rs));
}

function getAdditionalCharge(val)
{
	switch(val)
  {
    case 'one color':
    return 1;
    case 'two colors':
    return 2;
    case 'three colors':
    return 3;
    case 'four colors':
    return 4;
    default:
    return 0;
  }
}

function getSumOfArray(total, num) {
    return total + num;
}

Open in new window

Modification in HTML! (Change in every selection dropdown like below)
<select name="right_sleeve" id="right_sleeve"  onchange="getFrontRightChestColor()">

Open in new window

Modification in exisiting function!
  • Modified getAdultXSPrice() function and pass manipulated extraDollar parameter like : getAdultXSPrice(extraDollar)
function getAdultXSPrice(extraDollar)
{
	var adult_xs_qty =  getAdultXSQty();
	var theForm = document.forms["quoteform"];
	var price24 = parseFloat(theForm.elements["adult_xsxl_price24"].value);
	var price36 = parseFloat(theForm.elements["adult_xsxl_price36"].value);
	var price48 = parseFloat(theForm.elements["adult_xsxl_price48"].value);
	var price60 = parseFloat(theForm.elements["adult_xsxl_price60"].value);
	var price72 = parseFloat(theForm.elements["adult_xsxl_price72"].value);
	var price96 = parseFloat(theForm.elements["adult_xsxl_price96"].value);
	var price144 = parseFloat(theForm.elements["adult_xsxl_price144"].value);
	if(adult_xs_qty <=24){
		var adult_xs_totprice = adult_xs_qty * (price24+extraDollar);  
	}else if(adult_xs_qty > 24 && adult_xs_qty <=36){
			var adult_xs_totprice = adult_xs_qty * (price36+extraDollar);   //extraDollar added to base price, manipulate total price
	}else if(adult_xs_qty > 36 && adult_xs_qty <=48){
			var adult_xs_totprice = adult_xs_qty * (price48+extraDollar);   //extraDollar added to base price, manipulate total price
	}else if(adult_xs_qty > 48 && adult_xs_qty <=60){
			var adult_xs_totprice = adult_xs_qty * (price60+extraDollar);   //extraDollar added to base price, manipulate total price
	}else if(adult_xs_qty > 60 && adult_xs_qty <=72){
			var adult_xs_totprice = adult_xs_qty * (price72+extraDollar);   //extraDollar added to base price, manipulate total price
	}else if(adult_xs_qty > 72 && adult_xs_qty <=96){
			var adult_xs_totprice = adult_xs_qty * (price96+extraDollar);   //extraDollar added to base price, manipulate total price
	}else if(adult_xs_qty > 96 && adult_xs_qty <=144){
			var adult_xs_totprice = adult_xs_qty * (price144+extraDollar);   //extraDollar added to base price, manipulate total price
	}else{
			var adult_xs_totprice = adult_xs_qty * (price144+extraDollar);   //extraDollar added to base price, manipulate total price
	}
	return adult_xs_totprice;
}

Open in new window

  • Modified calculateTotal() to calculate extraDollar to pass in Price manipulation function like "getAdultXSPrice(extraDollar)"
function calculateTotal()
{...
//get sum of extra Dollars from selectedColor array
var extraDollar = selectedColor.reduce(getSumOfArray);       

//Pass extraDollar to every Price manipulation functions!
var quoteprice = ((getAdultXSPrice(extraDollar) +
...

Open in new window

Need to modify these function and pass manipulated extraDollar parameter: getAdultSPrice() + getAdultMPrice() + getAdultLPrice() + getAdultXLPrice() + getAdult2XLPrice() + getAdult3XLPrice() + getAdult4XLPrice() + getAdult5XLPrice()
function getAdultSPrice(/*extraDollar*/)
{...
//like implemented in getAdultXSPrice function
...}
function getAdultMPrice()
{...
//like implemented in getAdultXSPrice function
...}

Open in new window

Working Example: https://jsfiddle.net/z363exaw/13/ (Implemented on "Adult X Small" Textbox only!)

Hope it help you out to complete rest of work!

Commented:
greetings niceoneishere , , you seem to have too many functions doing the same code, as all the -
    function  getAdult--Qty () { }
do the same code except for ONE change, in the form element name  as   theForm.elements["only_difference"]

and all the -
      function getAdult--Price(){ }
do the same code except for the  get Quantity function and the addition of extra changes for extra LARGE sizes -
      var price24 = parseFloat(theForm.elements["adult_xsxl_price24"].value) + 2;

To me a main purpose of functions, is that you can run the same code several times, without writing the SAME CODE several times like you have done in this,

you could have used function parameters and just had ONE function to do all 9 text inputs for quantity as cost.
function getAdultPrice( iName, large_charge){
var theForm = document.forms["quoteform"];
var adult_3xl_qty = theForm.elements[iName].value;
if (!adult_3xl_qty) return 0;
adult_3xl_qty = parseInt(adult_3xl_qty);

var price_level= "adult_xsxl_price24";
if(adult_3xl_qtyl > 96)  price_level = "adult_xsxl_price144";
  else if(adult_3xl_qty >72) price_level = "adult_xsxl_price96";
  else if(adult_3xl_qty >60) price_level = "adult_xsxl_price72";
  else if(adult_3xl_qty >48) price_level = "adult_xsxl_price60";
  else if(adult_3xl_qty >36) price_level = "adult_xsxl_price48";
  else if(adult_3xl_qty >24) price_level = "adult_xsxl_price36";
  adult_3xl_totprice = adult_3xl_qty * (parseFloat(theForm.elements[price_level].value) + large_charge);

return adult_3xl_totprice;
}

Open in new window


and you can use that one function like
var quoteprice = (getAdultPrice("adult_xs",0) + getAdultPrice("adult_s",0) + getAdultPrice("adult_m",0) + getAdultPrice("adult_l",0) + getAdultPrice("adult_xl",0) + getAdultPrice("adult_2xl",1) + getAdultPrice("adult_3xl",2) + getAdultPrice("adult_3xl",2) + getAdultPrice("adult_4xl",3)).toFixed(2);

or you can do a FOR LOOP that runs that function 9 times, changing the function parameters on each LOOP.

What I did was just have a single functions that does the for loop to get all the inputs, and all the selects.
<script>

var quantityA = [["adult_xs",0],["adult_s",0],["adult_m",0],["adult_l",0],
   ["adult_xl",0],["adult_2xl",1],["adult_3xl",2],["adult_4xl",3],["adult_5xl",4]];
var theForm = document.forms["quoteform"];
   
function getTotalQuan(){
var qty = 0;
for (i=0; i< quantityA.length; ++i) {
if(!theForm.elements[quantityA[i][0]].value) continue;
  qty += parseInt(theForm.elements[quantityA[i][0]].value);
  }
return qty;
}

function calLocations( ) {
var sels =["front_left_chest","full_chest","left_sleeve","front_right_chest","full_back","right_sleeve"];
var val = '0', loc = 0, tc = 0, tl = 0;
for (var i = 0; i < sels.length; ++i) {
  val = theForm[sels[i]].value;
  if (val == "none") continue;
  ++loc;
  switch (val) {
    case 'two colors': ++tc; break;
    case "three colors": tc+=2; break;
    case "four colors" : tc+=3; break;
    }
  }
if(loc) --loc;
if(!loc) return 0;
return loc+tc;
}

function getAllCosts(){
var costsA = 0;
var pri=[0,0,0,0,0,0,0];
var pricesA = document.getElementById("prices").getElementsByTagName("input");
for (var i=0; i< pricesA.length; ++i) {pri[i]= parseFloat(pricesA[i].value); };
for (i=0; i< quantityA.length; ++i) {
  if(!theForm[quantityA[i][0]].value) continue;
  var price_level=0, qty = parseInt(theForm[quantityA[i][0]].value);
if (qty < 1) continue;
if(qty > 96) price_level = 6;
  else if(qty >72) price_level = 5;
  else if(qty >60) price_level = 4;
  else if(qty >48) price_level = 3;
  else if(qty >36) price_level = 2;
  else if(qty >24) price_level = 1;
  costsA += qty * (pri[price_level]+quantityA[i][1]);
  }

return costsA;
}


function calculateTotal(){
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
var totprice = document.getElementById('totalprice'), qdetails = document.getElementById('quote-details');
var totalqty = getTotalQuan();
if(totalqty < 12){	
  totprice.style.display='none';	qdetails.style.display='none';
  alert("You must order at least 12 shirts.");
  return;
}

var quoteprice = getAllCosts(), 
i = calLocations( );

quoteprice+=(i*totalqty);
var perpiece = parseFloat(quoteprice/totalqty);
  totprice.style.display='block';qdetails.style.display='block';
  totprice.innerHTML = "Total quantity "+totalqty + " - Total Price $"+quoteprice.toFixed(2);
  qdetails.innerHTML = "Cost per Piece: $"+perpiece.toFixed(2);
  }	

</script>

Open in new window


this seems to work, but I did not really check to see if the amounts were correct for the inputs values and selects values.

And to make it a little easier to get the hidden inputs I add a <div id="prices"> around the inputs so I could just use -
      var pricesA = document.getElementById("prices").getElementsByTagName("input");
to get an array of the inputs.
<div id="prices">	
<input id="adult_xsxl_price24" type="hidden" name="adult_xsxl_price24" value="7.66" />
<input id="adult_xsxl_price36" type="hidden" name="adult_xsxl_price36" value="6.66" />
<input id="adult_xsxl_price48" type="hidden" name="adult_xsxl_price48" value="6.29" />
<input id="adult_xsxl_price60" type="hidden" name="adult_xsxl_price60" value="5.94" />
<input id="adult_xsxl_price72" type="hidden" name="adult_xsxl_price72" value="5.65" />
<input id="adult_xsxl_price96" type="hidden" name="adult_xsxl_price96" value="5.38" />
<input id="adult_xsxl_price144" type="hidden" name="adult_xsxl_price144" value="4.98" />
</div>

Open in new window

Most Valuable Expert 2011
Author of the Year 2014

Commented:
Some high-level thoughts about this application...

From the look of this question, we have hundreds of lines of JavaScript doing computations about data that is wired into the JavaScript.  This violates the the single-responsibility principle (separation of concerns) because it mixes logic and data in ways that makes it impossible to change one without also changing the other.

If this is a real-world application and not an academic assignment, you might want to consider a more secure and flexible design.  In the direction of both security and flexibility, you would move all of your calculations out of the client-side javascript and put them on the server, where hackers can't tinker with your input controls.  The client side of things would be mostly just a "view" in the sense of model-view-controller, with the client providing HTML form inputs and the server producing the response.  Many online applications would choose AJAX for something like this.  I can think of no reason that we would want to expose our pricing strategy by putting the costs and computations on the client computer!

Rather than hard-wiring costs into the client-side scripts, you would put the components and their costs into a database, and derive the costs from the database values, with a minimum amount of programmatic computation.  This design will let you react to market changes by updating the database instead of changing Javascript code.  If a price needs to change, the changes are done in the database.  If an option needs to be added, the option goes into the database.  The programming and data are kept separate.

If you're selling items from inventory, and not just custom one-off orders, you might want to learn about the concept of a SKU, which uniquely identifies a product including all its details of size, color, material, etc.  If your client's selections match a SKU, you can ship from inventory immediately.  If they do not match a SKU, you have to create a custom product to fill the order, and this is likely a completely separate process, very different from sending a "pick and ship" notice to the warehouse.

Author

Commented:
Hi Prakash,

Thanks for replying but the calculations are not working properly. For instance adult x size if the qty is 15 one color and one location selected the price should be 7.66 and is calculated as below

Upto 24 qty the price is 7.66 which includes the one location and one color so the total will be 7.66 * 15 = 114.90 but with your calculation its adding a dollar to 7.66 and the total is 8.66 * 15 = 129.90

Author

Commented:
Hi Slick182,

Thanks for replying, I agree with what you are saying sir, Can you provide me an example how I can combine these into one function and what changes I need to do in the both HTML and JavaScript.

Thanks again
Prakash SamariyaIT Professional
CERTIFIED EXPERT
Top Expert 2015

Commented:
Upto 24 qty the price is 7.66 which includes the one location and one color so the total will be 7.66 * 15 = 114.90 but with your calculation its adding a dollar to 7.66 and the total is 8.66 * 15 = 129.90
As per your logic I added new function getAdditionalCharge, which manipulates for additional charge; you can modify below function as per your logic!
function getAdditionalCharge(val)
{
	switch(val)
  {
    case 'one color':
    return 0;
    case 'two colors':
    return 2;
    case 'three colors':
    return 3;
    case 'four colors':
    return 4;
    default:
    return 0;
  }
}

Open in new window


Implemented on "Adult X Small" Textbox only, so you must need to implement/modify code for rest of the textboxes!
Working Example: https://jsfiddle.net/z363exaw/13/ (Implemented on "Adult X Small" Textbox only!)
I guess, you have implemented for other textboxes also! as my example was implemented with one textbox only!  
And getAdditionalCharge contains the logic of extra charges, you may modify as per your need.

Author

Commented:
Thanks Prakash,

I updated the logic as you have suggested but its still not calculating correctly. For instance, If i select one color from Front Left Chest for qty of 15, the price would be baseprice + one location + one colors ( 7.66 + 0 + 0) bring total to 7,66 * 15 = 114.90

Now If I select one more color from Front Right Chest for the same qty the price structure should be as follows

baseprice + one location + one color + second location + second color
7.66 + 0 + 0 + 1 + 1 = 9.66

so basically after the first location and first color from any one of the boxes, a dollar of location and a dollar of color should be added to the base price.

I appreciate your help sir

Thanks
Prakash SamariyaIT Professional
CERTIFIED EXPERT
Top Expert 2015

Commented:
I guess, all your dropdown was for location wise color!! You have 6 dropdown each has identified as location_color and color as items!
Right?
If it is right, So it when you select from one dropdown means one location+color(value).  Please correct me!

Author

Commented:
yes that is correct when a customer selects a color from any of these drop down boxes it should inclue location plus color

thanks again
Prakash SamariyaIT Professional
CERTIFIED EXPERT
Top Expert 2015

Commented:
Please guide me
- if I select one color from all six dropdown  what calculates?
- If I select only four color from only dropdown what calculates?

Author

Commented:
If one color is selected from all the six drop downs ( remember as I said Initially max number of locations a shirt can have is 4 and colors is also 4) sorry its complicated hence the reason why I am stuck . I am open to solutions if I need to change the layout of the drop down boxes
Base Price : 7.66 +
1 location: 0 +
1 location color: 0+
2 location: 1+
2 location color: 1+
3 location: 1+
3 location color 1+
4 location : 1+
4 location color: 1
so total will be 7.66 + 0 +0 +1 +1 + 1+ 1 +1 +1 = 13.66

If I select only four colors from a single drop down

base price: 7.66
one location: 0 +
one color: 0 +
remaingn 3 colors: 3
so total will be 7.66 + 0 +0 + 3 = 10.66

Thanks again
Prakash SamariyaIT Professional
CERTIFIED EXPERT
Top Expert 2015

Commented:
from below, which one is location1 and which one is location2 or 3
Locations:
front_left_chest
full_chest
left_sleeve
front_right_chest
full_back
right_sleeve

Same, for color what is the value (if select "four color", then?)
Colors:
case 'one color':    return 1;
case 'two colors':   return 2;
case 'three colors': return 3;
case 'four colors':  return 4;

Also could not understand
If I select only four colors from a single drop down

base price: 7.66
one location: 0 +
one color: 0 +
remaingn 3 colors: 3
so total will be 7.66 + 0 +0 + 3 = 10.66
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Commented:
I am not real sure about what you explained for the extra LOCATION emblem charges and the amount of colors? , ,
But here is my attempt at getting ALL location charges-
function getLocations( ) {
// loop through ALL locations selects from array below
var sels =["front_left_chest","full_chest","left_sleeve","front_right_chest","full_back","right_sleeve"];

var val = '0', loc = 0, tc = 0;
for (var i = 0; i < sels.length; ++i) {
  val = theForm[sels[i]].value;
  if (val == "none") continue;
  ++loc; // increase the number of locations if not "none"
  switch (val) {  // increase total colors charge per selection
    case 'two colors': ++tc; break;
    case "three colors": tc+=2; break;
    case "four colors" : tc+=3; break;
    }
  }
if(loc) --loc; // decrease the locations for one FREE

return loc+tc; // add locations and colors
}

Open in new window


this will return the location and color charges for each shirt ordered, , so you need to multiply this location charge by the total number of shirts ordered
IT Professional
CERTIFIED EXPERT
Top Expert 2015
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Hi Prakash, Brilliant, I am gonna test this and let you know sir. Appreciate your help in this

Author

Commented:
Thanks Guys and Appreciate it

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions