CODEWITHSUNDEEP
javascripthtmlthymeleaf
krzysiekcr
krzysiekcr

Reputation: 13

How to set 'max' value in <input> tag in HTML?

Can I set 'max' value in

            <input type="number" step="10" min="10"
                   th:max=""
                   th:field="*{coins}" required>

with variable created in ?

        <script>
            var wallet = [[${session.student.wallet}]];
            var price = [[${item.itemCost}]];
            var lowerValue = Math.min(wallet, price);
        </script>

The problem is to assign to 'max' the smaller of the values visible in .

Upvotes: 0

Views: 1368

Answers (3)

Metroids
Metroids

Reputation: 20487

You can do this with just Thymeleaf.

<input type="number"
       step="10" min="10"
       th:max="${T(Math).max(session.student.wallet, item.itemCost)}"
       th:field="*{coins}"
       required>

Upvotes: 0

Cat
Cat

Reputation: 4246

If you give your input an id attribute like (<input id="my-input"...), then it should be as simple as:
document.getElementById("my-input").setAttribute("max", myCalculatedValue);

let
  wallet = 50.00,
  price = 42.00;
const myCalculatedValue = Math.min(wallet, price);

const myInput = document.getElementById("my-input");
myInput.setAttribute("max", myCalculatedValue);
<input id="my-input" type="number" step="10" min="10" />

Upvotes: 1

Marc
Marc

Reputation: 11633

//default the max to 99
document.getElementById("yourinput").max = 99;

// setMax gets triggered by the button's `onclick` attribute
function setMax() {
   let max = document.getElementById("yourmax").value;
   document.getElementById("yourinput").max = max;
}
<!-- Note that I gave your elements IDs so JS can reference them -->
Default <b>max=99</b> got set when page loaded. Try it below.<br/>
Set max here: <input id="yourmax" value="10"><br/>
Click this button to apply your NEW max: <button onclick="setMax()">Set Max</button></br>
Max gets set on this input: <input id="yourinput" type="number" min="0" style="width:50px;">

Upvotes: 0

Related Questions