Javascript Inline code - hide another element

[ontarget]

Hi
I am trying to run 3 javascript validations on an element
2 Validations done with the Fabrik standard functions work fine
on Load value <100 Hide element "A"
on Change value >=100 Show element "A"

so far so good...

However I have another element called "B"

If the Value of "B" === "0" it should hide element "A" even if the value of "A" is greater than 100.

I tried running the following inline javascript on element "A"

var $b = $('aaa_participant_claim___allow_overnight');
var overnight = $b.value;
if (overnight === 0)
{this.setStyle('display','none');}

Nothing happens - as I'm pretty crap at JS I'm wondering if its my code or is it simply that there is a conflict and the standard on Change function overrides my inline function?

Thanks for any pointers!

 

[cheesegrits]

For element B, is that on change, or on load, or both?

 

[ontarget]

Hi thanks for the reply element b is on load

 

[cheesegrits]

I'd create a little function to handle it, and just call that from whatever load and change events you need. So in a ./components/com_fabrik/js/form_X.js file (replace X with your numeric form ID), put ...

function hideMyStuff(el) {
   var elA = el.form.formElements.get('yourtable___elementA');
   var elB = el.form.formElements.get('yourtable___elementB');
   var elC = el.form.formElements.get('yourtable___elementC');
   
   if (elB.getValue() === '0') {
      elA.hide();
      return;
   }
   
   if (elC.getValue().toInt() >= 100) {
      elA.show();
   }
   else {
      elA.hide();
   }
}

Then for each event in the JS settings for the elements, just do ...

hideMyStuff(this);

I'm a little confused as to whether you have another element (C) which you test for >= 100. But the idea is the same, just tweak that code a little to get the logic you need..

-- hugh

 

[ontarget]

Thanks a million Hugh that looks exactly what i need i will give it a try.
Great support .

UPDATE
Just tried the JS code works a treat.
Did an onchange hidemyStuff(this) for the distance field element and an onload hidemyStuff(this) for the "allow overnight" field elelment

function hideMyStuff(el) {
   var elA = el.form.formElements.get('aaa_participant_claim___overnights');
   var elB = el.form.formElements.get('aaa_participant_claim___allow_overnight');
   var elC = el.form.formElements.get('aaa_participant_claim___distance_km');
   var elD = el.form.formElements.get('aaa_participant_claim___displayovernightmessage');
 
   if (elB.getValue() === '0') {
      elA.hide();
      elD.hide();
      return;
   }
 
   if (elC.getValue().toInt() >= 100) {
      elA.show();
      elD.show();
   }
   else {
      elA.hide();
      elD.hide();
   }
}

OH YEAH WHEN TESTING THIS DONT FORGET TO CLEAR YOUR CACHE!!