this is my javascript which works for single input fields but I want it to work for multiple input.
here if I try to insert value for input class=adv more than fixed input value of class=full it won’t allow
var $full = $('[class=full]'); var $adv = $('[class=adv]'); $adv.on('keyup keydown', function(e) { var fullPay = parseInt($full.val(), 10); var advPay = parseInt($adv.val(), 10); //tell the parser it is base 10 if (advPay > fullPay && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $adv.val(''); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" name="full" class="full" value="5"> <input type="number" name="adv" class="adv" />
Advertisement
Answer
The effective line:
$('[class=full]').val()
will only take the first element with class “full”.
You need to use relative DOM navigation inside the handler, eg:
$(this).prev().val()
Similar for $adv.val()
, use $(this).val()
and $(this).val('')
to clear the current input.
You can also use input
event which will catch more events, such as paste with the mouse.
$('[class=adv]').on('input', function(e) { var fullPay = parseInt($(this).prev().val(), 10); var advPay = parseInt($(this).val(), 10); if (advPay > fullPay && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $(this).val(''); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" name="full" class="full" value="5"> <input type="number" name="adv" class="adv" /> <br/> <input type="number" name="full" class="full" value="55"> <input type="number" name="adv" class="adv" /> <br/> <input type="number" name="full" class="full" value="555"> <input type="number" name="adv" class="adv" />
Using .next()
or .prev()
will mean your html is brittle (any minor changes will break the js) – a better solution would be to wrap each pair:
$('[class=adv]').on('input', function(e) { var fullPay = parseInt($(this).closest(".inputgroup").find(".full").val(), 10); var advPay = parseInt($(this).val(), 10); if (advPay > fullPay && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $(this).val(''); } });
.inputgroup { padding:5px 0 5px 0; border-bottom: 1px solid #CCC; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='inputgroup'> <input type="number" name="full" class="full" value="5"> <input type="number" name="adv" class="adv" /> </div> <div class='inputgroup'> <input type="number" name="full" class="full" value="55"> <input type="number" name="adv" class="adv" /> </div> <div class='inputgroup'> <input type="number" name="full" class="full" value="555"> <input type="number" name="adv" class="adv" /> </div>