SitePoint Sponsor

User Tag List

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

    Auto Update Price Based On Form Fields

    Hello Everyone,

    I am more of a front end guy with experience in xhtml/css and want to get my hands dirty with some back-end programming (Javascript/jQuery/AJAX/PHP) and was wondering about a specific task involving (mainly) what I would believe is AJAX.

    I was wondering if there is a way to have a page with a starting price of $299 (lets say a basic vacuum) then below that are 20 or so customizable add-ons to choose from through simple checkboxes. That (to me) should be easy enough, but I would love to have the grand total at the bottom of the page be updated in real time as the user checks or unchecks certain add-ons (kind like how apple.com does it).

    What is a good starting point for this, and would it be possible to send out the order as an email with the total price sent to the business owner.

    Like I said, I can sorta get my way around this stuff, I am just looking for some great resources, or a good starting point. Any help is much appreciated. Thanks!

    -Ryan

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    
    <script type="text/javascript">
    window.onload=function() {
    document.getElementsByTagName('fieldset')[0].onclick = totalizer;
    };
    
    function totalizer(e) {
    var e = e? e : window.event;
    var target = e.srcElement || e.target;
    if(e.type=='click' && target.type=='checkbox') { //clicked a checkbox
        var cost = document.getElementById('cost');
        var extra = parseFloat(target.value);
        cost.firstChild.data = (parseFloat(cost.firstChild.data) + ((target.checked)? extra : -extra)).toFixed(2);
        }
    }
    </script>
    
    <style type="text/css">
    * {margin:0;padding:0;}
    fieldset {width:7em; padding:1em;}
    label {display:block; text-align:right;}
    </style>
    
    </head>
    <body>
    <form action="#" method="" name="form">
    <p>Vacuum cleaner $<span id="cost">100</span></p>
    <fieldset><legend>extras</legend>
    <label>bags $5 <input type="checkbox" name="bags" value="5"></label>
    <label>hose $19.95 <input type="checkbox" name="hose" value="19.95"></label>
    <label>nozzle $10 <input type="checkbox" name="nozzle" value="10"></label>
    </fieldset>
    </form>
    </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
  •