prevent button from max input jquery

Question

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>

var ainput= $('#a').keyup(); Why are you triggering a keyup event manually? Did you mean to try and handle this event? I'm also not certain that it will return a value to put into ainput. Your code seems out of context. If someone took this code exactly as it is, it would never work because the code is seemingly running before the user can input anything. I presume this is just some small parts of your real code. Some context would be useful as to when this code is actually getting executed. — ADyson
– ADyson, Commented Sep 18, 2017 at 18:34
@ADyson Yes it's small parts of my real code . my real code is too long — Utpal Sarkar
– Utpal Sarkar, Commented Sep 18, 2017 at 18:39
That's fine, but some context would be more useful, you don't need to post the entire thing in order to create a reproducible, runnable example. Anyway I suspect the answer just posted has probably figured it out. — ADyson
– ADyson, Commented Sep 18, 2017 at 18:40

ADyson · Accepted Answer · 2017-09-18 18:46:22Z

1

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>

answered Sep 18, 2017 at 18:46

ADyson

62.9k16 gold badges88 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dij · Accepted Answer · 2017-09-18 18:47:06Z

0

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>

edited Sep 18, 2017 at 18:47

answered Sep 18, 2017 at 18:38

Dij

9,8184 gold badges21 silver badges35 bronze badges

Collectives™ on Stack Overflow

prevent button from max input jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related