Show/hide elements

Introduction

There are many reasons why you might wish to hide form elements but for the purpose of this tutuorial we will create an on and off button.

Requirements

Our test form will need the following elements...

• A Static Text/Html element tag called "txt_tag"
• A Text element called "txt_element"
• A Regular button to show elements called "show_button"
• A Regular button to hide elements called "hide_button"

Getting started

First lets create our test form, create a new form and call it "show_hide" you can leave the rest of the settings as default apart from Log to database and Email notification which I suggest you set to no as this is only a test form and click save.

Now we have a form you can create the four elements we need, now create a Static Text/Html element tag called "txt_tag", a Text element called "txt_element", a Regular button to show elements called "show_button" and a Regular button to hide elements called "hide_button", arrange them in your form how you wish but make sure the two buttons are in exactly the same position.

Form initialisation

Now we have all the form elements we need, click Edit form, now click the Scripts tab and choose Custom initialisation, click Create code framework and you should see this code...

function ff_show_hide_init()
{
} // ff_show_hide_init

This is the initialisation function when the form opens this will be how we tell the form which form elements to show or hide.

In our test form the elements we are going to switch on and off will be set to off/hidden when the form opens, you can do this by using "style.display = 'none'" for each of the elements, so to expand the intit function...

function ff_show_hide_init()
{
//hide
   ff_getDivByName('txt_tag').style.display = 'none' //hide
   ff_getDivByName('txt_element').style.display = 'none' //hide
   ff_getDivByName('hide_button').style.display = 'none' //hide
} // ff_show_hide_init

To turn the form elements on/show you will need to create another function using "style.display = 'block'" for each of the elements you wish to show, notice also that the show button is hidden in the function...

function show_elements()
{
//show
   ff_getDivByName('txt_tag').style.display = 'block' //show
   ff_getDivByName('txt_element').style.display = 'block' //show
   ff_getDivByName('hide_button').style.display = 'block' //show
   ff_getDivByName('show_button').style.display = 'none' //hide
}

To turn the form elements off/hide you will need to create a similar function for each of the elements you wish to hide, notice the hide button is hidden this time...

function hide_elements()
{
//hide
   ff_getDivByName('txt_tag').style.display = 'none' //hide
   ff_getDivByName('txt_element').style.display = 'none' //hide
   ff_getDivByName('hide_button').style.display = 'none' //hide
   ff_getDivByName('show_button').style.display = 'block' //show
}

The complete init code should look like this...

function hide_elements()
{
//hide
   ff_getDivByName('txt_tag').style.display = 'none' //hide
   ff_getDivByName('txt_element').style.display = 'none' //hide
   ff_getDivByName('hide_button').style.display = 'none' //hide
   ff_getDivByName('show_button').style.display = 'block' //show
}

function show_elements()
{
//show
   ff_getDivByName('txt_tag').style.display = 'block' //show
   ff_getDivByName('txt_element').style.display = 'block' //show
   ff_getDivByName('hide_button').style.display = 'block' //show
   ff_getDivByName('show_button').style.display = 'none' //hide
}

function ff_show_hide_init()
{
   ff_getDivByName('txt_tag').style.display = 'none' //hide
   ff_getDivByName('txt_element').style.display = 'none' //hide
   ff_getDivByName('hide_button').style.display = 'none' //hide
} // ff_show_hide_init

Running the functions

We now have our functions to show and hide form elements but we still need to be able to call the function from the buttons we created, in the scripts tab of your buttons select custom and create the code framework as before, you will see this code...

function ff_show_button_action(element, action)
{
    switch (action) {
        case 'click':
            break;
        default:;
    } // switch
} // ff_show_button_action

For each of you buttons respectively change the code to look like this...

function ff_show_button_action(element, action)
{
show_elements()
} // ff_show_button_action

function ff_hide_button_action(element, action)
{
hide_elements()
} // ff_hide_button_action

The buttons will now run the functions "show_elements()" and "hide_elements()", the form is now complete and ready for testing if you have folowed the instructions correctly the form should work with no problems.

--Boldee 18:22, 12 September 2008 (CEST)