s
Contact Login Register
h M

Dynamic Forms returning value from database (coupon code example)


Welcome to Demo 32 where we showcase new features in Dynamic Forms 3.4!

Select and enter a coupon code from the list on the right. Once you have entered a code click the Validate Your Code button.  A Question Event will verify the code you entered via a SQL Statement.  If the code passes validation, it should indicate how much your discount will be and calculate a new total. You can utilize a question event like this for many types of implementations.



Enter your coupon code below!
New Question Event!  The coupon code is an example of how you can utilize this new powerful feature but there are endless possibilities. With this new question event you can now enter data and have a value returned from the database to another field (in this case the percentage discount).

Please enter any of these codes in the coupon code field below:
  • DataCollection30
  • DataCoupon40
  • DynamicForms25
  • DynamicCoupon10
  • DynamicDonation5





The Standard Price is $500.00

Your code gives you a discount of   %.

Your new total is: 



Look here!  Now you can position a Text/HTML field on the same row as the previous field!


Want interactive buttons?  Starting with Dynamic Forms 3.4, you can now customize the Submit Button Link based on specific user response.  Watch the change in the Submit Link as you choose from the radio buttons on the left.



Automatically submit form?  Dynamic Forms 3.4 introduces a new feature that can automatically submit the form based on a question response. The feature is a new question event option when setting up question events. Notice by checking this box the form will automatically be submitted!

Submit           

Dynamic Forms Demonstration 32 - Return Value from Database via Question Event (example: coupon code w/ discount)

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.



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.


Auto Submit Form via Question Event


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!

 

 

 

 

DOWNLOAD A COPY


tip6.gifWould you like to set up your form just like this demo? 

     Simply download this template and save it using the exact file name (don't rename).  Next, upload it to File Manager and then go back to Dynamic Forms and click on Import Content.   

Get a copy now!



LET US DO IT FOR YOU



    Need help?  

Our super powers can make it happen. 

Let's start talking.




Enter your email below AND grab your spot in our big giveaway!

The winner will receive the entire Data Springs Collection 7.0 - Designed to get your website up and running like a DNN superhero (spandex not included).

  
Subscribe