How to limit the input based on the value of another input using javascript

Question

Html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
     Paid Balance</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control"  />
        </div>
        
        <div class="col-md-2" >
     Balance</strong>: <input type="text" name="balance" id="balance" class="form-control"  value="200" readonly/>
        </div>

Hello, Can anyone help me with this problem. How to limit the input based on the value of another input using javascript . For Example the Value of Balance Input is 200 so that the possible input in PaidBalance is within 0-200 only.

Sorry, I'm just a student. Thanks :):)

Leo Castellanos · Accepted Answer · 2020-04-22 08:36:10Z

2

Something like this?

$("#paidbalance").keyup(()=>{
  const balance = parseFloat($("#balance").val())
  const paidBalance = parseFloat($("#paidbalance").val())
  
  if( paidBalance > balance)
    $("#paidbalance").val(balance)
  else if(paidBalance < 0)
    $("#paidbalance").val(0)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Paid Balance
</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control"  />
        
Balance
</strong>: <input type="text" name="balance" id="balance" class="form-control"  value="200"   readonly/>

answered Apr 22, 2020 at 8:36

Leo Castellanos

544 bronze badges

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

Comments

S.Serpooshan · Accepted Answer · 2020-04-22 09:17:40Z

This is with pure javascript without jquery. Also, note that the accepted answer doesn't work if user paste some value with mouse right-click: paste option.

function f1()
{
  var max = Number(document.getElementById("balance").value);
  var paid = document.getElementById("paidbalance");
  var v = Number(paid.value);
  //if(isNaN(v)) {...} //input is not a number
  if(v>max) {
    paid.focus(); //to keep focus on input
    paid.value=max; //you may comment out this line to don't override value
  }
}

<div class="col-md-2">
     Paid Balance</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control"  oninput="f1()" />
</div>
        
<div class="col-md-2" >
     Balance</strong>: <input type="text" name="balance" id="balance" class="form-control"  value="200"  />
</div>

Han · Accepted Answer · 2020-04-22 08:28:17Z

0

You might wanna change the type to number in this case and add max property in input. If the value of balance Input is different every time. You might considering assign it to a variable and pass it to the max property

 Paid Balance</strong>: 
<input type="number" name="paidbalance" id="paidbalance" max="200" class="form-control"  />

answered Apr 22, 2020 at 8:28

Han

3611 silver badge6 bronze badges

Comments

Dan Knights · Accepted Answer · 2020-04-22 08:36:36Z

0

Change the input to type="number" and add jQuery like this:

var balance = $('#balance')
var paidBalance = $('#paidbalance')

paidBalance[0].setAttribute('max', balance.val())

Example: https://jsfiddle.net/Daniel_Knights/t4hb0z7p/8/

answered Apr 22, 2020 at 8:36

Dan Knights

8,4184 gold badges28 silver badges55 bronze badges

Collectives™ on Stack Overflow

How to limit the input based on the value of another input using javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related