on Change trigger not working

The following code works great on document load but it doesn't work if the conditions are satisfied by making changes on the form.   What am I missing?

$(document).ready(requiredLimited);
$('.requireditems').on('change', requiredLimited);
         
		 function requiredLimited() {
		  if ($("#appsource").val() != '' && $("#etranstype").val() != '' && $("#requestedclosedate").val() != '' && $("#maturitydate").val() != '' && $("#propertyname").val() != '' && $("#remsid").val() != '' && $("#unit236preserved").val() != '' && $("#FHANumber").val() != '' && $("#LoanType").val() != '') {
              $("#Reviewer1").removeAttr("disabled");   
			  $("#Reviewer2").removeAttr("disabled");    
          }
     
	 else {              
              $("#Reviewer1").attr("disabled", "disabled");  
			  $("#Reviewer2").attr("disabled", "disabled");  
          } 
		
		 }

Open in new window

digitalwiseAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
Works ok for me... here's a demo: https://jsbin.com/novulu/edit?html,js,output

The "change" event isn't triggered until that control loses focus.  Try the keyup event as well (assuming text input)

What browser are you testing in?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
digitalwiseAuthor Commented:
They are a combination of select boxes and text fields.   I had all of the triggers and that didn't help so I just did the change.    It is the select boxes I think.
RobOwner (Aidellio)Commented:
Can you post the form please?  Might be something in there that I'm not seeing with my demo.
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

digitalwiseAuthor Commented:
It is a huge form but I clearly have something off because I changed your fiddle around to have select boxes, etc and it still worked.    I will play around with it and see what I am missing!   I thought it was because I was using <cfinput instead of <input (it is a coldfusion app) but changing that out didn't help...
RobOwner (Aidellio)Commented:
Yeah I also added in select boxes and had it working so looks like it's your form. if you post it I can check the markup is valid
digitalwiseAuthor Commented:
So I just copied what you had and it doesn't work for me locally...  This has gotta be something just stupid!

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" >$(document).ready(requiredLimited);
$('.requireditems').on('change keyup', requiredLimited);

function requiredLimited() {
  if ($("#appsource").val() !== '' && $("#etranstype").val() !== '' && $("#requestedclosedate").val() !== '' && $("#maturitydate").val() !== '' && $("#propertyname").val() !== '' && $("#remsid").val() !== '' && $("#unit236preserved").val() !== '' && $("#FHANumber").val() !== '' && $("#LoanType").val() !== '') {
    $("#Reviewer1").removeAttr("disabled");   
    $("#Reviewer2").removeAttr("disabled");    
  }

  else {              
    $("#Reviewer1").attr("disabled", "disabled");  
    $("#Reviewer2").attr("disabled", "disabled");  
  } 

}
</script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<form action="">
  <input type="text" class="requireditems" id="appsource" value="9"/>
  <input type="text" class="requireditems" id="etranstype" value="9"/>
  <input type="text" class="requireditems" id="requestedclosedate" value="9"/>
  <input type="text" class="requireditems" id="maturitydate" value="9"/>
  <input type="text" class="requireditems" id="propertyname" value="9"/>
  <input type="text" class="requireditems" id="remsid" value="9"/>
  <input type="text" class="requireditems" id="unit236preserved" value="9"/>
  <input type="text" class="requireditems" id="FHANumber" value="9"/>
  <select class="requireditems" id="LoanType">
    <option>1</option>
  </select>
  <button id="Reviewer1" disabled>Preview</button>
  <button id="Reviewer2" disabled>Submit</button>
</form>
</body>
</html>

Open in new window

digitalwiseAuthor Commented:
Yep - stupid me!   Helps to move the jquery to the bottom of the page!
RobOwner (Aidellio)Commented:
ah yes... you can have it in the head or body but if it's in the body then you need to put it at the end but BEFORE any other javascript.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.