bggann
Active Member
Reference this thread http://fabrikar.com/forums/index.php?threads/javascript-inline-code-hide-another-element.47298/
My subscription is messed up so I can't post in pro or standard right now - so I'm here in Community.
I'm trying to show/hide elements based on another element value - very basic. I can do it with the pre-defined functions, however I want to batch it because I'll be doing a lot of these fields if it works well. The pre-defined work, but get very cumbersome if you have a lot.
This is a site that deals with aerial firefighting records.
I should note - these fields are part of parent/child pairs. I'm editing the parents.
I should also note - these fields are in repeating groups.
Finally caching is turned off for this site.
Case is (using friendly names - see below for code)
- apply on form load or on change of "Gallons Retardant"
if (Gallons_Retardant == 0) {
hide (Marsh Funnel Time)
hide (Cost per gallon)
hide (total cost) }
else {
show (Marsh Funnel Time)
show (Cost per gallon)
show (total cost)
}
I want to apply this on load of the form or on change of "Gallons Retardant". That way if they open a previously edited record that has Gallons Retardant not zero, the other elements are show. If gallons retardant is zero - they are not shown.
I will also have to "set" marsh funnel and cost per gallon to 0 if gallons is changed to 0 - but lets get the hide/show working first.
--------
I created a js file in components/com_fabrik/js called
form_2.js (my form ID is two. I get this from the number on the 1st column of forms display in the backend)
Contents of this js file is.
function hideRetardantFields(el) {
var elGallons = el.form.formElements.get('daily_log_7_repeat___gallons_retardant');
var elA = el.form.formElements.get('daily_log_7_repeat___marsh_funnel_time');
var elB = el.form.formElements.get('daily_log_7_repeat___refractometer_reading');
var elC = el.form.formElements.get('daily_log_7_repeat___retardant_cost_per_gallon');
var elD = el.form.formElements.get('daily_log_7_repeat___retardant_cost');
if (elGallons.getValue() == '0') {
elA.hide();
elB.hide();
elC.hide();
elD.hide();
return;
}
else {
elA.show();
elB.show();
elC.show();
elD.show();
}
return;
}
I call this from the element "daily_log_7_repeat___gallons_retardant"
EVENT: On load
JS Code: hideRetardantFields(this);
EVENT: On Change
JS Code: hideRetardantFields(this);
What I expect.
- when the form loads, if the gallons_retardant field is 0, then hide the other 3, if not, show them.
- when gallons_retardant changes, if it is 0, then hide the other 3, if not, show them.
This seems pretty simple, but it is not working
My subscription is messed up so I can't post in pro or standard right now - so I'm here in Community.
I'm trying to show/hide elements based on another element value - very basic. I can do it with the pre-defined functions, however I want to batch it because I'll be doing a lot of these fields if it works well. The pre-defined work, but get very cumbersome if you have a lot.
This is a site that deals with aerial firefighting records.
I should note - these fields are part of parent/child pairs. I'm editing the parents.
I should also note - these fields are in repeating groups.
Finally caching is turned off for this site.
Case is (using friendly names - see below for code)
- apply on form load or on change of "Gallons Retardant"
if (Gallons_Retardant == 0) {
hide (Marsh Funnel Time)
hide (Cost per gallon)
hide (total cost) }
else {
show (Marsh Funnel Time)
show (Cost per gallon)
show (total cost)
}
I want to apply this on load of the form or on change of "Gallons Retardant". That way if they open a previously edited record that has Gallons Retardant not zero, the other elements are show. If gallons retardant is zero - they are not shown.
I will also have to "set" marsh funnel and cost per gallon to 0 if gallons is changed to 0 - but lets get the hide/show working first.
--------
I created a js file in components/com_fabrik/js called
form_2.js (my form ID is two. I get this from the number on the 1st column of forms display in the backend)
Contents of this js file is.
function hideRetardantFields(el) {
var elGallons = el.form.formElements.get('daily_log_7_repeat___gallons_retardant');
var elA = el.form.formElements.get('daily_log_7_repeat___marsh_funnel_time');
var elB = el.form.formElements.get('daily_log_7_repeat___refractometer_reading');
var elC = el.form.formElements.get('daily_log_7_repeat___retardant_cost_per_gallon');
var elD = el.form.formElements.get('daily_log_7_repeat___retardant_cost');
if (elGallons.getValue() == '0') {
elA.hide();
elB.hide();
elC.hide();
elD.hide();
return;
}
else {
elA.show();
elB.show();
elC.show();
elD.show();
}
return;
}
I call this from the element "daily_log_7_repeat___gallons_retardant"
EVENT: On load
JS Code: hideRetardantFields(this);
EVENT: On Change
JS Code: hideRetardantFields(this);
What I expect.
- when the form loads, if the gallons_retardant field is 0, then hide the other 3, if not, show them.
- when gallons_retardant changes, if it is 0, then hide the other 3, if not, show them.
This seems pretty simple, but it is not working