asked on

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

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

digitalwise

ASKER

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.

Rob

Can you post the form please? Might be something in there that I'm not seeing with my demo.

digitalwise

ASKER

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

Rob

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

digitalwise

ASKER

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

digitalwise

ASKER

Yep - stupid me! Helps to move the jquery to the bottom of the page!

Rob

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.