simple instant price quote calculator javascript

Hi there,

I am trying to come up with an instant price quote calculator in javascript.

it would be a simple one with only three fields:
"label" -Number of Shirts
"label" -Number of Colors on Front
"label" -Number of Colors on Back

"button" calculate total

"results" total: $xx per bag:$xx

total price would decrease based on the number of shirts (more volume) / increase based on the number of colors both front and back.

something i found online that is 100% what i want: http://zeustees.com/about-us

i am not too familiar with javascript. ok tinkering with jquery but that's it.

i am obviously not asking anyone to work for free but if someone could point me to a semblance of a solution, some code, something online that i could modify etc. i would love to learn javascript in the process and ideally come up with a working version of the calculator.

i tried to work with the .js from that website but it calls in some qq2.php page. so i haven't been able to replicate the solution. plus, i would assume that their price structure would be different than mine.

thank you in advance for your help
BD

6

Contributors

7

Replies

1 Year

Discussion Span

8 Months Ago

Last Updated

18

Views

basamdamdu

Newbie Poster

12 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

Hi,

I hope this code may help you to get the solution you want

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calc</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!-- 
$(document).ready(function() {
	$('#calculateTotal').click(function() {
		
			var shirtsPrice = 10.50, perColorPrice = 5.99;	
			
			var inputNum_of_Shirts = $('#shirts').val();
			var inputNum_of_FColor = $('#colorsOnFront').val();
			var inputNum_of_BColor = $('#colorsOnBack').val();
			
			var totalCost = (inputNum_of_Shirts*parseFloat(shirtsPrice))
			+(parseFloat(perColorPrice)*inputNum_of_FColor)
			+(parseFloat(perColorPrice)* inputNum_of_BColor );
			var perShirtCost = (parseFloat(shirtsPrice))
			+(parseFloat(perColorPrice)*inputNum_of_FColor)
			+(parseFloat(perColorPrice)*inputNum_of_BColor);
			
			$('#total').html(formatCurrency(totalCost));
			$('#perShirt').html(formatCurrency(perShirtCost));
			$('#result').css('display', 'block');
	});
});
// This Function I have searched from Web 
function formatCurrency(strValue)
{
	strValue = strValue.toString().replace(/\$|\,/g,'');
	dblValue = parseFloat(strValue);

	blnSign = (dblValue == (dblValue = Math.abs(dblValue)));
	dblValue = Math.floor(dblValue*100+0.50000000001);
	intCents = dblValue%100;
	strCents = intCents.toString();
	dblValue = Math.floor(dblValue/100).toString();
	if(intCents<10)
		strCents = "0" + strCents;
	for (var i = 0; i < Math.floor((dblValue.length-(1+i))/3); i++)
		dblValue = dblValue.substring(0,dblValue.length-(4*i+3))+','+
		dblValue.substring(dblValue.length-(4*i+3));
	return (((blnSign)?'':'-') + '$' + dblValue + '.' + strCents);
}

-->
</script>
</head>
<body>
<form id="calc" name="calc">
  	<p>
      <input id="shirts" name="shirts" type="text">
      <label for="shirts">Number of Shirts</label>
    </p>
    <p>
      <input id="colorsOnFront" name="colorsOnFront" type="text">
      <label for="colorsOnFront">Number of Colors on Front</label>
    </p>
    <p>
      <input id="colorsOnBack" name="colorsOnBack" type="text">
      <label for="colorsOnBack">Number of Colors on Back</label>
    </p>
    <p><input name="calculateTotal" id="calculateTotal" type="button" value="Calculate Total" /></p>
    <div id="result" style="display:none;"><strong>Total:</strong> <span id="total"></span> <strong>Per Shirt:</strong> <span id="perShirt"></span></div>
  </div>
</form>
</body>
</html>

Rahul Dev Katarey

katarey

Junior Poster

167 posts since Jul 2005

Reputation Points: 39

Solved Threads: 23

Skill Endorsements: 0

2 Years Ago

0

wow!! thanks a million Katarey!!

this is wonderful and is sure going to help me a bunch. and with the way it's written, i can actually understand the code and try to experiment with it (i'm now gonna try to add the increase/decrease volume price thing and maybe a constant, like set up cost etc)... well, let's start with the constant thing :)

i'll post the whole thing once done.
thanks again for your help. it is greatly appreciated!
BD

basamdamdu

Newbie Poster

12 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

basamdamdu

Did you ever figure out how to add the volume pricing to this formula???? If so could you please post it

degasdad

Newbie Poster

1 post since Feb 2011

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

@degasdad
Isn't line 14 reading the value of shirt volume? Also, line 18-20 are the computation including the volume of the price already?

By the way, in the computation of line 18-23, I believe that you do not need 'parseFloat()' because the variables are already declared as 'float' inside the function. They are not string in the first place.

Also, the formatCurrency() accepts string which may contains currency string in it, but the call actually passes a float value to it. Therefore, there are unnecessary steps in the function for this case - attempt to remove '$' or ',' & convert the string back to float (line 33 & 34).

Taywin

Posting Maven

2,633 posts since Apr 2010

Reputation Points: 275

Solved Threads: 375

Skill Endorsements: 17

2 Years Ago

0

Hi degasdad,
sorry for the late reply.
no i haven't because the project has been canceled :(
thank you katarey for your help.
BD

basamdamdu

Newbie Poster

12 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

0

hi- I want to use this calculator in website but I am trying to sell services not products. What if I add a base fee or a flat fee in each of the item? Thank you so much! -Jessy

bojinggai

Newbie Poster

1 post since Apr 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

8 Months Ago

0

I need to add a drop down list with differents style of t-shirt can anyone help me. I will try to make this code work to calculate quotes on my website.

Thank you

etshirt

Newbie Poster

1 post since Sep 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

simple instant price quote calculator javascript

This article has been dead for over three months: Start a new discussion instead