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

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">
<h2 class="section-title">1. Quantities and Sizes (A minimum total of 12 shirts is required.)</h2>
<div class="pc-row">
<ul class="quote-sizes adult-sizes noul pc-col">

</ul>
<ul class="quote-sizes adult-sizes noul pc-col">
</ul>
</div>
<div class="clear"></div>
<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>

<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>``````

and JavaScript

``````// adult x-small qty and price
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_xs"];
if(quantity.value!=""){var howmany_adult_xs = parseInt(quantity.value);}
}
{
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);
}else if(adult_xs_qty > 24 && adult_xs_qty <=36){
}else if(adult_xs_qty > 36 && adult_xs_qty <=48){
}else if(adult_xs_qty > 48 && adult_xs_qty <=60){
}else if(adult_xs_qty > 60 && adult_xs_qty <=72){
}else if(adult_xs_qty > 72 && adult_xs_qty <=96){
}else if(adult_xs_qty > 96 && adult_xs_qty <=144){
}else{
}
}

// adult small qty and price
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_s"];
if(quantity.value!=""){var howmany_adult_s = parseInt(quantity.value);}
}
{
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);
}else if(adult_s_qty > 24 && adult_s_qty <=36){
}else if(adult_s_qty > 36 && adult_s_qty <=48){
}else if(adult_s_qty > 48 && adult_s_qty <=60){
}else if(adult_s_qty > 60 && adult_s_qty <=72){
}else if(adult_s_qty > 72 && adult_s_qty <=96){
}else if(adult_s_qty > 96 && adult_s_qty <=144){
}else{
}
}

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

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);
}else if(adult_m_qty > 24 && adult_m_qty <=36){
}else if(adult_m_qty > 36 && adult_m_qty <=48){
}else if(adult_m_qty > 48 && adult_m_qty <=60){
}else if(adult_m_qty > 60 && adult_m_qty <=72){
}else if(adult_m_qty > 72 && adult_m_qty <=96){
}else if(adult_m_qty > 96 && adult_m_qty <=144){
}else{
}
}

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

{
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);
}else if(adult_l_qty > 24 && adult_l_qty <=36){
}else if(adult_l_qty > 36 && adult_l_qty <=48){
}else if(adult_l_qty > 48 && adult_l_qty <=60){
}else if(adult_l_qty > 60 && adult_l_qty <=72){
}else if(adult_l_qty > 72 && adult_l_qty <=96){
}else if(adult_l_qty > 96 && adult_l_qty <=144){
}else{
}
}

// adult x-large qty and price
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_xl"];
if(quantity.value!=""){var howmany_adult_xl = parseInt(quantity.value);}
}
{
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);
}else if(adult_xl_qty > 24 && adult_xl_qty <=36){
}else if(adult_xl_qty > 36 && adult_xl_qty <=48){
}else if(adult_xl_qty > 48 && adult_xl_qty <=60){
}else if(adult_xl_qty > 60 && adult_xl_qty <=72){
}else if(adult_xl_qty > 72 && adult_xl_qty <=96){
}else if(adult_xl_qty > 96 && adult_xl_qty <=144){
}else{
}
}

// adult 2xl qty and price
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_2xl"];
if(quantity.value!=""){var howmany_adult_2xl = parseInt(quantity.value);}
}
{
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;
}else if(adult_2xl_qty > 24 && adult_2xl_qty <=36){
}else if(adult_2xl_qty > 36 && adult_2xl_qty <=48){
}else if(adult_2xl_qty > 48 && adult_2xl_qty <=60){
}else if(adult_2xl_qty > 60 && adult_2xl_qty <=72){
}else if(adult_2xl_qty > 72 && adult_2xl_qty <=96){
}else if(adult_2xl_qty > 96 && adult_2xl_qty <=144){
}else{
}
}

// adult 3xl qty and price
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_3xl"];
if(quantity.value!=""){var howmany_adult_3xl = parseInt(quantity.value);}
}
{
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;
}else if(adult_3xl_qty > 24 && adult_3xl_qty <=36){
}else if(adult_3xl_qty > 36 && adult_3xl_qty <=48){
}else if(adult_3xl_qty > 48 && adult_3xl_qty <=60){
}else if(adult_3xl_qty > 60 && adult_3xl_qty <=72){
}else if(adult_3xl_qty > 72 && adult_3xl_qty <=96){
}else if(adult_3xl_qty > 96 && adult_3xl_qty <=144){
}else{
}
}

// adult 4xl qty and price
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_4xl"];
if(quantity.value!=""){var howmany_adult_4xl = parseInt(quantity.value);}
}
{
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;
}else if(adult_4xl_qty > 24 && adult_4xl_qty <=36){
}else if(adult_4xl_qty > 36 && adult_4xl_qty <=48){
}else if(adult_4xl_qty > 48 && adult_4xl_qty <=60){
}else if(adult_4xl_qty > 60 && adult_4xl_qty <=72){
}else if(adult_4xl_qty > 72 && adult_4xl_qty <=96){
}else if(adult_4xl_qty > 96 && adult_4xl_qty <=144){
}else{
}
}

// adult 5xl qty and price
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["adult_5xl"];
if(quantity.value!=""){var howmany_adult_5xl = parseInt(quantity.value);}
}
{
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;
}else if(adult_5xl_qty > 24 && adult_5xl_qty <=36){
}else if(adult_5xl_qty > 36 && adult_5xl_qty <=48){
}else if(adult_5xl_qty > 48 && adult_5xl_qty <=60){
}else if(adult_5xl_qty > 60 && adult_5xl_qty <=72){
}else if(adult_5xl_qty > 72 && adult_5xl_qty <=96){
}else if(adult_5xl_qty > 96 && adult_5xl_qty <=144){
}else{
}
}

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 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 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;

}

}``````
Prakash Samariya

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;
var fc = document.getElementById('full_chest').value;
var ls = document.getElementById('left_sleeve').value;

//---For Right Dropdown
var frc = document.getElementById('front_right_chest').value;
var fb = document.getElementById('full_back').value;
var rs = document.getElementById('right_sleeve').value;
}

{
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) {
}``````
Modification in HTML! (Change in every selection dropdown like below)
``<select name="right_sleeve" id="right_sleeve"  onchange="getFrontRightChestColor()">``
Modification in exisiting function!
``````function getAdultXSPrice(extraDollar)
{
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);
}else if(adult_xs_qty > 24 && adult_xs_qty <=36){
}else if(adult_xs_qty > 36 && adult_xs_qty <=48){
}else if(adult_xs_qty > 48 && adult_xs_qty <=60){
}else if(adult_xs_qty > 60 && adult_xs_qty <=72){
}else if(adult_xs_qty > 72 && adult_xs_qty <=96){
}else if(adult_xs_qty > 96 && adult_xs_qty <=144){
}else{
}
}``````
• 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!
...``````
``````function getAdultSPrice(/*extraDollar*/)
{...
//like implemented in getAdultXSPrice function
...}
{...
//like implemented in getAdultXSPrice function
...}``````
Working Example: https://jsfiddle.net/z363exaw/13/ (Implemented on "Adult X Small" Textbox only!)

Hope it help you out to complete rest of work!
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 -
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_totprice = adult_3xl_qty * (parseFloat(theForm.elements[price_level].value) + large_charge);

}``````

and you can use that one function like

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 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>``````

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">
</div>``````

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.
Tammu

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

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
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;
}
}``````

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.

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
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!

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
- if I select one color from all six dropdown  what calculates?
- If I select only four color from only dropdown what calculates?

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
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
SOLUTION
Member_2_248744

membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
}``````

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