I am working on a javascript form I am having troubles getting the gst, pst and totals to display. I got the subtotal to display but honestly I am not sure how I did it I have changed everything so many times. I would love some input please-- and yes I am really new at this. Thank you to any help anyone can provide.
my html
<form action="http://programs.siast.sk.ca/newmedia/onlinescripts/EchoForm.php" method="post" name="nameForm" target="_blank" id="form1" onsubmit="return validateForm();">
<!-- collect customer information-->
<p><label for="First Name">First Name: </label>
<input type="text" name="FirstName_tf" id="FirstName_tf" ></label></p>
<p><label for="Last Name">Last Name: </label>
<input type="text" name="LastName_tf" id="LastName_tf" ></label></p>
<p><label for="Address">Address: </label>
<input type="text" name="Address_tf" id="Address_tf" o></label></p>
<p><label for="Phone">Phone: </label>
<input type="text" name="Phone_tf" id="Phone_tf" ></label></p>
<p><label for="Email Address">Email Address:</label>
<input type="text input" name="Email_tf" id="Email_tf"></label>
<!-- insert hidden input to specifications -->
<input type="hidden" name="difficulty" value="1"></p>
<!--end of customer inforation box-->
<div id="Pizza_size">
<!-- radios on sizes of pizza-->
<h3>Pizza Size</h3>
<p><label><input type="radio" name="Size_rg" id="size10" value="4.00" onclick="this.form.Subtotal_tb.value=calculateSubtotal(this);"></label>
<label for="Small 10">Small 10" - $4.00</label></p>
<p><label><input type="radio" name="Size_rg" id="size12" value="5.00" onclick="this.form.Subtotal_tb.value=calculateSubtotal(this);"></label>
<label for="Medium 12">Medium 12" - $5.00</label></p>
<p><label><input type="radio" name="Size_rg" id="size15" value="7.00" onclick="this.form.Subtotal_tb.value=calculateSubtotal(this);"></label>
<label for="Large 15">Large 15" - $7.00</label></p>
<!--end of pizza size radios-->
<div id="Toppings">
<h3>Check Extra Toppings</h3>
<p>.50 cents each.</p>
<p><input name="Anchovies_cb" type="checkbox" value=".5"id="toppings" onclick="this.form.Subtotal_tb.value=calculateSubtotal(this);">
<label for="Anchovies">Anchovies</label></p>
<p><input name="DoubleCheese_cb" type="checkbox" value=".5" id="toppings" onclick="this.form.Subtotal_tb.value=calculateSubtotal(this);">
<label for="Double Cheese">Double Cheese</label></p>
<p><input name="Pepperoni_cb" type="checkbox" value=".5" id="toppings" onclick="this.form.Subtotal_tb.value=calculateSubtotal(this);">
<label for="Pepperoni">Pepperoni</label></p>
<p><input name="Mushroom_cb" type="checkbox" value=".5" id="toppings" onclick="this.form.Subtotal_tb.value=calculateSubtotal(this);">
<label for="Mushrooms">Mushrooms</label></p>
</div><!--end of extra_toppings1 box-->
</div>
<div id="total">
<input type="hidden" name="calculatedSubtotal" value="0">
<input type="hidden" name="radioButton" value="0">
<p><label for="Subtoal$:">Subtotal: $</label>
<input type="text" name="Subtotal_tb" readonly onfocus="this.blur();"></p>
<p><label for="GST $:">GST: $</label>
<input type="text" name="GST_tb" readonly onfocus="this.blur();"></p>
<p><label for="PST $:">PST: $</label>
<input type="text" name="PST_tb" readonly onfocus="this.blur();"></p>
<p><label for="Total $:">Total: $</label>
<input type="text" name="Total_tb" readonly onfocus="this.blur();"></p>
</p>
</div><!--end of total box-->
<div id="payment_method">
<p><label for="Payment"></label><select id="Payment_menu" name="Payment_menu " onchange="getTotal ()">
<option value="- select an item -">- Payment Method -</option>
<option value="Cash">Cash</option>
<option value="Debit">Debit</option>
<option value="Credit Card">Credit Card</option>
</select>
</div><!--end of payment method box-->
<div id="submit">
<p><input type="submit" label="Submit" name="Submit_but" value="Submit"/></p>
my Javascript
//***************Check for missing information before being able to submit form**************************//
function validateForm() {
//assume that the form will have no errors. Set a variable to Boolean true.
var okay = true;
//Declare and initialize a variable to hold a message for the user.
var message = "";
//Start at the beginning of the form and check to see if the field is blank or empty string""
if (document.getElementById("FirstName_tf").value == null || document.getElementById("FirstName_tf").value == "") {
//The field is empty; set the Boolean variable to false
okay = false;
message += "Please fill in your First Name.\n";
}
if (document.getElementById("LastName_tf").value == null || document.getElementById("LastName_tf").value == "") {
//The field is empty; set the Boolean variable to false
okay = false;
message += "Please fill in your Last Name.\n";
}
if (document.getElementById("Address_tf").value == null || document.getElementById("Address_tf").value == "") {
//The field is empty; set the Boolean variable to false
okay = false;
message += "Please enter your Street Address for delivery.\n";
}
if (document.getElementById("Phone_tf").value == null || document.getElementById("Phone_tf").value == "") {
//The field is empty; set the Boolean variable to false
okay = false;
if (isNaN(Phone_tf)) {
alert(message);
message += "Please enter your phone number.\n";
if (document.getElementById("Email_tf").value == null || document.getElementById("Email_tf").value == "") {
//The field is empty; set the Boolean variable to false
okay = false;
message += "Please enter your email address.\n";
}
//If the Boolean is no longer true, there were problems with the form. Alert the message. Otherwise, don't do anything.
if (!okay) {
alert(message);
}
//return the Boolean.
return okay;
}
function calculateSubtotal(inputItem) {
with (inputItem.form) {
// Process each of the different input types in the form.
if (inputItem.type == "radio") { // Process radio buttons.
calculatedSubtotal.value = eval(calculatedSubtotal.value) - eval(radioButton.value);
radioButton.value = eval(inputItem.value);
calculatedSubtotal.value = eval(calculatedSubtotal.value) + eval(inputItem.value);
} else { // Process check boxes.
if (inputItem.checked == false) {
calculatedSubtotal.value = eval(calculatedSubtotal.value) - eval(inputItem.value);
} else {
calculatedSubtotal.value = eval(calculatedSubtotal.value) + eval(inputItem.value);
}
}
if (calculatedSubtotal.value < 0) {
InitForm();
}
function CalculatePrice(){
var gst=.7;
var pst=.7;
var Subtotal=calculatedSubtotal();
var GST=(Subtotal*gst)*100/100;
var PST=(Subtotal*pst)*100/100;
document.getElementById(GST_tb)=(Subtotal*GST*PST);
//*was trying several thing here but nothing seems to work for me. I got the subtotal by getting the values of the pizza and toppings but can't figure out how to diplay the gst,pst and totals in my html page.
}
// Return total value.
return(formatCurrency(calculatedSubtotal.value));
}
}
// Format a value as currency.
function formatCurrency(num) {
num = isNaN(num) || num === '' || num === null ? 0.00 : num;
return parseFloat(num).toFixed(2);
}