The demonstrates illustrates several new features and capabilities that are now avaliable within Dynamic Forms 3.4 including the ability to return a value from the database via a question event, modify and manipulate the submit button via a client side event, showcase an HTML field on the same row as a previous question, fire off form submission based on a new question event, and also a unique layout feature to add the field to the same table cell as the previous field.

In order to implement this functionality we will do the following:

Instructions for Setting up Question Event for Returning a Value From Database

---

1) Create the questions as displayed on the demonstrations above such as Text/HTML fields, a textbox to accept the users entry for a coupon code, an HTML Input Button to validate the coupon code, and other HTML fields that will be used to showcase the users discounted total.  Below are the fields required to implement the question event for returning a value from the database.

• Textbox with the short name of "CouponCode"    <-- This will be used within the question event SQL to retrieve the coupon discount
• HTML Input Button with the short name of "ChkCode". This field should have the property set under advanced field options to 'Display field in the same cell as previous field.' The ability to display the field in the same cell as the previous field is a new feature in 3.4.  <-- This will represent the postback question for the question event
• Hidden Field / Textbox with the short name of "Discount" <-- This will represent the affected question for the question event.
• Create an HTML field and include several SPAN/DIV Tags. These will be used to display to the user the discount percentage and total.
  
• Create a hidden field with the short field name of "total". We will update the total once we have performance the client side event and calculation based on the question event. We will multiple $500.00 times the discount to retrieve the total after discount.
  

2) Setup a database table that you can later use to reference data for the question event. In our example we created a listname called 'Coupon Codes' under Host/Lists. Please refer to this guide with how to create lists under Host/Lists. Note: You can skip this step if you have your own database table or plan to reference your own table.

3) Setup a question event based on the details the screenshot below.

• Create a new question event, in our example we named the event "Check Code"
• Set the option for the question event type to be "Set question default / return SQL response based on another questions response"
• Select the postback question as the HTML Input Button you setup above. The question event will be fired based upon this field.
• Select the affected question as the Textbox or Hidden Field  that you setup above as the "Discount" field. The question event will return the value from the database for this field.
• Enter the SQL Query as defined below:
  • The query in our example is: stp_DynamicForms_GetCouponCode '$(CouponCode)'
  • The stored procedure we created is below (executed under Host/SQL):

Create Procedure stp_DynamicForms_GetCouponCode
@CouponCode nvarchar(200)
AS
Select Value as DefaultValue from Lists where ListName = 'Coupon Codes' AND Text = @CouponCode

• Note: When data entered from a textbox is passed into a SQL Query you should always use a stored procedure to avoid the risk of SQL Injection. If you are unsure on how to setup SQL statements/stored procedures please refer to our Premium Support Services.

• View Screenshot Below

4) The value is already being returned by the Question Event into the hidden field or textbox. In our example though we still wanted to set the full value into both an HTML Span Tag and also a hidden field. Please refer to Demo 20 for more instructions how to execute a calculation and display the results within an HTML DIV or HTML Span tag. In our example, we posted this under Initial JavaScript:

document.getElementById('totalpercent').innerHTML = $(Discount);
try
{
document.getElementById('total').innerHTML =  formatCurrency((500.00 -  parseFloat($(Discount) * .01) * 500.00));

$(Total) =  formatCurrency((500.00 -  parseFloat($(Discount) * .01) * 500.00));
}

catch(err)
    {
    //Handle errors here
     }


Notes:  Within the steps above you created an HTML field that should have included a 'totalpercent' and 'total' SPAN tag within the HTML.

$(Total) represents the short field name of "Total" you created above which is a hidden field and will be used if you are passing this field value to a payment gateway such as Authorize.net or PayPal.

Note: Although this example illustrated Dynamic Forms as a shopping cart its important to note that you can use this new question event for many other types of implementations... Examples could include:

• Retrieve an employees Manager ID from a users entry
• Validate and return an employee ID or verification code from a users entry
• Validate and return a current price from a product within the database
• Any other type of work flow integration where you would want to ask the user for input and return a value from the database based on that input.

Manipulate the Submit Button Text

---

1) Under "Module Configuration" > "Custom JavaScript" > "Initial JavaScript" set the following properties:

• Within our example we set the Submit Link Inner HTML based on a radio button. We set the radio button to have a value of 0 or 1 and then determined what we wanted the text to. You could also set the InnerHTML to an image if you choose image button for the submit button instead of a link button.
• Initial JavaScript:

var varMySubmitButton;
varMySubmitButton = funcRadioCalc($(optSubmit_FieldID));

if (varMySubmitButton == 0)
{
$(SubmitButton_Field).innerHTML = "Submit and purchase Dynamic Forms 3.4";
}
else
{
$(SubmitButton_Field).innerHTML = "Submit and purchase Data Springs Collection 3.0";
}

Notes: Our radio button with the values of 0 and 1 was named optSubmit. A build in function call (explained and used in demo 20) was utilized to retrieve the value of the radio button. Based on the value of the radio button we utilized the $(SubmitButton_Field).innerHTML property which changed the text of the submit link button.

---

2) Under "Question Events" > "Create New Question Event" set the following properties:

• Select the question event property for "Execute Form Submission"
• Select a postback field that you would like to represent when the form should be submitted (in our example a checkbox).
• Save the question event.

---

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):   Download Demonstration 32 XML Export - Import into your module