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?
Conditional Form Field
-
- User
- Posts: 1601
Use jquery .hide() to hide the textbox field in Add Page, add code in Client Scripts->Table-Specific->Add Page->Startup Script.
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.
-
- User
- Posts: 187
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
}
});
-
- User
- Posts: 9430
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().
-
- User
- Posts: 187
Was this done right? Nothing is happening when I choose dual from the dropdown.
-
- User
- Posts: 11752
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();
}
});
});
-
- User
- Posts: 187
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.