Change the color of all radio button options based on radio button variable re-used in later forms.

asked on March 13, 2024

Hello. I use this script to change the color of all rows for the radio buttons depending on which row is selected it will change all the radio buttons color.

$(document).ready(function() {
$('#q82').on('click', function(e) {
if (e.target.value == '1 Low') {
   $('#q82 span label').css('color', '#0c850b');
}
else if (e.target.value == '2 Low-Medium') {
   $('#q82 span label').css('color', '#b7b700');
}
else if (e.target.value == '3 Medium') {
   $('#q82 span label').css('color', 'Orange');
}
else if (e.target.value == '4 Medium-High') {
   $('#q82 span label').css('color', '##f5837b');
}
else if (e.target.value == '5 High') {
   $('#q82 span label').css('color', 'red');
}

});
});

I have stored the radio button under variable 'urgency'

I have used the same radio button variable on subsequent forms to alert each dept of the, well... urgency of their task. Though the button selection keeps, the color assigned does not. Below is the script I used during the selection of the original radio button selection.

Currently, if 5 High was selected, 5 High correctly is shown on subsequent forms. I am looking to adjust the script so when the form loads, it looks at the value of the radio button made from the originating selector and assigns the correct colors as well. Can someone assist please?

0 0

replied on March 14, 2024 • Show version history

I usually wrap these kinds of things in their own functions, then I can call the function both when the form loads and when the change event triggers it. Something like this.

$(document).ready(function() {

  //Call the RadioButtonColor function on change event.
  $('#q82').change(RadioButtonColor);

  //Call the RadioButtonColor function on form load.
  RadioButtonColor();

  function RadioButtonColor() {
    var myTarget = $('#q82 input:checked');
    var myLabels = $('#q82 span label');
    if (myTarget.val() == '1 Low') {
        myLabels.css('color', '#0c850b');
    }
    else if (myTarget.val() == '2 Low-Medium') {
        myLabels.css('color', '#b7b700');
    }
    else if (myTarget.val() == '3 Medium') {
        myLabels.css('color', 'Orange');
    }
     else if (myTarget.val() == '4 Medium-High') {
        myLabels.css('color', '##f5837b');
    }
    else if (myTarget.val() == '5 High') {
        myLabels.css('color', 'red');
    }    
  }

});

Note that I’m typing this from memory on a mobile device, not testing it within my own Forms environment, so there is a chance I’m made some typos or other mistakes. If the code doesn’t work, I can test from an actual form in a few hours.

EDIT TO ADD: I reused #q82 since that is what you had on your code, but tried to minimize how many times it is actually listed out. But I’m more inclined to use class names so that it is easier to reuse the code in other processes. You could give your field a class name of “urgency” and then use .urgency in the code everywhere that currently says #q82 - just a thought… Note that the code is still written assuming a single field, it you would want multiple fields on the form with the urgency class, we would need to tweak the code slightly.

ANOTHER EDIT: I just made a small tweak to the code because I did test it in a form and there was a typo (I was ending the function with }); and not } like it should have been - I overlooked that when I re-wrote you code). With that change, the code is working for me in a test form.

P.S. you can use the {…}code button here in LFAnswers to make your code more readable.

0 0

replied on March 14, 2024 • Show version history

You can also pass the field JQuery object as a function parameter so that it also works in rows/collections. PS you had mismatched parens in your code, impressive work on a mobile device though.

$(document).ready(function () {
  //Call the RadioButtonColor function on change event.
  const $formRadioButton = $("#q82");
  $formRadioButton.change((ev) => RadioButtonColor(ev.target));

  //Call the RadioButtonColor function on form load.
  RadioButtonColor($formRadioButton);

  function RadioButtonColor($changeField) {
    // convert field to jQuery object if not already
    const changeField = $($changeField);
    var myTarget = changeField.find("input:checked");
    var myLabels = changeField.find("span label");
    if (myTarget.val() == "1 Low") {
      myLabels.css("color", "#0c850b");
    } else if (myTarget.val() == "2 Low-Medium") {
      myLabels.css("color", "#b7b700");
    } else if (myTarget.val() == "3 Medium") {
      myLabels.css("color", "Orange");
    } else if (myTarget.val() == "4 Medium-High") {
      myLabels.css("color", "##f5837b");
    } else if (myTarget.val() == "5 High") {
      myLabels.css("color", "red");
    }
  }
});

0 0

replied on March 14, 2024

Wow! That's a nice solution!

I had just barely caught and fixed the parens a few seconds before you replied, haha.

0 0

Question

Question

Change the color of all radio button options based on radio button variable re-used in later forms.

Replies

Sign in to reply to this post.