Menu
Okay, so I’ve got to get a pizza order form working for my schooling (validation anyways, not formulas/functions). I’ve set up the basic form, go the buttons and everything working but I’m not sure how to proceed now. What I want to happen, is every time the user selects something different on the form, it automatically updates the subtotals, gst, pst, and total at the bottom of the form. I believe I know how to get it to do one at a time (They select a pizza size and it returns the pizza value to the subtotal, and so on), but ideally, it should continue to add together. So, if I select a size, say a Small Pizza, 4.00 appears in the subtotal box, 0.28 appears in the GST and PST boxes, and 4.58 appears in the total. Then, when I click to add a topping (at 0.50), it automatically updates the 4 amounts.
Here’s my code:
[code=php]//HTML
<form method=”post” name=”pizzaOrderForm” action=”http://programs.siast.sk.ca/newmedia/onlinescripts/pizzaorder_olympic.php” target=”_blank” onsubmit=”return validateForm();”>
<h3>Please enter your contact information:</h3>
<p><label for=”FirstName_tf”>First Name: </label><input name=”FirstName_tf” id=”FirstName_tf” type=”text”></p>
<p><label for=”LastName_tf”>Last Name: </label><input name=”LastName_tf” id=”LastName_tf” type=”text”></p>
<p><label for=”Address_tf”>Address: </label><input name=”Address_tf” id=”Address_tf” type=”text”></p>
<p><label for=”Phone_tf”>Phone: </label><input name=”Phone_tf” id=”Phone_tf” type=”text”></p>
<p><label for=”Email_tf”>Email: </label><input name=”Email_tf” id=”Email_tf” type=”text”></p>
<h3>What size of pizza would you like to order?</h3>
<p><label onchange=”pizzaSize(this)”><input type=”radio” name=”Size_rg” value=”10″ id=”10″ />Small 10 ($4.00)</label></p>
<p><label><input type=”radio” name=”Size_rg” value=”12″ id=”12″ />Medium 12 ($5.00)</label></p>
<p><label><input type=”radio” name=”Size_rg” value=”15″ id=”15″ />Large 15 ($7.00)</label></p>
<h3>What toppings would you like?</h3>
<div id=”checkboxes”>
<p><input name=”Anchovies_cb” type=”checkbox” value=”yes” /><label for=”Anchovies_cb”>Anchovies</label></p>
<p><input name=”DoubleCheese_cb” type=”checkbox” value=”yes” /><label for=”DoubleCheese_cb”>Double Cheese</label></p>
<p><input name=”Pepperoni_cb” type=”checkbox” value=”yes” /><label for=”Pepperoni_cb”>Pepperoni</label></p>
<p><input name=”Mushroom_cb” type=”checkbox” value=”yes” /><label for=”Mushroom_cb”>Mushrooms</label></p>
</div>
<h3>Please select a payment method from the selection box.</h3>
<select id=”Payment_menu” size=”4″>
<option value=”select”>- Select Payment Method -</option>
<option value=”cash”>Cash</option>
<option value=”debit”>Debit</option>
<option value=”credit”>Credit</option>
</select>
<h3>Your order cost information:</h3>
<p><label for=”SubTotal_tb”>Subtotal: </label>
<input type=”text” name=”SubTotal_tb” id=”SubTotal_tb” value=”” readOnly=true />
<p><label for=”PST_tb”>PST: </label>
<input type=”text” name=”PST_tb” id=”PST_tb” value=”” readOnly=true />
<p><label for=”GST_tb”>GST: </label>
<input type=”text” name=”GST_tb” id=”GST_tb” value=”” readOnly=true />
<p><label for=”Total_tb”>TOTAL: </label>
<input type=”text” name=”Total_tb” id=”Total_tb” value=”” readOnly=true />
<p><input type=”submit” name=”Submit_but”></p>
</form>
//Javascript
function pizzaSize(data) {
document.getElementById (“10”).value = data.value;
}
//I only have this little bit for a function, but I figured right away it wasn’t really going to get me my desired result. I haven’t started building any other functions yet as I’m not sure how to proceed. I do have an extensive validation function set up, but I don’t think it’s necessary to paste in at this point.
Even hints or anything really that can push me in the right direction would be a lot of help! Thanks!