How to make dynamic forms? ie. how to make certain parts of forms visible or invisible dynamicaly?

[Luka Bizjak]

Here is an example.

I want person's information if he is sick or not. 

I create short text field with field name "sick_bool" and label "Are you sick?" and range value would be:  {sick,Yes I am sick;notsick,No I am not sick}

so this effectively makes a dropdown box with options yes i am sick and No I am not.

Now i want form to update based on what person selects. If he selects that he is sick, i want to show another short text field, that lets him put in his disease name, but if he selects not sick, i want that short text field hidden.

I probably need to go to form properties and custom form layout right? But can anyone give me example in code how to do this?

thanks.

[Luka Bizjak]

Pere Fernandez answered this in private conversation, so I am posting solutions here if anyone else needs it too. I ended up using script that is at the bottom of this response and placing it in html code, and just using bunch of <div id> tags to dynamically display around 12 different fields.

first email:

there's not a way to do that via configuration, but you can do it with using some JavaScript to play with the form styling. For example let's imagine that you have two fields:

• sick: ListBox as you said on your email ( {sick,Yes I am sick;notsick,No I am not sick} )
• disease: TextBox to type in the user disease.

You can do the following:

1. Edit the disease field and add on the CSS style & Label CSS style the style: display:none; This will make the disease input & his label hidden.
2. Edit the sick field and add the following code On change Script code:

var fieldDisplay; 

if (this.value == "sick") { 

    fieldDisplay = "block"; 

} else {

    fieldDisplay = "none"; 

}

$("#disease_label_container").css("display", fieldDisplay);   

$("#disease_label").css("display", fieldDisplay);

$("#disease_container").css("display", fieldDisplay);

$("#disease").css("display", fieldDisplay);

This code will be executed after the ListBox value changes modifying the styling of the disease input & his label and also the field & label container.

Notice that I'm using the pattern <fieldName>_<whatever> ( disease_ ) to get the field, label & containers from the DOM... this pattern will work for any field on the form. 

If you want to use this type of functionallity on other fields on the form maybe you can modify the form layout to use a Custom one and write a JavaScript function there that does the something similar and call it from the fields On change Script code function.

second email:

 

to show hide a Short Date or Timestamp you should do the something like:

$("#date_label_container").css("display", fieldDisplay);    

$("#date_label").css("display", fieldDisplay); 

$("#date_container").css("display", fieldDisplay); 

$("#date_container").children().css("display", fieldDisplay);

$("#date").css("display", fieldDisplay); 

I thought it should be the same that a simple input but the Date widget is a bit more complex... at some point I'd have to review this.

The problem for HTML label is that each label doesn't have a specific name, what I would do is to create your own label, for example:

<h1> Hi! this is a label! </h1>

then on the HTML editor press the Source button and I would surround the label content with a div that contains a fixed ID, for example:

change this:

<h1> Hi! this is a label! </h1>

to:

<div id="myLabel" style="display:none">

<h1> Hi! this is a label! </h1>

</div>

And then you'll be able to do:

$("#myLabel").css("display", fieldDisplay); 

if you're going to show / hide all the inputs on based on a single input value, maybe you'll have issues storing all the JavaScript code on the field On change Script property since it has a limited size. What I would do is create a custom layout for the form and then edit the form layout html and write a JavaScript function at the top of the layout like:

<script>

function updateFields( var value ) {

var fieldDisplay; 

if ( value == "sick" ) { 

    fieldDisplay = "block"; 

} else {

    fieldDisplay = "none"; 

}

// Hide the TextBox

$("#disease_label_container").css("display", fieldDisplay);   

$("#disease_label").css("display", fieldDisplay);

$("#disease_container").css("display", fieldDisplay);

$("#disease").css("display", fieldDisplay);

// Hide the Date

$("#date_label_container").css("display", fieldDisplay);    

$("#date_label").css("display", fieldDisplay); 

$("#date_container").css("display", fieldDisplay); 

$("#date_container").children().css("display", fieldDisplay);

$("#date").css("display", fieldDisplay); 

// Hide the label

$("#myLabel").css("display", fieldDisplay); 

}

</script>

and then modify your field On change Script property to call your function like  updateFields( this.value );

[Emerson Oliveira]

Luka Bizjak,

Good Morning,

I took a look at your post, and it looks like this would serve what I'm doing.

I am trying to leave the fields of the Form according to the choice of ListBox.

I just can not visualize where I put the code that was explained.

Can you help me with that?

From what I've researched, the older version forms had CSS style and CSS style options. In Version 7.7 I'm not finding these options.

any help would be grateful.

Thank you.

Emerson