Dynamically Color Submit Button

[futurist]

Hi yall,

 

I have a submission with a calculated value and a text field. I want to compare the value of these two fields - if the text field is greater than the calculated value, I want the color of the submit button to change. I was able to achieve this with JavaScript:

 

<script>

document.addEventListener('DataPageReady', function (event) {

var field1 = document.querySelector("#InsertRecordField1")
var calcfield = document.querySelector("input[name='cbParamVirtual1']")

field1.addEventListener('keyup', function (evt) {
if((Number(field1.value) > Number(calcfield.value))){
document.querySelector(".cbSubmitButton").style.background = "red";
}else{
document.querySelector(".cbSubmitButton").style.background = "blue";
}
});

});

</script>

 

Make sure you replace all instances of "Field1" with the name of the text field, and "Virtual1" with your corresponding virtual field with the calc value. Lastly, change the colors to your liking - replace "red" with the color you want your submit button to have if the text field is greater than the calc value, and "blue" with the color  you want your submit button to have if the text field is lessthan the calc value.