Making a text field Hide/show depending on the outcome of a drop-down box

[palacefanatic]

Hi,

I wonder if anyone could help me with this. I want to show/hide some text boxes on my form depending on the choice made by the person filling it out. For example there would be a drop down box containing a choice of numbers 1 - 4. If 1 was chosen, 1 of the text boxes below would be visible and required, if 2 were chosen, 2 of the text boxes below would be visible and required etc....

I am new to FormCalc (only started using it this morning), so as simple an explanation as possible would be fantastic.

Thanks for reading!

[ocen12]

Is Javascript okey with you too?

Of course you've got to check the right naming too... (most likly it won't be Textfield1/2/3/4)

Will also color the border.

Most of it is of older scripts I got here ;D

Exit Event of the Dropdownlist (should work)

if (this.rawValue == "1")
{
Textfield1.presence = "visible";

Textfield2.presence = "invisible";

Textfield3.presence = "invisible";

Textfield4.presence = "invisible";

Textfield1.validate.nullTest = "error";
Textfield1.border.edge.color.value = "255,0,0";
Textfield1.assist.toolTip.value = "This field is mandatory, please provide a response...";

xfa.layout.relayout();

Textfield2.validate.nullTest = "disabled";
Textfield2.border.edge.color.value = "255,255,255";
Textfield2.assist.toolTip.value = "This field is optional...";
xfa.layout.relayout();

Textfield3.validate.nullTest = "disabled";
Textfield3.border.edge.color.value = "255,255,255";
Textfield3.assist.toolTip.value = "This field is optional...";
xfa.layout.relayout();

Textfield4.validate.nullTest = "disabled";
Textfield4.border.edge.color.value = "255,255,255";
Textfield4.assist.toolTip.value = "This field is optional...";
xfa.layout.relayout();

}

if (this.rawValue == "2")
  {
Textfield1.presence = "visible";

Textfield2.presence = "visible";

Textfield3.presence = "invisible";

Textfield4.presence = "invisible";

Textfield1.validate.nullTest = "error";
Textfield1.border.edge.color.value = "255,0,0";
Textfield1.assist.toolTip.value = "This field is mandatory, please provide a response...";

xfa.layout.relayout();

Textfield2.validate.nullTest = "error";
Textfield2.border.edge.color.value = "255,0,0";
Textfield2.assist.toolTip.value = "This field is mandatory, please provide a response...";

xfa.layout.relayout();

Textfield3.validate.nullTest = "disabled";
Textfield3.border.edge.color.value = "255,255,255";
Textfield3.assist.toolTip.value = "This field is optional...";
xfa.layout.relayout();

Textfield4.validate.nullTest = "disabled";
Textfield4.border.edge.color.value = "255,255,255";
Textfield4.assist.toolTip.value = "This field is optional...";
xfa.layout.relayout();

}

if (this.rawValue == "3")
  {
Textfield1.presence = "visible";

Textfield2.presence = "visible";

Textfield3.presence = "visible";

Textfield4.presence = "invisible";

Textfield1.validate.nullTest = "error";
Textfield1.border.edge.color.value = "255,0,0";
Textfield1.assist.toolTip.value = "This field is mandatory, please provide a response...";

xfa.layout.relayout();

Textfield2.validate.nullTest = "error";
Textfield2.border.edge.color.value = "255,0,0";
Textfield2.assist.toolTip.value = "This field is mandatory, please provide a response...";

xfa.layout.relayout();

Textfield3.validate.nullTest = "error";
Textfield3.border.edge.color.value = "255,0,0";
Textfield3.assist.toolTip.value = "This field is mandatory, please provide a response...";

xfa.layout.relayout();

Textfield4.validate.nullTest = "disabled";
Textfield4.border.edge.color.value = "255,255,255";
Textfield4.assist.toolTip.value = "This field is optional...";
xfa.layout.relayout();

}

if (this.rawValue == "4")
  {
Textfield1.presence = "visible";

Textfield2.presence = "visible";

Textfield3.presence = "visible";

Textfield4.presence = "visible";

Textfield1.validate.nullTest = "error";
Textfield1.border.edge.color.value = "255,0,0";
Textfield1.assist.toolTip.value = "This field is mandatory, please provide a response...";

xfa.layout.relayout();

Textfield2.validate.nullTest = "error";
Textfield2.border.edge.color.value = "255,0,0";
Textfield2.assist.toolTip.value = "This field is mandatory, please provide a response...";

xfa.layout.relayout();

Textfield3.validate.nullTest = "error";
Textfield3.border.edge.color.value = "255,0,0";
Textfield3.assist.toolTip.value = "This field is mandatory, please provide a response...";

xfa.layout.relayout();

Textfield4.validate.nullTest = "error";
Textfield4.border.edge.color.value = "255,0,0";
Textfield4.assist.toolTip.value = "This field is mandatory, please provide a response...";

xfa.layout.relayout();

}

hope that helps

Lisa

PS.: you can add Textfeld2.rawValue = null; for the invisible ones, so if the user changes from 3 to two there won't be additional hidden values.

PPS.: watch out which fields you want to appear in the beginning before anything is checked.

PPPS.: check out if your form is dynamic...

[palacefanatic]

Hi,

thanks for your help Lisa, but I'm not too good with JavaScript. Tried using this but couldn't get it to work! let me be more specific. The Drop down list contains 3 options (New/Update/Cancellation). I want the answer given on this box to effect the visibility of box "TextField1[3]." I edited the code you gave and this is what I put in:

if (this.rawValue == "New")
{
Textfield1[3].presence = "invisible";

Textfield1[3].validate.nullTest = "error";
Textfield1[3].border.edge.color.value = "255,0,0";
Textfield1[3].assist.toolTip.value = "This field is mandatory, please provide a response...";
xfa.layout.relayout();

}

if (this.rawValue == "Update")
{
Textfield1[3].presence = "visible";

Textfield1[3].validate.nullTest = "error";
Textfield1[3].border.edge.color.value = "255,0,0";
Textfield1[3].assist.toolTip.value = "This field is mandatory, please provide a response...";
xfa.layout.relayout();

}

if (this.rawValue == "Cancellation")
{
Textfield1[3].presence = "visible";

Textfield1[3].validate.nullTest = "error";
Textfield1[3].border.edge.color.value = "255,0,0";
Textfield1[3].assist.toolTip.value = "This field is mandatory, please provide a response...";
xfa.layout.relayout();

}

the script syntax is correct but it won't work. Where have I gone wrong? can you have both formcalc and javascript in the same form?

[ocen12 · Accepted solution]

Of course you can have javascript and formcalc in the form. Only not both in the same field, same event ;D

Okey, we'll try some things:

1) Check out if the "Binding" of the dropdown is same as the values you choose. In script you refer to the binded values.

2) Other names for the Textfields would be better, since it is harder to refer to "Textfield1[1]" then to for example: "New". I was just to lazy to give them names. (If it's on another page or subform, you will have to refer to the fields properly: like  MyForm.FirstSubform.FirstTextfield ... this name can be found in the specific script field.)

3) Check your script out once more... do you want to make invisible fields mandatory?

4) Check if your form is dynamic. (If it isn't you won't see the changes... )

Probably you should do it in small steps like:

1) First you refer to the fields like:

Firstfield.rawValue = this.rawValue;

if the fields value changes you got it's name and can be sure that the event you put it into is the right one.

2) Try out the different parts of the script and look how it works. Problems can be easier found then

[palacefanatic]

Thanks Lisa, got it to work. It was just a case of renaming the boxes something more specific with the same script.

thanks for your help