[SOLVED] JavaScript to conditionally change element style

[Stevebenson223]

I have a radiobutton element with two values, 0 and 1 (Labels of "Nomination" and "Winner" respectively). If the element value is 1, I would like to display the label "Winner" font in red and bold on the Details page (if it's displayed in red/bold on the form too, that's OK). I should add that the element is in a repeating group.

I tried to do this in the custom template but it turned the whole group red and bold. It seemed easier to do it using the JavaScript option in the element itself, but as I've little or no clue about JavaScript, I cobbled the code together from various wiki parts and it didn't work. This was my attempt:

var winner = Fabrik.getBlock('form_1').elements.get('productions_15_repeat___winner_nomination').getValue();
if (winner == 1) {
  this.element.setStyle('color','red');
  this.element.setStyle('font-weight','bold');
}

I know the setStyle lines work on their own, but I can't figure out how to write the if condition. If any kind person with more JS experience could possibly point out what I'm doing wrong, I'd be very grateful.

Thanks.

 

[juuser]

Quickly looking at your code, it seems ok.

Just FIY, you can use

var winner = this.form.formElements.get('productions_15_repeat___winner_nomination').getValue();

to access current form elements (but I assume you didn't forget to change the form id from 1 to your actual id)

And try to add the value inside quotes like:

if (winner == '1') {

Anyway, you can always "echo" your variables and see what you get in browser console like:
console.log(winner);

This + possible errors on console give a lot of valuable information.

 

[juuser]

It seems that "Use as row class" element setting also works in details view. So if you set it to "yes" your element value will be added to element class (check the class with browser inspect tool, but in you case it should be table___element0 and table___element1 depending on radio value).

And then you can style it with pure css which is faster and smoother and doesn't have the "flashing" on page load, something like this in details template custom css file:

.table___element1 #your-element-id_ro {
    color:red;
    font-weight:bold;
}

 

[Stevebenson223]

Genius!! Thanks @juuser

I wasn't getting anywhere with the JavaScript and the browser console didn't give me any information I could understand. But your solution to use as row class did the trick! I've used "use as row class" before but just assumed it only referred to list view.

Another step closer to completion!

 

[troester]

It seems that "Use as row class" element setting also works in details view

Still learning