Undefined value for radio element

[mirceat]

Hello,

I need to set a radio element without any default value, just two options with values 1 and 2. Based on selection made to this element, another elements will be shown/hide.

The code from below work fine for new records, but when i edit the form, the elements that should be visible based on the selection made are hidden and in console.log i get the value: 'undefined' for the radio element.

I don't know how to force the element to use the selected value instead of default value.

This is the code:

var cws = Fabrik.getBlock('form_166').elements.get('contracte_campuri___configurare_wireless_standard');
var vws = Fabrik.getBlock('form_166').elements.get('contracte_campuri___valori_configurare_wireless_standard');
var vrs = Fabrik.getBlock('form_166').elements.get('contracte_campuri___valori_configurare_router_standard');

switch (this.get('value')){
case 1:
cws.show();
vws.show();
vrs.show();
break;
case 2:
cws.hide();
vws.hide();
vrs.show();
break;
default:
cws.hide();
vws.hide();
vrs.hide();
}

Thank you

 

[cheesegrits]

Well, first issue is that radio buttons always have a selection. That's the HTML standard, so it's how Fabrik treats them.

That said, you should still be able to get the value on load.

Can you point me at the page.

-- hugh

 

[mirceat]

yes, please take a look here

Use the login data for my fabrik site.

 

[mirceat]

friendly bump..

 

[cheesegrits]

I think it's because you are using integers in your switch, like ...

case 1:

But this.get('value') will return a string, not an int, and in JS, 1 does not equal "1". So try ...

case "1":

I tested this by hand, by putting a breakpoint inside our load event code, and modified your code on the fly to have the quotes.

Note that if you have more than a couple of lines of JS, it's always best to move it out into a function in a form_X.js file, and call that function from the element FX. Then you can actually put breakpoints in your code, and figure things out much easier.

-- hugh

 

[cheesegrits]

So my suggestion, create a ./components/com_fabrik/js/form_2.js, put this in it:

function doMyThingWithRadios(el) {
   var cws = el.form..elements.get('contracte_campuri___configurare_wireless_standard');
   var vws = el.form.elements.get('contracte_campuri___valori_configurare_wireless_standard');
   var vrs =el.form.elements.get('contracte_campuri___valori_configurare_router_standard');

   switch(el.getValue()) {
      case1:
         cws.show();
         vws.show();
         vrs.show();
         break;
      case2:
         cws.hide();
         vws.hide();
         vrs.show();
         break;
      default:
         cws.hide();
         vws.hide();
         vrs.hide();
   }
}

Then in your element FX, so ...

doMyThingWithRadios(this);

Note that as you are passing in 'this' (the element object), which has a reference to the form object, you can use el.form in the function, instead of getBlock(). And el.getValue() instead of this.get('value'). This makes it slightly easier when replicating code, as you don't have to know the form ID. For instance, in your first post you have to use form_166, but on the site you pointed me at, it's form_2. Doing it this way, you don't have to worry about that.

Then any other non-trivial code you need in elements on that form, you can move those out into functions as well. Just makes it a gazillion times easier to debug, as you can then just bring up form_2.js in Dev Tools in Chrome (or whatever you browser of choice is) and put a breakpoint in it.,

-- hugh