SIGN UP

Update an image somewhere on the page depending of a radio button choice

By: Chris Adams | Asked: 07/22/2021
Forums › Category: Code Help › Update an image somewhere on the page depending of a radio button choice
1 Vote Up Vote Down
Chris AdamsChris Adams asked 3 years ago
This question was asked earlier today on the Formidable Masterminds Facebook group:  
I would like to create an event listener to update an image somewhere on the page (but out of the form tags) depending of a radio button choice.   I know it is possible with JQuery but I am a noob on Javascript. Does someone could help me please?
  More specifically the user wanted to add a class to an image when a radio button option was selected and added:   If value A is selected > myClass = classA, if it's value B > myClass = classB   The solution is below.
1 Answers
0 Vote Up Vote Down
Chris AdamsChris Adams answered 3 years ago
This jQuery snippet should do it: 
<script type="text/javascript">
jQuery(document).ready(function($) {
$('input[name="item_meta[2127]"]:radio').click(function(){
switch($(this).val()) {
case "Option 1":
$("#your-image-ID").addClass("classA");
$("#your-image-ID").removeClass("classB");
break;
case "Option 2":
$("#your-image-ID").addClass("classB");
$("#your-image-ID").removeClass("classA");
break;
}
});
});
</script>
  • Change 2127 to your radio button field ID
  • Change "Option 1" and "Option 2" to your radio button options
  • Change "#your-image-ID" to your image ID or class
  • Change "classA" and "classB" to the classes you want added / removed when the options are selected.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right