CODEWITHSUNDEEP
javascriptjquery
Utpal Sarkar
Utpal Sarkar

Reputation: 432

prevent button from max input jquery

I create three input fields which is a,b & c . a is a numeric input field and b & c are hidden input field and the c have a static value. a generating b input field's value something like when you input 1 on a, b value turn into 10, if you input 2 it generate b value=20 which is b.val()= a.val()*10 it's working fine . But I want to prevent the submit button when user don't type on a and input result b.val() cross the c.val() . I write a code but it's not working . Is I messing something? I can't see any error on console . Please suggest me :

$('#m-submit').prop('disabled',true);
var ainput= $('#a').keyup();
var binput= $('#c').val() >= $('#b').val();
if (ainput && binput) {
  $('#m-submit').prop('disabled', this.value == "" ? true : false);
}

<input type='number' name='a' id='a' />
<input type='hidden' value='' name='b' id='b' />
<input type='hidden' value='100' name='c' id='c' />
<button id='m-submit'>Submit</button>

Upvotes: 0

Views: 54

Answers (2)

Dij
Dij

Reputation: 9808

you need to attach a function to handle keyup event of #a, also you should use parseInt() if you want to compare input values numerically. something like this:

$('#m-submit').prop('disabled',true);

$('#a').on('keyup', function(){
  $('#b').val(parseInt($(this).val())*10);
  if($(this).val() && parseInt($('#b').val()) <= parseInt($('#c').val()))
    $('#m-submit').prop('disabled',false);
  else
    $('#m-submit').prop('disabled',true);
   
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' name='a' id='a' />
<input type='hidden' value='' name='b' id='b' />
<input type='hidden' value='100' name='c' id='c' />
<button id='m-submit'>Submit</button>

Upvotes: 0

ADyson
ADyson

Reputation: 61849

The use of the hidden fields seems like a bit of unnecessary indirection. Here's a simpler version, again assuming you want to handle the "keyup" event rather than trigger it.

$('#a').on('keyup', function() {
  var val = parseInt($(this).val()) * 10;
  if ($(this).val() && parseInt(val) <= 100)
    $('#m-submit').prop('disabled', false);
  else
    $('#m-submit').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' name='a' id='a' />
<button id='m-submit' disabled>Submit</button>

Upvotes: 1

Related Questions