In this demo, we showcase a variety of common implementations needed for forms. 1) hide/Display text using a checkbox; 2) copy the Billing Address to Shipping address with a checkbox; 3) apply a character limit to a user's response; and 4) hide the submit button until a condition is satisfied.
There are a number of specific client side events setup within this form. These events show/hide an html field based on a checkbox field, another checkbox field copies form values from one area to another, and finally a client side event is setup on the textbox that actually makes the 'Submit' button be displayed only if the user types in 'YES' within the textbox.
Checkbox show/hide help text
- To configure the checkbox to show/hide specific text we setup an HTML field as the first form field. There are a few ways of doing this, one makes use of two client side functions you can use within Dynamic Forms called hidehtml and showhtml, the other is to just simply set a DIV property text to either nothing or specific text. We will cover both of these in this example.
- The first step is to setup an HTML field with only this html: < div id="Help">< /div >
- Note: You might want to switch to source view before copying/pasting the text.
- Remember that the DIV in this example is called 'Help'. We will refer to this later in a client side event for the checkbox
- The next step is to actually create the checkbox field. This should be a standard checkbox field, however in the Advanced Field features for Client Side Event you should enter the following:
- if ( $(chkToggleHelp))
showhtml('Help')
else
hidehtml('Help')
if ( $(chkToggleHelp))
Help.innerHTML = 'We are glad you are here checking out the Data Springs Dynamic Forms demonstration module... We hope you find this demonstration very useful. This current demonstration is showcasing new features added to the 2.5 release which highlight client events. Specifically, this text is hidden/displayed based on the checkbox field. These features require no postbacks and are very quick... Setting up these events is easy, however we are releasing notes with each demonstration to help.'
else
Help.innerHTML = ''
- This javascript event has several key features... One feature determines if the checkbox is checked and if it is, it executes the showhtml functions to show/hide the html. The second function actually sets the help text to blank or actually the help text you want to be displayed. You should be able to actually use either of these solutions. Notice that we reference the $(chkToggleHelp) field within the event. This is based on the short field name for the checkbox field. Also make note that we reference the 'Help' text. This is the name of the DIV we made in the previous step.
- In our demonstration/example we also specified the checkbox to 'Display label on checkbox field' and also under Question Look and Feel we specified to 'Display label and field in same column', and 'Hide field label'. This provides a little more flexible look for this question.
Copy address fields from billing to shipping address fields
- The client event setup to copy the fields from the billing address to shipping address fields requires only one client event. First setup a checkbox field
- Under the advanced field properties, enter this text for the client side event:
- The client event should specify an if statement to determine if the checkbox is checked. It should also have an else statement to clear the fields if the billing address is not the same. We have setup in this example an if statement for each field we want to copy.
- if ( $(chkCopy))
$(FirstName2) = $(FirstName)
else
$(FirstName2) = ''
if ( $(chkCopy))
$(LastName2) = $(LastName)
else
$(LastName2) = ''
if ( $(chkCopy))
$(Email2) = $(Email)
else
$(Email2) = ''
if ( $(chkCopy))
$(Street2) = $(Street)
else
$(Street2) = ''
if ( $(chkCopy))
$(City2) = $(City)
else
$(City2) = ''
if ( $(chkCopy))
$(State2) = $(State)
else
$(State2) = ''
if ( $(chkCopy))
$(PostalCode2) = $(PostalCode)
else
$(PostalCode2) = ''
if ( $(chkCopy))
$(Tele2) = $(Tele)
else
$(Tele2) = ''
- Notice all of the $(Fields). These represent the short field name for your fields. In each example we are using the same client side event code... We are either setting the a field equal to another field, or we are clearing a field out. So, $(FirstName2) will be equal to the same value as $(FirstName) if the checkbox is checked. Within each if statement we are checking the value for $(chkCopy), this is because chkCopy is the short field name for this checkbox.
- Within this checkbox we also specified to display the label next to the checkbox, hide the initial field label, and display the field in the same column.
Showcase the number of remaining characters allowed within the multi line 'comments' textbox.
- This form demonstrates a field for 'Comments' that is a multi line textbox question. The question showcases a client event that will notify the user that the field is limited to only 255 characters. As the user types within the textbox a message is displayed letting them know how many characters they have already typed and how many characters are left.
- In order create this field you must include a function call within your javascript validation file (if its not already there as this has been recently added to the default javascript file). After adding this function call remember that you must hit 'F5' or refresh after hitting update stylesheet within the user-facing page of the module before the updated javascript will be reflected.
function countChars(dId,txtVal,limit)
{
var totalLen = txtVal.length + 1;
if (totalLen < limit)
{
document.getElementById(dId).innerHTML = "<font color='red'>You have used " + totalLen + " of " + limit + " characters available.<br>You have " + (limit - totalLen) + " characters remaining.</font>";
}
else
{
document.getElementById(dId).innerHTML = "<font color='red'>You have exceeded the character limit for this field.</font>";
}
}
- There are two additional steps after updating the javascript file. First must you must create the multi line textbox field that you would like to implement this feature on. After setting up the field you need to configure the field with these advanced properties.
- The short field name should include the text 'onkeyup', or 'onkeypress' within the field name. This feature will allow the form to process the client side event whenever a key is pressed.
- Within the question footer you need to define a DIV, in our example we called ours divMessage. This should look something like < DIV ID="divMessage" >Text here if you want default text to be displayed < /DIV >
- Within the advanced field options you will need to include the ability to call this javascript function.
- countChars('divMessage',$(MyComonkeypressonkeyup),255)
- Notice that the parameters called within the client side event. We have included the name of the DIV which we would like to update the inner HTML/Text for, the short field name of this multi line textbox within the format of $(shortfieldname), and finally the number 255, which in our example is the maximum number of characters allowed.
Hide submission button until the user type YES within the terms and conditions textbox
- For many forms it might be a common approach to have the user check a box for the 'Terms and conditions'. For our example though we have decided to use a textbox and force the user to type YES since we are already using so many checkbox's with client events for this form. We also specified specific stylesheet properties for this field which make the background color green, add a blue border around the textbox, and make the font the user types in bold. Below are all of the steps necessary to setup this client event.
- First, under module configuration, submit link/button, we checked the setting to 'Initially hide form submission button'. This will initially hide either a form submission button (link button or image button) until you execute a client event to display the submit button.
- To display the form submission button, we use the same HTML function call to showhtml/hidehtml that we previously used in the first client event.
- Setup a standard textbox field, under advanced field options specify this client event within the client event property.
- if ( $(Termsonkeyup).toUpperCase() == 'YES')
{
showhtml('SaveForm')
}
else
{
hidehtml('SaveForm')
}
- This code will determine if the value entered for the textbox is YES. The code will first force the upper case before checking, this way if the user typed in Yes or yes they submission button will still be displayed. Notice that the short field name for this field is 'Termsonkeyup' and so that is how we reference the field within the client event - $(Termsonkeyup).
- Note: Typically all client side events are rendered to textbox fields with an 'OnBlur' event. There is build in functionality within Dynamic Forms however to optionally also add the client event to other event triggers (for example onkeypress, on keydown, and onkeyup).
- In this example we included onkeyup within the short field name, this forces the client side code to execute for EACH key press instead of just after the user has tabbed off the field. This way if the user types in YES the continue button will be displayed immediately without the user needing to tab to the next field, or if they typed in YES and then back spaced it would immediately hide the submission button again.
- Additional properties are added to this textbox field
- A question footer is added to display instructions to the user that they must enter YES before they can continue
- Under question look and feel a seperate stylesheet property is specified called 'BlueTextBox', the field is specified to only be a width of 40, and the field label is set to be hidden
- Since we specifically specified a stylesheet class just for this field, we can provide specific CSS properties so that this specific field will look different than the other fields. To create this stylesheet class navigate to Module Configuration, Stylesheet and we added the following extra style sheet class
- .BlueTextBox{
border-right: steelblue 2px solid;
border-top: steelblue 2px solid;
border-left: steelblue 2px solid;
border-bottom: steelblue 2px solid;
background-color: #96E57C;
font:bold 15px Verdana;
}
See other Form Demos.