javascript to change a textbox colour
Good afternoon, all.
I'm looking to change the background colour and font colour of a textbox based on the value typed into this textbox.
This must be done via javascript as I'm not familiar with any other formats.
Any help will be greatly appreciated.
-
Hello,
This is how you can implement some JavaScript code to change the background color.
Example script:
function changeColors(internalName) {
//this function changes the colors based on a value
//using eFormHelper, we get the value of the control
eFormHelper.getFieldValue({ fieldId: internalName }, function(r) {
//if you only have one or 2 options, if/else works better than switch
//switch works better when you have a lot of possibilities
switch(r.data) {
//change out these cases to make sense for your application
//background-color is the property for the background of the text box
//color is the property for the foreground of the text box a.k.a the font
//colors may be used as rgb, hex, or keywords
case "christmas": $("#" + internalName).css({ 'background-color': 'rgb(0, 255, 0)', 'color': 'red' }); break;
case "halloween": $("#" + internalName).css({ 'background-color': 'orange', 'color': '#000000' }); break;
case "valentines": $("#" + internalName).css({ 'background-color': 'pink', 'color': 'red' }); break;
case "easter": $("#" + internalName).css({ 'background-color': 'yellow', 'color': 'blue' }); break;
default: $("#" + internalName).css({ 'background-color': 'white', 'color': 'black' }); break;
}
});
}Applying this code to the specific textbox in the advanced section of properties. This will indicate when the text box's value changes it will execute the JavaScript. See image below.
And it will produce at output. For example, see image below.
Let me know if this helps.
Kind regards,
Jason Wells
Please sign in to leave a comment.
Comments
2 comments