Great Ideas. Always Flowing.

We are not happy until you are happy. Client satisfaction guaranteed. Whatever your needs and requirements, we have the skills and resources for the job!

Ready to get started?

Help Files / User Guides

Review the new and improved user guides including instructions on setting up the Dynamic Forms module, explanation of features,  product information, and more!


User Guide (PDF)



View Dynamic Forms Demonstrations

Dynamic Forms Video Tutorial


Trial Version

Get the Dynamic Forms Trial


Purchase Dynamic Forms

Dynamic Forms at Snowcovered


License Agreement

See License Options available.


Recently Viewed...

Dynamic Forms Demonstration 20 - Advanced field options and client events...


Section 1:  Radio Buttons

This section demonstrates a calculation performed with the use of radio buttons.  Radio buttons are best used for single selections like membership types.  In this scenario, we're offering 3 different service plans.  Notice that the Bronze plan is the default selection.  You can alter this setting under Advanced Field Options.  The price of the service will be automatically displayed beneath the radio buttons based on your choice. 


Your total comes to: $0.00


Section 2:  Drop-down Menu

This section demonstrates a calculation performed by choosing values from 2 drop-down menus. This is a great solution if you want to offer a combination of products in different categories.  The total value for the fees ("Apples" and "Baskets") will be calculated based on the values chosen from the pull down menu.


Your total comes to: $0.00


Section 3:  Check Box List

This section demonstrates a calculation performed by selecting check boxes, i.e. the products.  Note that, unlike a radio button, a check box list will allow for multiple selections.  The total value for all selected products will be displayed in the Text/HTML field.   


Your total comes to: $0.00



Section 4:  Textbox



Section 5:  Total by Quantity

In this section, we will demonstrate how to obtain totals based on a fixed unit price multiplied by the quantity entered.  For this example, the unit price is $ 10.00.


Your total here comes to: $0.00



Your Grand Total...

Your grand total comes to: $0.00


Dynamic Forms Demonstration # 20 -- Advanced Calculations


This demonstration provides options for obtaining totals using client-side calculations.  A variety of field types are used for this demo, including radio buttons, dropdowns, and checkbox lists.  At the end of the form, we will obtain a grand total, summing up totals obtained from each section.


The first thing to note when obtaining totals is that the client-side events are not entered in the total field.  Instead, they are entered in the field that provides the options.  Let's go over each of the examples in the form above.


Section 1:  Radio Buttons

Take a look at the field that says "What plan do you want to purchase?"  This is the field where you want to put the client-side event.  This is the content of the client side event box:



document.getElementById('Total').innerHTML = 'Your total comes to:  ' '$' funcRadioCalc($(Plans_FieldID)) '';

$(TotalRadio) = funcRadioCalc($(Plans_FieldID))

(There are others in this box pertaining to Grand Total calculations which will be discussed later.)


This Total.inner/HTML refers to the  Text/HTML field that says "Your total comes to:"  This field  is a good way to offer your users the total amount while preventing them from altering the total amount.


However, this field type will not work when passing amounts to payment gateways.  Since Radio Buttons only allow for single selection, you can simply use the option value to pass data to the payment gateway.   In this case, we set the option value of  Gold to 20 as you can see in the image below.   When setting the parameters in your payment gateway, you can use the token $(Plans) since Plans is the short field name for the radio button.




Section 2:  Dropdown Menu


In this example, we want to obtain the total by adding the values from Apples and Baskets.  Here are the calculations for these fields:



$(total) = parseInt($(Apples)) parseInt($(Baskets));

document.getElementById('TotalCombo').innerHTML = 'Your total comes to:  ' formatCurrency($(total)) '';


 (There are others in this box pertaining to Grand Total calculations which will be discussed later.)


Note that the same calculation should be added to the client-side event both the Fee1 and  the Fee2 field.


 Section 3:  Check Box List


The checkbox list allows users to make multiple selections (as opposed to single selections for  radio buttons).   Look at the calculations used for this field type in this demo:



$(CheckTotal) =CalculateCheckBoxListValues($(Products_FieldID), $(Products_ValueFieldID));

document.getElementById('Total2.')innerHTML = 'Your total here comes to:  '   formatCurrency(CalculateCheckBoxListValues($(Products_FieldID), $(Products_ValueFieldID))) '';


 (There are others in this box pertaining to Grand Total calculations which will be discussed later.)


Section 4:  Textbox


In this section,  we offer a textbox here where users can enter their own amount.  A Donation box is a good example where this implementation is suitable.  



$(TotalExtraonkeypress) = '0';

 (There are others in this box pertaining to Grand Total calculations which will be discussed below.)


Section 5:  Total by Quantity


The demonstration in this section is ideal for situations where users can purchase multiples of a fixed-price item such as event tickets.  In the box below, you'll find the client-side event used for this calculation.


$(TotalbyQuantity) = (parseInt($(Quantity) *10.00)).toFixed(2);

document.getElementById('QTotal').innerHTML = 'Your total here comes to:  ' (parseInt($(Quantity) *10.00)).toFixed(2) '';

 (There are others in this box pertaining to Grand Total calculations which will be discussed below.)





The Grand Total


As you can see from our demonstration all sub-totals from each section are added together to get to the Grand Totals.    There are 2 grand total fields:  one that's hidden and one that's a Text/HTML.  The javascript shown below for the grand total must be added to client side events of each field that contains the calculations. 



$(GrandTotalHidden) = formatCurrency(eval(parseFloat($(TotalExtraonkeypress)) parseInt($(TotalRadio)) parseInt($(TotalbyQuantity)) parseInt($(total)) parseFloat($(checktotal))))

document.getElementById('GrandTotal').innerHTML = 'Your grand total comes to:  ' formatCurrency($(GrandTotalHidden)) '';



 Final Thoughts:


As mentioned at the beginning of the tutorial, the calculations are entered in the fields that offer the options or where the values are entered, not in the Total fields.  In addition, please visit the Module Configuration and go down to Custom Javascript File and take a look at the Initial Javascript.  This works hand-in-hand with your client-side events so it's important to set this up correctly.

Also note that having the Text/HTML field to display totals is not necessary.  However, it helps prevent users from altering the total amount.  If you choose to use the Text/HTML field, you will need a hidden textbox field to pass data to your payment gateway.  For this demonstration, we created a field called GrandTotalHidden.  You'll find this field if you go to Manage Questions, Select Dynamic Field. 


In addition, this article on JavaScript Math FAQs is a good resource for helpful tips.  Check it out!



Would you like to setup your form just as this demonstration is setup? If so simply download this template and copy it to your DNN Portals Home Directory to use the IPORTABLE feature of the module (Select Import Content from the module menu and import the template):




Feedback Comments



Join our mailing list...

Get current news and events the easy way
Subscribe Me

Recent Blogs...

Copyright 2005 - 2011 by Data Springs, Inc.
  • film izle
  • 720 izle
  • film
  • sinema izle
  • film makinesi
  • T�rk�e dublaj film
  • film izle
  • film izle
  • baglan film izle
  • sinema izle
  • 1080 film izle
  • film mercegi