View RSS Feed

bernie1227

Order Form w/current options live total

Rate this Entry
Okey doke,
there haven't been any blogs in a while, so I thought I might have some. It's about a thread I was on (here) in which Williamsun wanted a form which autosummed a price. I ended up coming up with something along these lines.
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>
The idea of this code, is first to set up two associative arrays:
Code:
//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;
and setting a price to each of the array items, so that when they are called via their values:
Code:
<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>
a price is set.

Another interesting part of this script, is the 'epic cloth' part. The idea here, is that Williamsun wanted a part of a script, in which the user could select some special cloth, of which the price would change depending on how long the board is. I ended up doing this by adding it into the function which calculates the price of the length of the board, using a switch/case:
Code:
 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;
So basically if the epic cloth is selected, the switch/case checks which length is selected, and depending on the selected length, the cloth price changes, the cloth price is then added to the size price.

The final and most important part of the script is adding it all up. I've done this by adding all of the functions to calculate the prices together and then ouputting them to the script.

bernie

Submit "Order Form w/current options live total" to del.icio.us Submit "Order Form w/current options live total" to StumbleUpon Submit "Order Form w/current options live total" to Google Submit "Order Form w/current options live total" to Digg

Tags: None Add / Edit Tags
Categories
Uncategorized

Comments

  1. Nile's Avatar
    I would try to redo the whole thing using better practice code... Run it all through JSLint. Also check out this great video:

    http://www.youtube.com/watch?v=hQVTI...ure=plpp_video
  2. bernie1227's Avatar
    wow, that's a long video, could you summarise? As I really don't have an hour of time
  3. Nile's Avatar
    No, I can't. I'm sure you have an hour in there somewhere. Honestly, I don't understand why you wouldn't. You're giving up 1 hour to make yourself a better programmer for a lifetime. I suggest all of the following videos in the link below. Yes, it will take over 4 hours... but how much TV do you watch that does nothing for you?

    http://chat.stackoverflow.com/rooms/...ascript-videos
  4. keyboard's Avatar
    I hate programming videos... I can never C&P all the code...
  5. bernie1227's Avatar
    Quote Originally Posted by Nile
    No, I can't. I'm sure you have an hour in there somewhere. Honestly, I don't understand why you wouldn't. You're giving up 1 hour to make yourself a better programmer for a lifetime. I suggest all of the following videos in the link below. Yes, it will take over 4 hours... but how much TV do you watch that does nothing for you?

    http://chat.stackoverflow.com/rooms/...ascript-videos
    I literally do not have time for either tv or 4 hours of video's nile, I am much too busy right now, I may watch them later.