Page 3 of 4 FirstFirst 1234 LastLast
Results 21 to 30 of 31

Thread: Order Form w/current options live total

  1. #21
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Erm, if I'm right, this might be something like what you want (modified original script):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <title>Surfboard Form</title>
        <script type="text/javascript">
    
     
     //Set up an associative array
     var surf_prices = new Array();
     surf_prices["good"]=100;
     surf_prices["pretty"]=200;
     surf_prices["very"]=300;
     surf_prices["epic"]=1000;
      
     //Set up an associative array 
     //We use this this array when the user selects a size from the form
     var size_prices= new Array();
     size_prices["None"]=0;
     size_prices["5 ft"]=100;
     size_prices["6 ft"]=150;
     size_prices["7 ft"]=200;
     size_prices["8 ft"]=250;
     size_prices["9 ft"]=300;
      
          
          
    // getsurfboardPrice() finds the price based on the size of the Surfboard.
    function getsurfboardPrice()
    {  
        var surfboardPrice=0;
        //Get a reference to the form id="Surfboardform"
        var theForm = document.forms["surfboardForm"];
        //Get a reference to the Surfboard the user Chooses name=selectedsurf":
        var selectedsurf = theForm.elements["selectedsurf"];
        //Here since there are 4 radio buttons selectedsurf.length = 4
        //We loop through each radio buttons
        for(var i = 0; i < selectedsurf.length; i++)
        {
            //if the radio button is checked
            if(selectedsurf[i].checked)
            {
                //set surfboardPrice to value of elected radio button
                // using the surf_prices array
                //We get the selected Items value
                surfboardPrice = surf_prices[selectedsurf[i].value];
                //If we get a match then we break out of this loop
                //No reason to continue if we get a match
                break;
            }
        }
        //return surfboardPrice
        return surfboardPrice;
    }
     
    //This function finds the size price based on the 
    //drop down selection
    function getSurfSize()
    {
        var surfSizePrice=0;
        //Get a reference to the form id="Surfboardform"
        var theForm = document.forms["surfboardForm"];
        //Get a reference to the select id="size"
         var selectedsize = theForm.elements["size"];
          
        //set Surfboardsize Price equal to value user chose
        surfSizePrice = size_prices[selectedsize.value];
     
        // return surfSizePrice
        return surfSizePrice;
    }
     
    //footstrapPrices() finds foot strap price based on a check box selection
    function footstrapPrices()
    {
        var footstrapPrice=0;
        //Get a reference to the form id="Surfboardform"
        var theForm = document.forms["surfboardForm"];
        //Get a reference to the checkbox id="includeFootStrap"
        var includeFootStrap = theForm.elements["includeFootStrap"];
     
        //If they checked the box set footstrapPrice to 5
        if(includeFootStrap.checked==true)
        {
            footstrapPrice=50;
        }
        //return footstrapPrice
        return footstrapPrice;
    }
    
    function clothPrices()
    {
        var clothPrice=0;
        //Get a reference to the form id="Surfboardform"
        var theForm = document.forms["surfboardForm"];
        //Get a reference to the checkbox id="includeCloth"
        var includeCloth = theForm.elements["includeCloth"];
     
        //If they checked the box set cloth to 50
        if(includeCloth.checked==true)
        {
            clothPrice=50;
        }
        //return clothPrice
        return clothPrice;
    }
     
    function insciptionPrice()
    {
        //This local variable will be used to decide whether or not to charge for the inscription
        //If the user checked the box this value will be 20
        //otherwise it will remain at 0
        var inscriptionPrice=0;
        //Get a refernce to the form id="Surfboardform"
        var theForm = document.forms["surfboardForm"];
        //Get a reference to the checkbox id="includeinscription"
        var includeInscription = theForm.elements["includeinscription"];
        //If they checked the box set inscriptionPrice to 20
        if(includeInscription.checked==true){
    inscriptionPrice=20;
    }
     //return inscription price
     return inscriptionPrice;
    }
    
    function calculateTotal()
    {
     //total price by calling functions
    var SurfboardPrice = getsurfboardPrice() + getSurfSize() + footstrapPrices() + insciptionPrice() + [color="red"]clothPrices();[/red]
    
     //display result
     var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
     divobj.innerHTML = "Total Price For the Surfboard $"+SurfboardPrice;
    
    }
    
    function hideTotal()
    {
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
    }
    
    </script>
    </head>
    <body onload='hideTotal()'>
    <div id="wrap">
    <form action="" id="surfboardForm" onsubmit="return false;">
    <div>
    <div class="cont_order">
    <fieldset>
     <legend>Get a Surfboard!</legend>
     <label >Type of Surfboard:</label><br />
    <label class='radiolabel'><input type="radio"  name="selectedsurf" value="good" onclick="calculateTotal()" />good surfboard ($100)</label><br/>
     <label class='radiolabel'><input type="radio"  name="selectedsurf" value="pretty" onclick="calculateTotal()" />pretty good surfboard($200)</label><br/>
    <label class='radiolabel'><input type="radio"  name="selectedsurf" value="very" onclick="calculateTotal()" />very good surfboard($300)</label><br/>
    <label class='radiolabel'><input type="radio"  name="selectedsurf" value="epic" onclick="calculateTotal()" />epic surfboard ($1000)</label><br/>
     <br/>
    <label>size</label>
    
    <select id="size" name='size' onchange="calculateTotal()">
     <option value="None">Select size</option>
    <option value="5 ft">5 ft($100)</option>
    <option value="6 ft">6 ft($150)</option>
    <option value="7 ft">7 ft($200)</option>
     <option value="8 ft">8 ft($250)</option>
     <option value="9 ft">9 ft($300)</option>
    </select>
    <br/>
     <p>
    <label for='includeFootStrap' class="inlinelabel">Include epic Footstrap($50)</label>
    <input type="checkbox" id="includeFootStrap" name='includeFootStrap' onclick="calculateTotal()" />
    </p>
    <br/>
     <p>
    <label for='includeCloth' class="inlinelabel">Include cool cloth($50)</label>
    <input type="checkbox" id="includeCloth" name='includeCloth' onclick="calculateTotal()" />
    </p>
     <p>
    <label class="inlinelabel" for='includeinscription'>Include Inscription($20)</label>
    <input type="checkbox" id="includeinscription" name="includeinscription" onclick="calculateTotal()" />
     <input type="text"  id="theinscription" name="theinscription" value="Enter Inscription"  />
     </p>
    <div id="totalPrice"></div>
    
    </fieldset>
     </div>
    
    <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
    </div> 
          </form>
    </div><!--End of wrap-->
    
    </body>
    </html>
    Changes are in red
    Last edited by bernie1227; 08-02-2012 at 04:28 AM.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  2. #22
    Join Date
    Jul 2012
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Ok, but what I'm drawing a blank on, is if the price value is defined in the first two arrays for board feet and inches, how would I reuse the feet and inches but change the price value to the cloth feet and inches price without doing two new arrays with the cloth prices.

    For instance, with the values I used for my post, a 6'1" board would have a base price 404.17, so how could I reuse the 6'1" length selected for that but use the cloth value of 042.08 (for 6'1", different for other lengths) to be added along with the others if the special cloth radio button is selected.

    Did that make sense?

    EDIT:
    You posted while I was typing mine but I think my question is still valid considering the cloth value is not a specific amount, but depending the feet and inches already selected.

  3. #23
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    What you could do, is set something up within the GetsurfSize function where, if the button is checked, it adds the price of the cloth depending on which size was selected.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  4. #24
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Okey doke, I've fixed you up a version 3.0, in which, when the cloth checkbox is checked, the default price is 50$, which changes when you change the size of the surfboard. I've done this using a switch statement:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>Surfboard Form</title>
    <script type="text/javascript">
    
    
    //Set up an associative array
    var surf_prices = new Array();
    surf_prices["good"]=100;
    surf_prices["pretty"]=200;
    surf_prices["very"]=300;
    surf_prices["epic"]=1000;
    
    //Set up an associative array 
    //We use this this array when the user selects a size from the form
    var size_prices= new Array();
    size_prices["None"]=0;
    size_prices["5 ft"]=100;
    size_prices["6 ft"]=150;
    size_prices["7 ft"]=200;
    size_prices["8 ft"]=250;
     size_prices["9 ft"]=300;
      
          
          
    // getsurfboardPrice() finds the price based on the size of the Surfboard.
    function getsurfboardPrice()
    {  
        var surfboardPrice=0;
        //Get a reference to the form id="Surfboardform"
        var theForm = document.forms["surfboardForm"];
        //Get a reference to the Surfboard the user Chooses name=selectedsurf":
        var selectedsurf = theForm.elements["selectedsurf"];
        //Here since there are 4 radio buttons selectedsurf.length = 4
        //We loop through each radio buttons
        for(var i = 0; i < selectedsurf.length; i++)
        {
            //if the radio button is checked
            if(selectedsurf[i].checked)
            {
                //set surfboardPrice to value of elected radio button
                // using the surf_prices array
                //We get the selected Items value
                surfboardPrice = surf_prices[selectedsurf[i].value];
                //If we get a match then we break out of this loop
                //No reason to continue if we get a match
                break;
            }
        }
        //return surfboardPrice
        return surfboardPrice;
    }
     
    //This function finds the size price based on the 
    //drop down selection
    function getSurfSize()
    {
        var surfSizePrice=0;
        //Get a reference to the form id="Surfboardform"
        var theForm = document.forms["surfboardForm"];
        //Get a reference to the select id="size"
         var selectedsize = theForm.elements["size"];
          
        //set Surfboardsize Price equal to value user chose
        surfSizePrice = size_prices[selectedsize.value];
            var clothPrice=0;
        //Get a reference to the form id="Surfboardform"
        var theForm = document.forms["surfboardForm"];
        //Get a reference to the checkbox id="includeCloth"
        var includeCloth = theForm.elements["includeCloth"];
     
        //If they checked the box set cloth to 50
        if(includeCloth.checked==true)
        {
    switch(surfSizePrice){
        case size_prices["5 ft"]:
            clothPrice = 50
    break;
        case size_prices["6 ft"]:
            clothPrice = 100
    break;
        case size_prices["7 ft"]:
            clothPrice = 150
    break;
        case size_prices["8 ft"]:
            clothPrice = 200
    break;
        case size_prices["9 ft"]:
            clothPrice = 250
    break;
        default:
            clothPrice = 50
    break;
    }
        }
        //return clothPrice
        return clothPrice;
        
         surfSizePrice += clothPrice;
    
        // return surfSizePrice
        return surfSizePrice;
    }
     
    //footstrapPrices() finds foot strap price based on a check box selection
    function footstrapPrices()
    {
        var footstrapPrice=0;
        //Get a reference to the form id="Surfboardform"
        var theForm = document.forms["surfboardForm"];
        //Get a reference to the checkbox id="includeFootStrap"
        var includeFootStrap = theForm.elements["includeFootStrap"];
     
        //If they checked the box set footstrapPrice to 5
        if(includeFootStrap.checked==true)
        {
    footstrapPrice = 50;
    }
        //return footstrapPrice
        return footstrapPrice;
    }
    
     
    function insciptionPrice()
    {
        //This local variable will be used to decide whether or not to charge for the inscription
        //If the user checked the box this value will be 20
        //otherwise it will remain at 0
        var inscriptionPrice=0;
        //Get a refernce to the form id="Surfboardform"
        var theForm = document.forms["surfboardForm"];
        //Get a reference to the checkbox id="includeinscription"
        var includeInscription = theForm.elements["includeinscription"];
        //If they checked the box set inscriptionPrice to 20
        if(includeInscription.checked==true){
    inscriptionPrice=20;
    }
     //return inscription price
     return inscriptionPrice;
    }
    
    function calculateTotal()
    {
     //total price by calling functions
    var SurfboardPrice = getsurfboardPrice() + getSurfSize() + footstrapPrices() + insciptionPrice();
    
     //display result
     var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
     divobj.innerHTML = "Total Price For the Surfboard $"+SurfboardPrice;
    
    }
    
    function hideTotal()
    {
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
    }
    
    </script>
    </head>
    <body onload='hideTotal()'>
    <div id="wrap">
    <form action="" id="surfboardForm" onsubmit="return false;">
    <div>
    <div class="cont_order">
    <fieldset>
     <legend>Get a Surfboard!</legend>
     <label >Type of Surfboard:</label><br />
    <label class='radiolabel'><input type="radio"  name="selectedsurf" value="good" onclick="calculateTotal()" />good surfboard ($100)</label><br/>
     <label class='radiolabel'><input type="radio"  name="selectedsurf" value="pretty" onclick="calculateTotal()" />pretty good surfboard($200)</label><br/>
    <label class='radiolabel'><input type="radio"  name="selectedsurf" value="very" onclick="calculateTotal()" />very good surfboard($300)</label><br/>
    <label class='radiolabel'><input type="radio"  name="selectedsurf" value="epic" onclick="calculateTotal()" />epic surfboard ($1000)</label><br/>
     <br/>
    <label>size</label>
    
    <select id="size" name='size' onchange="calculateTotal()">
     <option value="None">Select size</option>
    <option value="5 ft">5 ft($100)</option>
    <option value="6 ft">6 ft($150)</option>
    <option value="7 ft">7 ft($200)</option>
     <option value="8 ft">8 ft($250)</option>
     <option value="9 ft">9 ft($300)</option>
    </select>
    <br/>
     <p>
    <label for='includeFootStrap' class="inlinelabel">Include epic Footstrap($50)</label>
    <input type="checkbox" id="includeFootStrap" name='includeFootStrap' onclick="calculateTotal()" />
    </p>
    <br/>
     <p>
    <label for='includeCloth' class="inlinelabel">Include cool cloth($50)</label>
    <input type="checkbox" id="includeCloth" name='includeCloth' onclick="calculateTotal()" />
    </p>
     <p>
    <label class="inlinelabel" for='includeinscription'>Include Inscription($20)</label>
    <input type="checkbox" id="includeinscription" name="includeinscription" onclick="calculateTotal()" />
     <input type="text"  id="theinscription" name="theinscription" value="Enter Inscription"  />
     </p>
    <div id="totalPrice"></div>
    
    </fieldset>
     </div>
    
    <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
    </div> 
          </form>
    </div><!--End of wrap-->
    
    </body>
    </html>
    Last edited by bernie1227; 08-02-2012 at 10:13 AM.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  5. The Following User Says Thank You to bernie1227 For This Useful Post:

    williamsun (08-02-2012)

  6. #25
    Join Date
    Jul 2012
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thank you again! You da man!

  7. #26
    Join Date
    Jul 2012
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Just a quick question for later down the road.

    If I wanted to subtract $25 from the total for a sale or something, would this be correct...

    var SurfboardPrice = getsurfboardPrice() + getSurfSize() + footstrapPrices() + insciptionPrice() - 025.00;

  8. #27
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Personally, I'd set up a variable for later use in the long run, ie
    Code:
    var saleDiscount = 25;
    var SurfboardPrice = getsurfboardPrice() + getSurfSize() + footstrapPrices() + insciptionPrice() - saleDiscount;
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  9. #28
    Join Date
    Jul 2012
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Ok, I'll do it that way. But would what I did work? (Just a self check)

    Thanks

  10. #29
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Eh, maybe, the only problem as such, would be you should go - 25 rather than - 025.00
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  11. #30
    Join Date
    Jul 2012
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Ahh, ok. I was just trying to keep the same digit number for consistency with base prices being in the hundreds.

    Thanks

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
  •