Change element with jQuery when another element is changed-CodePudding

I have a form, and want to change the background color of the submit button whenever all form inputs are filled out. I've started testing this with just 1 input field, but the button color doesn't change in real time as I add content to the input. How can I adjust my code so that as soon as I type anything in the input box, it recognizes it and changes the button color in real time?

jQuery(function($){
   
    var teamname = $('#acff-post-acfef_2207cc4_title').val();
        
    if(teamname !== ''){
        $('.acff-submit-button').css('background-color', 'red');
    }
    
});

CodePudding user response：

You have to listen to change event on the input field in order to check the value every time it changes. What you are doing right now is checking the value of the field when the page loads.

jQuery(function($){
   
    $('#acff-post-acfef_2207cc4_title').change(() => {
        if ($(this).val() !== '') { // check input value
            $('.acff-submit-button').css('background-color', 'red');
        }
    })
            
});