Conditional Form Field

[morrellaberdeen]

I wish to have a field on a form that is by default disabled but is activated once a particular option from a dropdown box is selected. To give an example, let's say I have a country list. If the user chooses country x, a textbox below, by default disabled, is enabled to allow for a comment. How is that accomplished?

[danielc]

1. Use jquery .hide() to hide the textbox field in Add Page, add code in Client Scripts->Table-Specific->Add Page->Startup Script.

2. Add onchange event to your country field by jquery in Startup Script and write your javascript function to execute jquery .show() depend the country value select.

[morrellaberdeen]

Please see the code below. I got this to work. However, it works only if I have a dropdown box where the options are hard coded. For example, I tested it using a dropdown list with male and female written into the code itself. However, once I use a lookup table as the source of the options, the hidden textbox fails to show. Nothing happens. Any suggestions?

$("#x_Nationality").change(function() {
if (this.value == "Dual") {
$("#x_DualCitizenOf").show(); // Show field
$("#r_DualCitizenOf").show(); // Show label
} else {
$("#r_DualCitizenOf").hide(); // Hide label
$("#x_DualCitizenOf").hide(); // Hide field
}
});

[danielc]

Your code is OK. Do you have default add value (Dual)? Make sure you have change the value in order to have .change event to trigger.

You may try to use $( document ).ready() to wait till DOM is ready and print the variable to see.

[Webmaster]

morrellaberdeen wrote:
I tested it using a dropdown list with male and female written into the code itself.
However, once I use a lookup table as the source of the options...

If you are using a selection list, note that you cannot use "this.value" to get the selected value, you should use $(this).val().

[morrellaberdeen]

Was this done right? Nothing is happening when I choose dual from the dropdown.

[mobhar]

How about this?

--> Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script
--> Client Scripts -> Table-Specific -> Edit Page -> Startup Script

$(document).ready(function(){
$("#x_Nationality").change(function() {
var str = $("option:selected", this);
if (this.value == "1") { // Assume the code of lookup to "Dual" is equal with "1"
$("#r_DualCitizenOf").hide();
} else {
$("#r_DualCitizenOf").show();
}
});
});

[morrellaberdeen]

Thanks! Worked like a charm Danielc had suggested that I try $( document ).ready(). However, I did not know just how to do it. I appreciate all the help. Thanks again.