Java Script
Jump to navigation
Jump to search
Working With Forms
Get element by id
document.getElementById('idname').value
Select Boxes
document.getElementById('idname').value
Radio Buttons
Loop throught buttons and see which one is checked
------------------------------------------
var methods = document.getElementById('form_name').nameProperty
for(var i=0;i<methods.length; i++){ if(methods[i].checked==true)
alert(methods[i].value)
}
------------------------------------------------
Check Boxes - the check property return boolean
document.getElementById('idname').checked
Add event listner to submit
-------------------------------------------
************************HTML ********
<form class="cart" id="cart-oil">
<div class="item">
<h2>Extra Virgin, Cold-Pressed</h2>
<p>You've never tasted olive oil this delicious.</p>
<div class="info">
<span>Price: $10/bottle</span>
</div>
<div class="order">
<label for="txt-q-extra">Quantity desired:</label>
<input type="text" id="txt-q-extra" size="3" placeholder="0">
</div>
</div>
<div class="item">
<h2>Cold-Pressed</h2>
<p>Ideal for cooking.</p>
<div class="info">
<span>Price: $8/bottle</span>
</div>
<div class="order">
<label for="txt-q-cold">Quantity desired:</label>
<input type="text" id="txt-q-cold" size="3" placeholder="0">
</div>
</div>
<div class="item">
<h2>Garlic-infused</h2>
<p>If you love garlic, this is the one for you.</p>
<div class="info">
<span>Price: $10/bottle</span>
</div>
<div class="order">
<label for="txt-q-garlic">Quantity desired:</label>
<input type="text" id="txt-q-garlic" size="3" placeholder="0">
</div>
</div>
<div class="item">
<h2>Lemon-infused</h2>
<p>If you love Lemon, this is the one for you.</p>
<div class="info">
<span>Price: $12/bottle</span>
</div>
<div class="order">
<label for="txt-q-lemon">Quantity desired:</label>
<input type="text" id="txt-q-lemon" size="3" placeholder="0">
</div>
</div>
<div id="summary">
<h2>Estimate Order</h2>
<div class="group state">
<label for="s-state">State:</label>
<select id="s-state">
<option value="">- select -</option>
<option value="CA">California (7.5% tax)</option>
<option value="IL">Illinois</option>
<option value="NH">New Hampshire</option>
<option value="PA">Pennsylvania</option>
<option value="WA">Washington</option>
</select>
</div>
<div class="group method">
<label for="r-method-pickup">Shipping Method:</label><br>
<input type="radio" value="pickup" name="r_method" id="r-method-pickup" checked> <label for="r-method-pickup">Pickup (free)</label><br>
<input type="radio" value="usps" name="r_method" id="r-method-usps"> <label for="r-method-usps">US Mail ($2/bottle)</label><br>
<input type="radio" value="ups" name="r_method" id="r-method-ups"> <label for="r-method-ups">UPS ($3/bottle)</label>
</div>
<div class="group special">
<label for="c-special-gift">Special:</label><br>
<input type="checkbox" value="YES" id="c-special-gift"> <label for="c-special-gift">This is a gift</label><br>
<input type="checkbox" value="YES" id="c-special-gold"> <label for="c-special-gold">Use gold-flecked bottles</label><br>
<input type="checkbox" value="YES" id="c-special-cork"> <label for="c-special-cork">Use plastic caps instead of cork</label>
</div>
<div class="group calc">
<p>
<label for="btn-estimate">Click to estimate:</label>
<input type="submit" value="Estimate Total" id="btn-estimate">
<input type="text" id="txt-estimate" placeholder="$0.00">
</p>
<div id="results"></div>
</div>
</div>
</form>
**************************************
// this listens for the submit button then run the estimate function
document.getElementById('cart-oil').addEventListener('submit', estimateTotal);
function estimateTotal(event){
event.preventDefault();
if (document.getElementById('s-state').value=='') {
alert("please choose");
document.getElementById('s-state').focus();
} //end if
var btlCold = parseInt(document.getElementById('txt-q-cold').value) || 0;
var btlExtra = parseInt(document.getElementById('txt-q-extra').value) || 0;
var btlGarlic = parseInt(document.getElementById('txt-q-garlic').value) || 0;
var btlLemon = parseInt(document.getElementById('txt-q-lemon').value) || 0;
var state = document.getElementById('s-state').value;
var methods = document.getElementById('cart-oil').r_method;
var shippingMethod = document.getElementById('r_method');
for (var i = 0; i < methods.length; i++) {
if (methods[i].checked==true) {
shippingMethod = methods[i].value;
} // end if
} // end for
var taxFactor = 1;
if (state=='CA') {
taxFactor = 1.075;
}else if(state=='WA'){
taxFactor =1.065;
}else{
taxFactor = 1;
}
//calculate shipping values from a drop down list
var shippingCostPer = 0;
switch(shippingMethod){
case 'pickup':
shippingCostPer = 0;
break;
case 'usps':
shippingCostPer = 2;
break;
case 'ups':
shippingCostPer = 3;
break;
default:
shippingCostPer = 0;
break;
}
var totalBottles = btlExtra + btlCold + btlGarlic + btlLemon;
var shippingCost = totalBottles * shippingCostPer;
var subTotal = ((btlExtra * 10) + (btlCold * 8) + (btlGarlic * 10) + (btlLemon * 12)) * taxFactor;
var estimate = "$"+(subTotal + shippingCost).toFixed(2);
document.getElementById('txt-estimate').value = estimate;
// results is a empty div with id='results'
document.getElementById('results').innerHTML = 'Total Bottles: ' + totalBottles + '<br>';
document.getElementById('results').innerHTML += 'Total Shipping: $' +shippingCost.toFixed(2)+'<br>';
document.getElementById('results').innerHTML += 'Tax: $'+ ((taxFactor - 1)*100 ).toFixed(2)+ '%';