Source code for https://formidable=masterminds.com/change-input-background-color-based-on-other-field-value/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style type="text/css"> | |
.color_red { | |
background-color: red !important; | |
color: #fff !important; | |
} | |
.color_yellow { | |
background-color: yellow !important; | |
color: #000 !important; | |
} | |
.color_green { | |
background-color: green !important; | |
color: #fff !important; | |
} | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
jQuery(document).ready(function($){ | |
"use strict"; | |
/* replace llopn with the number field's key in the field's Advanced section */ | |
$("#field_llopn").on("change", function () { | |
var num_value = $(this).val(); | |
/* first remove any color classes that have already been applied | |
* change h6ub8 to the other field's key in the field's Advanced section | |
*/ | |
$("#field_h6ub8").removeClass("color_red"); | |
$("#field_h6ub8").removeClass("color_yellow"); | |
$("#field_h6ub8").removeClass("color_green"); | |
/* set the new color class */ | |
switch (num_value) { | |
case "1" : | |
$("#field_h6ub8").addClass("color_red"); | |
break; | |
case "2" : | |
$("#field_h6ub8").addClass("color_yellow"); | |
break; | |
default : | |
$("#field_h6ub8").addClass("color_green"); | |
} | |
}); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment