SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Order Page + dynamic update

    Hey everyone! I am very new to javascript so kind of unfamiliar with it.

    I am trying to create a very simple website while our permanent one gets built where a customer can place orders.

    I have seen on fancy websites the ability to enter the quantity of items wanted in a textfield and subtotal of the line item will update as they are entering the quantity in real time.

    Anyone know any good resources for this?

    Thanks,
    Dave
    Operation Delta Tango

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the major problem is getting the unit value to the javascript. Once you have done this it is simple.

    Then you have a choice of when to calculate the subtotal. You can do it when the textbox looses focus (when the user clicks onto another element or uses the tab etc) or when the user is actually typing the value.

    The best is when the textbox looses focus. Then it's simply a validation to make sure it's a numeric value they have typed in and then you multiply your unit value by the numeric value.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    
    <script type="text/javascript">
    
    var unitValue = 5.50;
    var unitType = '&#163;';
    
    function updatePrice(itm) {
        var val = parseInt(itm.value);
        if(val && val != NaN) {
            var st = document.getElementById('subtotal');
            st.innerHTML = unitType + (val * unitValue);
        }
    }
    
    </script>
    
    </HEAD>
    
    <BODY>
    
    <label for="1">Item 1&nbsp;</label><input id="1" onblur="updatePrice(this)" />
    
    <div id="subtotal">&#163;0.00</div>
    
    </BODY>
    </HTML>



Bookmarks

Posting Permissions

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