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?
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?
0

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.
0
RobOwner (Aidellio)Commented:
Can you post the form please?  Might be something in there that I'm not seeing with my demo.
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

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...
0
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
0
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

0
digitalwiseAuthor Commented:
Yep - stupid me!   Helps to move the jquery to the bottom of the page!
0
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.
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.