CODEWITHSUNDEEP
javascriptformssubmit
achal naskar
achal naskar

Reputation: 710

Remove disabled function of Submit button when condition fulfills

I have a form. Here in the submit button which is disabled, I have made the following function that when balance value will be greater than 10, it will remove its disabled function. My script is not working. Is there any way to remove the disabled function of submit button, when balance value will be greater than 10?

<script >
function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
  one = document.add_form.obalance.value;
  two = document.add_form.debit.value; 
  document.add_form.balance.value = (one * 1) - (two * 1);
}
function stopCalc(){
  clearInterval(interval);
}
</script>

My html form:

<html>
<form name="add_form" action="ebill.php" method="post" >
<input type="text" name="obalance" id="obal" value="" onFocus="startCalc();" 
onBlur="stopCalc();" >
<input type="text" name="debit" id="totl" value="" onFocus="startCalc();" 
onBlur="stopCalc();" />
<input type="text" name="balance"  id="totl" value=""  />
<input type="submit" id="submit" name="submit" disabled="disabled" />
</html>

Script to remove disabled attribute of Submit button:

<script >
setInterval(function () {
if ($('#balance').val() >= 10){

    $(":submit").removeAttr("disabled");
    }
else{
    $(":submit").attr("disabled", "disabled");
    alert('Your Balance is less than 10');
    }
}, 1);

</script>

Upvotes: 1

Views: 482

Answers (1)

user3114072
user3114072

Reputation:

(comments in the code itself — you'll also find below your code some "best practice advices" to avoid a lot of headhaches ;))

  function startCalc(){
    interval = setInterval("calc()",1);
  }
  function calc(){
    one = document.add_form.obalance.value;
    two = document.add_form.debit.value; 
    document.add_form.balance.value = (one * 1) - (two * 1);
  }
  function stopCalc(){
    clearInterval(interval);
  }

  setInterval(function () {
  /*************************************
           v----------- ID error (fixed)       */
  if ($('#tot2').val() >= 10){
      $(":submit").removeAttr("disabled");
      }
  else{
      $(":submit").attr("disabled", "disabled");
      // alert('Your Balance is less than 10');
      }
  }, 10); // 1 is too much?
input#submit[disabled] {
  background-color: red; color: white; opacity:.2;
}
input#submit:not(disabled) {
  background-color: green; color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
<input type="text" name="obalance" id="obal" value="" onFocus="startCalc();" 
onBlur="stopCalc();" >

<input type="text" name="debit" id="tot1" value="" onFocus="startCalc();" onBlur="stopCalc();" />
 <!--   ID error (fixed) -------------^              -->
   
<input type="text" name="balance"  id="tot2" value=""  />    <!--
<!--      ID error (fixed) -------------^              -->

<input type="submit" id="submit" name="submit" disabled="disabled" />

By the way, you should use jQuery or not. The use of jQuery for a bunch of code and pure DOM for another is REALLY errors prone.

In your code above for instance, document.add_form.balance and $('#tot2') address the same DOM Element, but their names are fully different, with no reason.

Hard to read, hard to debug, errors prone.

If your code works after document is ready, you should for example put your fields in variables with self-explanatory names:

let balanceField /* or whatever name you want */ = $('#balance') ;
let debitField  = $('#debit') ;
let totalField  = $('#total') ;

Then, in your code, you use these variables instead of hard value:

let one = balanceField.val() || 0 ;
let two = debitField.val()   || 0 ;
totalField.val( one + two ) ;

Or, shorter, still readable and expressive (but only if you don't need the one and two values further):

totalField.val( (balanceField.val()||0) + (debitField.val()||0) ) ;

and further:

if ( debitField.val() > 9 ) { ... }

Upvotes: 1

Related Questions