Change Input Background Color Based on Other Field Value

Question:

How do I change the background of a field based on another field's value?  Example, if Num field = 1 then change the other field's background to red?  

Michael Thomas, Formidable slack community member

Answer:

This is best handled by jQuery so you can see the result in real time. Essentially what you need to do is watch the number field’s change event and when the value changes, you change the target field's CSS class based on the number field value.

Here's an example form that demonstrates the functionality. Change the numeric field's value to either 1, 2, or 3. Based on your choice, the text field's background color will change to red, yellow, or green.

Demo Form

jQuery

CSS

Why Field Keys Instead of IDs

To gain a fuller understanding of why we use field keys in custom code rather than field IDs, please see this article: Writing Transportable Code: Keys vs. IDs