Dynamic Forms–Hide/Show rows without a postback

Wouldn’t you prefer to hide or show fields on your Dynamic Form instances without using Question Events? Postbacks can become time consuming if you have a large form. This example is just me sharing a technique that I use within Dynamic Forms to avoid Question Event Postbacks.

This example uses JavaScript to achieve the conditional hide or show Dynamic Form field.

Here’s my form:

Preparing the JavaScript

I want to hide the two Multi-lined text boxes until a selection is made from the Radio buttons. So I want to initially hide the two Multi-lined text boxes on page load. To do so I can use JavaScript under the Module Configuration –> Advanced Coding Options (AJAX, jQuery, JavaScript, Initial SQL DataBind) –> Custom JavaScript File –> Initial JavaScript. However what do I put there????

We will need to find the Dynamic Forms rowID’s for the Label and Question that we wish to hide. You can look into the Source code to obtain, or like myself, use the FireFox plugin(FireBug).

In this example, my RowID’s are:

• dnn_ctr2537_DynamicForms_Row_95e63704-01d5-4b49-8fd5-169404b9dcb0
• dnn_ctr2537_DynamicForms_Row_5b493000-04e2-4ed5-b141-1f6631af5857

So I need to prepare some JavaScript to place into the Initial JavaScript section that I mentioned above:

try{ document.getElementById('dnn_ctr2537_DynamicForms_Row_95e63704-01d5-4b49-8fd5-169404b9dcb0').style.display= 'none'; } catch(err){}

try{ document.getElementById('dnn_ctr2537_DynamicForms_Row_5b493000-04e2-4ed5-b141-1f6631af5857').style.display= 'none'; } catch(err){}

Now upon page load my two Multi-lined text boxes will be hidden.

I must prepare the JavaScript to conditionally show / hide the correct Multi-lined text box based on the Radio Button selection.

Preparing the Hide/Show JavaScript

The JavaScript below contains the logic to hide/show the appropriate Multi-lined text box. 

if(funcRadioCalc($(DForDR_FieldID)) == 'DynamicForms'){document.getElementById('dnn_ctr2537_DynamicForms_Row_95e63704-01d5-4b49-8fd5-169404b9dcb0').style.display= '';document.getElementById('dnn_ctr2537_DynamicForms_Row_5b493000-04e2-4ed5-b141-1f6631af5857').style.display= 'none';}else if(funcRadioCalc($(DForDR_FieldID)) == 'DynamicRegistration'){document.getElementById('dnn_ctr2537_DynamicForms_Row_95e63704-01d5-4b49-8fd5-169404b9dcb0').style.display= 'none';document.getElementById('dnn_ctr2537_DynamicForms_Row_5b493000-04e2-4ed5-b141-1f6631af5857').style.display= '';}else{document.getElementById('dnn_ctr2537_DynamicForms_Row_95e63704-01d5-4b49-8fd5-169404b9dcb0').style.display= 'none';document.getElementById('dnn_ctr2537_DynamicForms_Row_5b493000-04e2-4ed5-b141-1f6631af5857').style.display= 'none';}

Below is an image of the configuration settings for the Radio Button control:

Now you have achieved hiding/showing specific Dynamic Form questions  conditionally without a postback occurring.