CODEWITHSUNDEEP
html
Al Bassam
Al Bassam

Reputation: 9

Set the min value of input type number to value of other input type number

I have this HTML code

<form method="post" action="cashier.php" enctype="form-data/multipart">    
    <input required id="amount" type="number" min="0" class="form-control" name="txtamount" placeholder="Enter Payment Here..." />
    <input required id="cash" type="number" min="document.getElementById('amount').value" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
    <input type="submit" class="btn btn-primary pull-right" name="btnenroll" value="Done" />
</form>

If I type 1000 on id="amount", the id="cash" min will be 1000.

But it doesn't work.

Upvotes: 0

Views: 8596

Answers (4)

Dragonmon
Dragonmon

Reputation: 114

I don't think you can put javascript in min, and also you have a pair of double quote in another pair of double quote, which will break the the tag (You can inspect element and you will figure out.)

So the idea is when the value of amount element change, we change cash's min value. So we can add a event listener to amount element. Whenever it is changed, set the min for cash element. Here is a working sample code:

<form method="post" action="cashier.php" enctype="form-data/multipart">    
    <input required id="amount" type="number" class="form-control" name="txtamount" placeholder="Enter Payment Here..." />
    <input required id="cash" type="number" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
</form>

<script>
    function setMin() {
        var amount = document.getElementById("amount");
        var cash = document.getElementById("cash");
        cash.min = amount.value;
    }

    var trigger = document.getElementById("amount");
    trigger.addEventListener("change", setMin, false);
</script>

As you can see, I removed your js in html and add a event listener. Hope this will help.

Upvotes: 0

whoami
whoami

Reputation: 1627

If you are using jQuery, use the below,

$("#amount").change(function() {
  $("#cash").attr('min',$("#amount").val());
});

Refer - https://api.jquery.com/change/

Upvotes: 0

Joe
Joe

Reputation: 28326

The most straightforward way is to add an onchange handler to the payment input, such as:

<form method="post" action="cashier.php" enctype="form-data/multipart">    
    <input required id="amount" type="number" min="0" class="form-control" name="txtamount" placeholder="Enter Payment Here..." 
        onchange="document.getElementById('cash').min=this.value;"/>
    <input required id="cash" type="number" min="document.getElementById('amount').value" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
    <input type="submit" class="btn btn-primary pull-right" name="btnenroll" value="Done" />
</form>

This gets you the functionality you are looking for without needing to include a third party library like jQuery.

Upvotes: 4

Arun
Arun

Reputation: 760

In this case you should use Jquery onchange or keypress

 $("#cash").attr({
       "min" : $("#amount").val()
 });

Upvotes: 1

Related Questions