Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Registered User
    Join Date
    Jan 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Price Calculator

    I am trying to create a price calculator that automatically calculates the price of custom made picture frame. I got an equation that finds the square area of the frame by multiplying the perimeter (2*length*width) by the thickness (which the user can choose from 1.5", 2" or 3"). Then it multiplies it by a decimal number (0.27 if the frame is 1.5" thick, 0.23 if its 2" thick, and 0.18 if its 3" thick). Then it adds a $5 custom made fee to the final answer. But when I save it to an html file and load it in Internet Explorer, it doesn't calculate. Do you guys have an idea how to make it work?

    <SCRIPT LANGUAGE="JavaScript">
    function calculate_total(){
    var length = Number(document.
    getElementById('calc').
    length.value);
    var width = Number(document.
    getElementById('calc').
    width.value);
    var frame = Number(document.
    getElementById('calc').
    frame.options
    [document.getElementById('calc...
    frame.options.
    selectedIndex].value);
    var total = (2 * (length + width)) * frame;
    switch (frame){
    case 1.5:
    total = total * 0.27;
    break;
    case 2:
    total = total * 0.23;
    break;
    case 3:
    total = total * 0.18;
    break;
    }

    document.getElementById('calc'... = total + 5;
    }
    </script>

    Sorry the cut off code so you might have to concatenate some lines above this if you have questions let me know.
    And here is the form I used, again its very basic but it works.

    <form name="calc" id="calc">
    Length: <input type="text" name="length" onchange="calculate_total()" /><br />
    Width: <input type="text" name="width" onchange="calculate_total()" /><br />
    <select name="frame" onchange="calculate_total()">
    <option value="0" selected>Select a Frame</option>
    <option value="1.5">1.5" Narrow Barnwood</option>
    <option value="2">2" Rustic Barnwood</option>
    <option value="3">3" Thick Barnwood</option>
    </select>
    <br />
    <br />
    Total: <input id="total" name="total"/>
    </form>

  • #2
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    jazco:

    Perimeter is not: 2* length * width. It's (2 * length) + (2 * width).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	function calc(nForm){
    
    		if (nForm['length'].value == "" || nForm['width'].value == "" || nForm['frame'].value == "")
    			{
    			 return;
    			}
    		var price = (((nForm['length'].value * 2) + (nForm['width'].value * 2)) * nForm['frame'].value) + Number(5);
    		nForm['total'].value = price.toFixed(2);
    	}
    	
    </script>
    <style type="text/css">
    
    	 body {background-color:#eae3c6;margin-top:60px}
    	 form {width:280px;margin:auto}
    	 fieldset {width:260px;background-color:#f0fff0;border:1px solid #87ceeb}
    	 legend {font-family:georgia;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
    	 label {font-family:times;font-size:12pt;color:#00008b;padding:5px;display:block;margin-left:20px}
    	 input {font-family:times;font-size:12pt;margin-left:35px;text-align:right}
    	 select {font-family:times;font-size:10pt;margin-left:25px}
    	.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px;text-align:center}
    	
    </style>
    </head>
    	<body>
    		<form method="post" action="">
    		   <fieldset>
    			<legend>Frame Price Calculator</legend>
    				<label>Length: <input type='text' name='length' size='5' onblur="calc(this.form)"></label>
    				<label>Width:&nbsp;&nbsp;<input type='text' name='width' size='5' onblur="calc(this.form)"></label>
    				<select name="frame" onchange="calc(this.form)">
    					<option value="" selected>Select a Frame</option>
    					<option value="1.5">1.5" Narrow Barnwood</option>
    					<option value="2">2" Rustic Barnwood</option>
    					<option value="3">3" Thick Barnwood</option>
    				</select>
    				<label>Total:&nbsp;&nbsp;&nbsp;<input type='text' name='total' size='5' readonly></label>
    
    				<input type='submit' name='submit' value="Submit" class='submitBtn'>
    		   </fieldset>
    		</form>
    	</body>
    </html>

  • #3
    Registered User
    Join Date
    Jan 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wow thanks, but how would I add a conditional

    Wow! Thanks, but how would I had a conditional equation to it. Like you created the frame so it would multiply the square area by the thickness which depended on the users selection. I need it to multiply the answer by either 0.27 if its a 1.5" thick frame, 0.23 if its a 2" frame and 0.18 if its a 3" frame. Because without it a simple 3" by 3" frame would be $23, which is way to expensive so we multiply by the numbers above to put into the price range.

  • #4
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    jazco:

    I have a name, please address me by it. It is very difficult to understand you.

    The square area is length * width. Wow! is meaningless. Try "thank you" and "please." There's nothing "conditional" about courtesy.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	function calc(nForm){
    
    		if (nForm['length'].value == "" || nForm['width'].value == "" || nForm['frame'].value == "")
    			{
    			 return;
    			}
    		var price = (Number(nForm['length'].value) * Number(nForm['width'].value)) * Number(nForm['frame'].value) + Number(5);
    		nForm['total'].value = price.toFixed(2);
    	}
    	
    </script>
    <style type="text/css">
    
    	 body {background-color:#eae3c6;margin-top:60px}
    	 form {width:280px;margin:auto}
    	 fieldset {width:260px;background-color:#f0fff0;border:1px solid #87ceeb}
    	 legend {font-family:georgia;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
    	 label {font-family:times;font-size:12pt;color:#00008b;padding:5px;display:block;margin-left:20px}
    	 input {font-family:times;font-size:10pt;margin-left:35px;text-align:right}
    	 select {font-family:times;font-size:10pt;margin-left:25px}
    	.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px;text-align:center}
    	
    </style>
    </head>
    	<body>
    		<form method="post" action="">
    		   <fieldset>
    			<legend>Frame Price Calculator</legend>
    				<label>Length: <input type='text' name='length' size='5' onblur="calc(this.form)"></label>
    				<label>Width:&nbsp;&nbsp;<input type='text' name='width' size='5' onblur="calc(this.form)"></label>
    				<select name="frame" onchange="calc(this.form)">
    					<option value="" selected>Select a Frame</option>
    					<option value=".27">1.5" Narrow Barnwood</option>
    					<option value=".23">2" Rustic Barnwood</option>
    					<option value=".18">3" Thick Barnwood</option>
    				</select>
    				<label>Total:&nbsp;&nbsp;&nbsp;<input type='text' name='total' size='5' readonly></label>
    
    				<input type='submit' name='submit' value="Submit" class='submitBtn'>
    		   </fieldset>
    		</form>
    	</body>
    </html>
    Last edited by Ancora; 01-04-2007 at 06:12 PM.

  • #5
    Registered User
    Join Date
    Jan 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank you

    Thank Ancora for your help, I really appreciate it.

  • #6
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    You're welcome, jazco.

    I appreciate your courtesy. Good luck with your project.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •