Please see my site: http://www.webgeko.com/puah/raffle
I am trying to make it so that when someone want to buy tickets for the raffle, the total cost of the tickets (plus any general donation) is added together and automatically displayed in the "Order Total" field.
There are price break depending on the # of tickets they buy. 1 for $18, 3 for $45, and 12 for $150. I was able to get it to work in a .htm file, but trying to replicate it in chronoforms has not yet been successful. My code is below. Please please help me out.
Thanks!
Here is the JS I added in the "Form JavaScript" area:
Here is my form code:
I am trying to make it so that when someone want to buy tickets for the raffle, the total cost of the tickets (plus any general donation) is added together and automatically displayed in the "Order Total" field.
There are price break depending on the # of tickets they buy. 1 for $18, 3 for $45, and 12 for $150. I was able to get it to work in a .htm file, but trying to replicate it in chronoforms has not yet been successful. My code is below. Please please help me out.
Thanks!
Here is the JS I added in the "Form JavaScript" area:
/* This script is Copyright (c) Paul McFedries and
Logophilia Limited (http://www.mcfedries.com/).
Permission is granted to use this script as long as
this Copyright notice remains in place.*/
function CalculateTotal(frm) {
var order_total = 0
item_quantity = parseInt(frm.Num_Tix.value)
if (item_quantity >= 12) {
order_total += item_quantity * 12.5
} else if (item_quantity >= 3) {
order_total += item_quantity * 15
} else if (item_quantity >= 0) {
order_total += item_quantity * 18
}
item_price = parseInt(frm.Gen_Don.value)
if (item_price >= 0) {
order_total += item_price
}
// Display the total rounded to two decimal places
frm.OrderTotal.value = round_decimals(order_total, 2)
}
function round_decimals(original_number, decimals) {
var result1 = original_number * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)
return pad_with_zeros(result3, decimals)
}
function pad_with_zeros(rounded_value, decimal_places) {
// Convert the number to a string
var value_string = rounded_value.toString()
// Locate the decimal point
var decimal_location = value_string.indexOf(".")
// Is there a decimal point?
if (decimal_location == -1) {
// If no, then all decimal places will be padded with 0s
decimal_part_length = 0
// If decimal_places is greater than zero, tack on a decimal point
value_string += decimal_places > 0 ? "." : ""
}
else {
// If yes, then only the extra decimal places will be padded with 0s
decimal_part_length = value_string.length - decimal_location - 1
}
// Calculate the number of decimal places that need to be padded with 0s
var pad_total = decimal_places - decimal_part_length
if (pad_total > 0) {
// Pad the string with 0s
for (var counter = 1; counter <= pad_total; counter++)
value_string += "0"
}
return value_string
}
Here is my form code:
<div class="form_item">
<div class="form_element cf_heading">
<h3 class="cf_text">Online Tickets</h3>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 200px;">Single Ticket ($18)</label>
<input class="cf_inputbox required" maxlength="150" size="3" title="" id="text_0" name="Num_Tix" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 200px;">General Donation</label>
<input class="cf_inputbox" maxlength="150" size="3" title="" id="text_2" name="Gen_Don" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 200px;">Order Total</label>
<input class="cf_inputbox" maxlength="150" size="3" title="" id="text_35" name="Order_Total" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_heading">
<h3 class="cf_text">Billing Information</h3>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Title</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_10" name="Title" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">First Name*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_11" name="First_Name" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Last Name*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_12" name="Last_Name" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Company</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_13" name="Company" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Address*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_14" name="Address" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">City*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_10" name="City" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">State*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_11" name="State" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Zip Code*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_12" name="Zip" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Country*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_13" name="Country" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Phone*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_14" name="Phone" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Cell</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_15" name="Cell" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Email*</label>
<input class="cf_inputbox required validate-email" maxlength="150" size="30" title="" id="text_17" name="Email" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_heading">
<h3 class="cf_text">Credit Card Payment Information</h3>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Card Type*</label>
<select class="cf_inputbox validate-selection" id="select_19" size="1" title="" name="Card_Type">
<option value="">Choose Type</option>
<option value="Visa">Visa</option>
<option value="MasterCard">MasterCard</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Card Number*</label>
<input class="cf_inputbox required validate-digits" maxlength="150" size="30" title="" id="text_20" name="Card_Num" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Expiration Month*</label>
<select class="cf_inputbox validate-selection" id="select_20" size="1" title="" name="Exp_Month">
<option value="">Select One</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Expiration Year*</label>
<select class="cf_inputbox validate-selection" id="select_21" size="1" title="" name="Exp_Year">
<option value="">Select One</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Security Code*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_23" name="Security_Code" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_heading">
<h3 class="cf_text">Donation Type</h3>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Type</label>
<select class="cf_inputbox" id="select_26" size="1" title="" name="Donation_Type">
<option value="">Select One</option>
<option value="General Donation">General Donation</option>
<option value="In Memory Of">In Memory Of</option>
<option value="In Honor Of">In Honor Of</option>
<option value="For The Recovery Of">For The Recovery Of</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Name</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_27" name="Name_For_Dontation" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: 150px;">To have us notify them/their family that a gift has been made in their name, please enter an address or email address, and your message below:</label>
<textarea class="cf_inputbox" rows="10" id="text_28" title="" cols="30" name="To_Notify"></textarea>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">How Did You Hear About Us?</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_29" name="Hear_About_Us" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Additional Comments</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_30" name="Additional_Comments" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_radiobutton">
<label class="cf_label" style="display: none;">Please mail a receipt to the address above (in addition to the receipt I will receive via email).</label>
<div class="float_left">
<input value="Please mail a receipt to the address above (in addition to the receipt I will receive via email)." title="" class="radio" id="radio00" name="radio0" type="radio" />
<label for="radio00" class="radio_label">Please mail a receipt to the address above (in addition to the receipt I will receive via email).</label>
<br />
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_radiobutton">
<label class="cf_label" style="display: none;">Please add me to the newsletter list.</label>
<div class="float_left">
<input value="Please add me to the newsletter list." title="" class="radio" id="radio10" name="radio1" type="radio" />
<label for="radio10" class="radio_label">Please add me to the newsletter list.</label>
<br />
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="Submit" name="button_34" type="submit" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_text"> <span class="cf_text">Please wait a moment while we process your request.</span> </div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_text"> <span class="cf_text">Do not hit the "Process Order" button more than once!</span> </div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_text"> <span class="cf_text">* required fields</span> </div>
<div class="cfclear"> </div>
</div>