Step 1: Create a form using QuickMode
Step 2: Add your checkbox fields.
2a: Give them whatever LABEL you want, but make sure the NAME is something easy. For this example the names are d11, d12, d13, d14, d16, d18 and d1o (that last one is a lowercase letter o for "open", not the number zero).
2b: Give them a VALUE that is a dollar value. My values for this example are 35.00, 35.00, 35.00, 35.00, 45.00, 55.00, and 70.00.
2c: For each checkbox, click on the ADVANCED tab, and create an ACTIONSCRIPT event using CUSTOM, and check the action CLICK. In the code framework box put in this:
| Code: |
function ff_d11_action(element,action) {
ff_amountowing_action(element,action);
}
|
Make sure you change the title to match the NAME of this checkbox. So for box d12 it would look like this:
| Code: |
function ff_d12_action(element,action) {
ff_amountowing_action(element,action);
}
|
and so on.
Make sure you click SAVE PROPERTIES after each field is created!
Step 3: Create a text field with the NAME "amountowing" and a VALUE of 0.
3a: On the ADVANCED tab click on READ ONLY so that people can not alter the amount.
Under the ACTIONSCRIPT set it to CUSTOM. You do not need to click on any of the checkboxes, as this script runs from the checkboxes on your form (the ones you created in step 2).
3b: In the code framework add this:
| Code: |
function ff_amountowing_action(element,action)
{
ff_getElementByName('amountowing').value = 0;
if (ff_getElementByName('d11').checked)
{
ff_getElementByName('amountowing').value = Number(ff_getElementByName('amountowing').value) + Number(ff_getElementByName('d11').value);
}
if (ff_getElementByName('d12').checked)
{
ff_getElementByName('amountowing').value = Number(ff_getElementByName('amountowing').value) + Number(ff_getElementByName('d12').value);
}
if (ff_getElementByName('d13').checked)
{
ff_getElementByName('amountowing').value = Number(ff_getElementByName('amountowing').value) + Number(ff_getElementByName('d13').value);
}
if (ff_getElementByName('d14').checked)
{
ff_getElementByName('amountowing').value = Number(ff_getElementByName('amountowing').value) + Number(ff_getElementByName('d14').value);
}
if (ff_getElementByName('d16').checked)
{
ff_getElementByName('amountowing').value = Number(ff_getElementByName('amountowing').value) + Number(ff_getElementByName('d16').value);
}
if (ff_getElementByName('d18').checked)
{
ff_getElementByName('amountowing').value = Number(ff_getElementByName('amountowing').value) + Number(ff_getElementByName('d18').value);
}
if (ff_getElementByName('d1o').checked)
{
ff_getElementByName('amountowing').value = Number(ff_getElementByName('amountowing').value) + Number(ff_getElementByName('d1o').value);
}
}
|
Note that to see all of that code you may have to scroll across! But you can just copy it and paste it into your form's code framework.
3c: Modify that code to replace the names with the ones you used in step 2. If you used my names (d11, d12, d13, d14, d16, d18 and d1o) then it will work as is.
Now save the properties, save the form, and publish.
As you click the checkboxes on and off the amount owing will be updated with the correct sums.
You can see it in action here:
http://www.challengethechamp.ca/index.php/mushers/registration
Feel free to play with the form, even submit it if you choose (it's not being used live so play away).
Hope that helps!!
