Page 1 of 1

Conditional Form Field

Posted: Sat Aug 03, 2013 8:30 am
by 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?


Re: Conditional Form Field

Posted: Sat Aug 03, 2013 9:33 am
by 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.


Re: Conditional Form Field

Posted: Mon Aug 05, 2013 12:33 pm
by 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
}
});


Re: Conditional Form Field

Posted: Tue Aug 06, 2013 11:14 am
by 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.


Re: Conditional Form Field

Posted: Tue Aug 06, 2013 11:35 am
by 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().


Re: Conditional Form Field

Posted: Fri Aug 09, 2013 3:21 am
by morrellaberdeen

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


Re: Conditional Form Field

Posted: Fri Aug 09, 2013 3:33 am
by 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();
}
});
});


Re: Conditional Form Field

Posted: Fri Aug 09, 2013 5:04 am
by 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.