...

View Full Version : Panic.com-style order page using SELECT



dustydavis
01-26-2006, 09:13 PM
Hello,

I'm working on an order page (http://www.dustydavis.com/order.html), and trying to accomplish these goals:

1. Have text (price) change when a quantity is selected from a drop-down select box.

2. Add a fixed percentage (tax) if a checkbox is selected.

3. Display the total (price + tax) in two locations.

I like the instant updating and summing on the order page used by Panic: https://www.panic.com/unison/buy.html and the Apple Store: example (http://store.apple.com/1-800-MY-APPLE/WebObjects/AppleStore.woa/7200103/wo/Bz3I4Ru7pfS32jDVGH1uTkiAURv/2.?p=0), but both of those pages use radio buttons. I need to change the price based on a select menu.

Any help would be greatly appreciated. I'll update the test page using any suggestions that I get. Thanks!

vwphillips
01-26-2006, 09:25 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function Cal(selid,cbid,tbid){
var val=1;
if (document.getElementById(cbid).checked){
val=document.getElementById(cbid).value;
}
document.getElementById(tbid).value=document.getElementById(selid).value*val;
}
//-->
</script></head>

<body>
<select id="joe" onchange="Cal('joe','fred','tom');" >
<option value="10" >10 ddddddddd</option>
<option value="20" >20 ddddddddd</option>
<option value="30" >30 ddddddddd</option>
<option value="40" >40 ddddddddd</option>
</select>
<input id="fred" type="checkbox" value="1.1" onclick="Cal('joe','fred','tom');">
<input id="tom" type="text" >
</body>

</html>

dustydavis
01-26-2006, 09:57 PM
That works well, and I've updated the page to reflect the changes. A few questions:

1. Is there a way to show a subtotal and tax amount in addition to the total?

2. Is there a way to round decimals to two decimal places? For example 3000 + tax would be 268.13 instead of 268.125.

3. Is there a way to display numbers using standard paragraph tags instead of a text input box?

Thank you!

vwphillips
01-26-2006, 10:46 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function Cal(selid,cbid,tbid){
var val=1;
if (document.getElementById(cbid).checked){
val=document.getElementById(cbid).value;
}
document.getElementById(tbid).firstChild.data=(document.getElementById(selid).value*val).toFixed(2);
document.getElementById(tbid+1).firstChild.data=document.getElementById(selid).value;
document.getElementById(tbid+2).firstChild.data=(document.getElementById(selid).value*val)-document.getElementById(selid).value;
}
//-->
</script></head>

<body>

1. Is there a way to show a subtotal and tax amount in addition to the total?

2. Is there a way to round decimals to two decimal places? For example 3000 + tax would be 268.13 instead of 268.125.

3. Is there a way to display numbers using standard paragraph tags instead of a text input box?
<select id="joe" onchange="Cal('joe','fred','tom');" >
<option value="10" >10 ddddddddd</option>
<option value="20" >20 ddddddddd</option>
<option value="30" >30 ddddddddd</option>
<option value="40" >40 ddddddddd</option>
</select>
<input id="fred" type="checkbox" value="1.1" onclick="Cal('joe','fred','tom');"><br>
subtotal <span id="tom1" >&nbsp;</span><br>
tax amount <span id="tom2" >&nbsp;</span><br>
total <span id="tom" >&nbsp;</span><br>
</body>

</html>

dustydavis
01-26-2006, 11:42 PM
Thank you so much!

I've uploaded the modified form. Two more questions:

1. Can the tax also be limited to two decimal places?

2. Can the total be repeated at the bottom? Right now it's an ID, and I know there can only be one instance of an ID.

Thanks again for your help, vwphillips!

EDIT: I figured out the tax decimal place problem. I still need help with repeating the total.
EDIT2: I figured out the repeating total problem, too. I'm all set. Thanks!!!

Here's the modified javascript:


<script language="JavaScript" type="text/javascript">
<!--

function Cal(selid,cbid,tbid){
var val=1;
if (document.getElementById(cbid).checked){
val=document.getElementById(cbid).value;
}
document.getElementById(tbid).firstChild.data=(document.getElementById(selid).value*val).toFixed(2);
document.getElementById(tbid+1).firstChild.data=document.getElementById(selid).value;
document.getElementById(tbid+2).firstChild.data=((document.getElementById(selid).value*val)-document.getElementById(selid).value).toFixed(2);
document.getElementById(tbid+3).firstChild.data=(document.getElementById(selid).value*val).toFixed(2 );
}
//-->
</script>

dustydavis
01-27-2006, 02:19 AM
Actually, I do have one more question:

I'm using a radio button for the tax, but both "yes" and "no" are sharing the same ID (with a different value). That's an obvious error and probably a simple fix, but I can't figure it out. Is there a way to structure the javascript so that I don't need to repeat the ID?


<script language="JavaScript" type="text/javascript">
<!--

function Cal(selid,cbid,tbid){
var val=1;
if (document.getElementById(cbid).checked){
val=document.getElementById(cbid).value;
}
document.getElementById(tbid).firstChild.data=(document.getElementById(selid).value*val).toFixed(2);
document.getElementById(tbid+1).firstChild.data=document.getElementById(selid).value;
document.getElementById(tbid+2).firstChild.data=((document.getElementById(selid).value*val)-document.getElementById(selid).value).toFixed(2);
document.getElementById(tbid+3).firstChild.data=(document.getElementById(selid).value*val).toFixed(2 );
}
//-->
</script>


<input id="tax" name="ca" type="radio" value="1.0725" onclick="Cal('quantity','tax','total');" checked="checked" />Yes&nbsp;&nbsp;<input id="tax" name="ca" type="radio" value="1" onclick="Cal('quantity','tax','total');" />No

Here's the sample page again: http://www.dustydavis.com/order.html

vwphillips
01-28-2006, 10:32 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function Cal(selid,cbid,tbid){
var val=1;
if (document.getElementById(cbid).checked){
val=document.getElementById(cbid).value;
}
document.getElementById(tbid).firstChild.data=(document.getElementById(selid).value*val).toFixed(2);
document.getElementById(tbid+1).firstChild.data=document.getElementById(selid).value;
document.getElementById(tbid+2).firstChild.data=(document.getElementById(selid).value*val)-document.getElementById(selid).value;
}
//-->
</script></head>

<body>

<br><br>

<select id="joe" onchange="Cal('joe','fred','tom');" >
<option value="10" >10 ddddddddd</option>
<option value="20" >20 ddddddddd</option>
<option value="30" >30 ddddddddd</option>
<option value="40" >40 ddddddddd</option>
</select>
<input id="fred" name="R1" type="radio" value="1.1" onclick="Cal('joe','fred','tom');">
<input name="R1" type="radio" value="0" onclick="Cal('joe','fred','tom');"><br>
subtotal <span id="tom1" >&nbsp;</span><br>
tax amount <span id="tom2" >&nbsp;</span><br>
total <span id="tom" >&nbsp;</span><br>


</body>

</html>

dustydavis
01-28-2006, 06:20 PM
I knew it had to be a simple fix. I've updated the order page.

I can't thank you enough, vwphillips!

dustydavis
02-04-2006, 06:46 AM
I'm deploying the site, and the javascript works great in every browser except IE 5 for Mac. It's breaking at some point and displaying blank spans instead of the calculated price, like this:

http://dustydavis.com/order-IE5-Mac.gif

Is there a known problem with the way this browser handles javascript?

Any known tips for making the javascript work in this browser?

Thanks!

vwphillips
02-04-2006, 10:47 AM
I cant test with Mac

but can you try it using inputs


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function Cal(selid,cbid,tbid){
var val=1;
if (document.getElementById(cbid).checked){
val=document.getElementById(cbid).value;
}
var subtotal=document.getElementById(selid).value
document.getElementById(tbid).value='$'+(subtotal*val).toFixed(2);
document.getElementById(tbid+1).value='$'+subtotal;
document.getElementById(tbid+2).value='$'+(subtotal*val-subtotal*1);
}
//-->
</script></head>

<body>

<br><br>

<select id="joe" onchange="Cal('joe','fred','tom');" >
<option value="10" >10 ddddddddd</option>
<option value="20" >20 ddddddddd</option>
<option value="30" >30 ddddddddd</option>
<option value="40" >40 ddddddddd</option>
</select>
<input id="fred" name="R1" type="radio" value="1.1" onclick="Cal('joe','fred','tom');">
<input name="R1" type="radio" value="0" onclick="Cal('joe','fred','tom');"><br>
subtotal <input id="tom1" style="border:0px;font-size:15px;" ><br>
tax amount <input id="tom2" style="border:0px;font-size:15px;" ><br>
total <input id="tom" style="border:0px;font-size:18px;" ><br>


</body>

</html>

dustydavis
02-04-2006, 08:17 PM
Unfortunately, changing the spans to inputs makes no difference.

I'm not overly concerned - it's a rarely-used browser, but I'm just hoping someone knows a quick fix.

Thanks!

dustydavis
03-22-2006, 11:41 AM
I need a simplified version of this script, and I'm hoping vwphillips or someone else can help. I just need quantity and subtotal - removing tax and the grand total.

Quantity - customer selects the quantity they want from a drop-down list
Subtotal - this number goes into a span

Thank you!

vwphillips
03-22-2006, 10:14 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function Cal(selid,cbid,tbid){
var subtotal=document.getElementById(selid).value
document.getElementById(tbid+1).value='$'+subtotal;
document.getElementById(tbid).value=subtotal;
}
//-->
</script></head>

<body>

<br><br>

<select id="joe" onchange="Cal('joe','fred','tom');" >
<option value="10" >10 ddddddddd</option>
<option value="20" >20 ddddddddd</option>
<option value="30" >30 ddddddddd</option>
<option value="40" >40 ddddddddd</option>
</select>
<br>
quantity <input id="tom" style="border:0px;font-size:15px;" size="3" >
subtotal <input id="tom1" style="border:0px;font-size:15px;" ><br>


</body>

</html>

dustydavis
03-22-2006, 10:50 PM
Wonderful! I can't thank you enough.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum