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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Panic.com-style order page using SELECT

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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!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>

  • #3
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!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>

  • #5
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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>
    Last edited by dustydavis; 01-27-2006 at 01:19 AM.

  • #6
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

    Code:
    <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
    Last edited by dustydavis; 01-27-2006 at 01:21 AM.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!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>

  • #8
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I knew it had to be a simple fix. I've updated the order page.

    I can't thank you enough, vwphillips!

  • #9
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems in IE 5 Mac

    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:



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

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

    Thanks!

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    I cant test with Mac

    but can you try it using inputs

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

  • #11
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #12
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #14
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wonderful! I can't thank you enough.


  •  

    Posting Permissions

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