CODEWITHSUNDEEP
javascripthtmljquery
woofMaranon
woofMaranon

Reputation: 144

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

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 :):)

Upvotes: 1

Views: 276

Answers (4)

S.Serpooshan
S.Serpooshan

Reputation: 7440

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>

Upvotes: 1

Dan Knights
Dan Knights

Reputation: 8368

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/

Upvotes: 0

Leo Castellanos
Leo Castellanos

Reputation: 54

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/>

Upvotes: 2

Han
Han

Reputation: 361

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"  />

Upvotes: 0

Related Questions