Order Form w/current options live total

**bernie1227** · 08-02-2012, 03:04 AM

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

**williamsun** · 08-02-2012, 03:06 AM

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.

**bernie1227** · 08-02-2012, 03:33 AM

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.

**bernie1227** · 08-02-2012, 08:52 AM

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>

**williamsun** · 08-02-2012, 03:51 PM

Thank you again! You da man!

**williamsun** · 08-03-2012, 12:01 AM

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;

**bernie1227** · 08-03-2012, 01:01 AM

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;

**williamsun** · 08-03-2012, 01:15 AM

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

Thanks

**bernie1227** · 08-03-2012, 03:13 AM

Eh, maybe, the only problem as such, would be you should go - 25 rather than - 025.00

**williamsun** · 08-03-2012, 03:24 AM

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

Thanks

Thread: Order Form w/current options live total

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions