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

Question

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.

You can't have dynamic value in min attribute in pure HTML. You'll need a JS (and possibly a library) for this. — Pavlo
– Pavlo, Commented Sep 21, 2015 at 12:10
min and max attributes can fill only with a number or a date depending the type. Maybe you are interesting in HTML5 constraint validation w3.org/TR/2011/WD-html5-20110525/… — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Sep 21, 2015 at 12:13

Joe · Accepted Answer · 2015-09-21 12:16:29Z

4

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.

answered Sep 21, 2015 at 12:16

Joe

29k4 gold badges25 silver badges50 bronze badges

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

Comments

Marcos Pérez Gude · Accepted Answer · 2015-09-21 12:11:57Z

1

In this case you should use Jquery onchange or keypress

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

edited Sep 21, 2015 at 12:11

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

answered Sep 21, 2015 at 12:11

Arun

7605 silver badges12 bronze badges

Comments

whoami · Accepted Answer · 2015-09-21 12:16:52Z

0

If you are using jQuery, use the below,

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

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

edited Sep 21, 2015 at 12:16

answered Sep 21, 2015 at 12:11

whoami

1,6571 gold badge24 silver badges29 bronze badges

2 Comments

Pavlo Over a year ago

keypress? What about copy-pasting?

whoami Over a year ago

@Pavlo - changed to change

Dragonmon · Accepted Answer · 2015-09-21 12:24:12Z

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.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related