This demonstration illustrates the use of several client side events, the ability to hide form submission buttons initially, and also different stylesheet properties specifically for an individual field.
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.
- 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;
}
Other form properties were also setup for this form.
- There was example text specified to display the pop up help (this is also setup on demonstration #5 but not as a ? with help text, actually when you hover over the field) for the First and Last name fields.
-
Under the module configuration, general settings, we specified to display link butons within the center (this setting can be aligned left, center, or right).
 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): |