Question

For some reason Im unable to get the submit button below to “re-enable” once it has been disabled. Basically when the user puts in a non-numeric I want to disable the button and then reenable the button once a numeric value has been entered. Im still working on the entire validation process (and I do realize there is a plugin) but am still learning JQuery and for now I’d like some assistance in figuring out why the button is not re-enabling at the moment. Here is the code.

<style type="text/css">
.focusField{
   border:solid 2px red;
   background:pink;
   color:#000;
}
</style>

<script>

 function isNumber(n) {   
  return !isNaN(parseFloat(n)) && isFinite(n); 
 }

 function validateAmount(curObj) {
  var original_val = curObj.value;
  var current_amt = parseFloat(curObj.value); 
  $(curObj).val(current_amt.toFixed(2));
  if(!isNumber($(curObj).val()))
  {
   $(curObj).addClass("focusField");
   $(curObj).val(original_val);
   $('.toggleButton').attr('disabled','disabled');
  }
  else
  {
     $(curObj).removeClass("focusField");
     $('.toggleButton').removeAttr('disabled');   
  }
 }

 $(function() {  
  $(".formatted-number-input").blur(function() {
   validateAmount(this);
  })
 }); 
 </script>

<form name="invoice_form" id="invoice_form" action="index.cfm" method="post">
<input name="charge_amount_1" id="charge_amount_1"  type="text" class="formatted-number-input"  />
<input name="go" id="go"  type="submit" value="Submit Adjustment" class="toggleButton"  />
</form>

Answer 1

Replace removeAttr('disabled') with .prop('disabled', false).
If you’re using jQuery version 1.6 or lower, use .attr('disabled', false), instead.

Links:

• .attr
• .prop (since version 1.6)