Javascript clear radiobutton

[bobede]

I have a radio button for selecting a region (-North -South). I have javascript set up on this element so that based on which option is selected it will show or hide an appropriate next question. I wanted to have all elements required so I added a validation condition on the secondary questions and that works well. My problem is that the secondary questions are also radio buttons, so if some checks North and sees the next question for north and makes a selection, that information will get stored in that database, even if they realize they made a mistake and change to South. I tried adding another javascript action on the parent element to "clear" the appropriate secondary question onchange but it doesn't seem to be working. Clear does work for me on general field elements, but not on radiobuttons. Not sure what I'm missing.

 

[cheesegrits]

What is you JS code to "clear" it?

Easiest way is with the Fabrik element object's update() method ...

Fabrik.getBlock('form_X').formElement.get('yourtable___yourradio').update("");

Replace X with your numeric form ID, and use your full element name.

Or, if it's in the code box for a JS event on an element, you can use the 'this' reference rather than getBlock() ...

this.form.formElements.get('yourtable___yourradio').update("");

-- hugh

 

[bobede]

What is you JS code to "clear" it?

Easiest way is with the Fabrik element object's update() method ...

Fabrik.getBlock('form_X').formElement.get('yourtable___yourradio').update("");

Replace X with your numeric form ID, and use your full element name.

Or, if it's in the code box for a JS event on an element, you can use the 'this' reference rather than getBlock() ...

this.form.formElements.get('yourtable___yourradio').update("");

-- hugh

Thanks Hugh,

It is in the JS event on an element, but actually, I was trying to achieve it using the predefined actions section rather than using the Javascript Code area. I've always been able to achieve what I wanted through the predefined actions so this is new territory for me. The javascript you show (second option) pretty clearly shows what it will do, but if I use that code in the javascript code box, I assume I will also need to add code that defines when this action occurs? (if this element == South then "your code" to clear North radiobutton). I'm not not familiar with exactly how to code that - can you point me to an example?

Thanks

 

[Sophist]

There is a standard javascript action called clear which (in form.js at line c. 488) calls a clear method on the element's js object.

So I would imagine that the radiobutton.js (or possibly elementlist.js to handle the same issue in other list type elements) needs a "clear" method added to override the default one in element.js which is not working on these types of elements.

P.S. The clear method in element.js just calls the update('') method with an empty string. elementlist.js doesn't have an override update method, so we should think about whether this is needed also.

 

[cheesegrits]

I assume I will also need to add code that defines when this action occurs? (if this element == South then "your code" to clear North radiobutton).

if (this.form.formElements.get('yourtable___whatever').getValue() === 'South') {
   // code here
}

-- hugh

 

[bobede]

if (this.form.formElements.get('yourtable___whatever').getValue() === 'South') {
   // code here
}

-- hugh

Thanks for taking the time to have a look at this. It's much appreciated. Here is what I tried:

if (this.form.formElements.get('atelliers_bob_test_78_repeat___choisissez_votre_region').getValue() === 'CSO') {
  this.form.formElements.get('atelliers_bob_test_78_repeat___choix_de_l_atelier_nord').update("");
}

I have another javascript rule "on change" that checks for the other possible value and then clears the other element. For some reason it doesn't seem to be working. In the attached screen shot you can see that both elements below the trigger element have values and switching from CSO to Nord doesn't have an effect. Could it be due to the fact that the elements are in a repeatable group?

 

[Sophist]

Yes - repeat group ids have "-" and the repeat group number after them - you can see this in your browser's Developer Tools - right click and select Inspect.

 

[cheesegrits]

In a repeat group you'd have to do something a little different.

var repeatNum = this.getRepeatNum();
if (this.form.formElements.get('atelliers_bob_test_78_repeat___choisissez_votre_region_' + repeatNum).getValue() === 'CSO') {
  this.form.formElements.get('atelliers_bob_test_78_repeat___choix_de_l_atelier_nord_' + repeatNum).update("");
}

That assumes that the element triggering this JS is in the same repeat group as the elements you are getting/setting.

If it's not, then you can't really do it, as JavaScript isn't sentient / psychic, and doesn't know which repeat instance you want to work on.

-- hugh