Fill input with max value on click

Question

I'm currently trying to find a way to fill the max value of an input according to the

max="@value"

Currently I'm using asp.net mvc, I'm getting data from a datatable and I render this information inside a html table where in my tr> /tr> I have a td> /td> that looks like this

 <td align="center"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" min="0" max="@monto.Trim()" value="" step="any" style="width: 100px" /></td>1

Can anyone tell me how to make a javascript function that automatically fills the max="" value inside a Html TableRow?

The problem is that each row has its unique max @value

In what context? If you have an element reference then you can get the attribute value by element.max if it's in an event handler then you could probably use event.currentTarget.max and so on — apokryfos
– apokryfos, Commented Nov 28, 2019 at 22:28
Replace oninput="setValueAttr(this)" with onclick="this.value=max". — Lain
– Lain, Commented Nov 28, 2019 at 22:28
I'm currently using oninput="setValueAttr(this)" on another script where I push into an array the rows that do have a value in the input in order to post it with AJAX function setValueAttr(el) {el.setAttribute('value', el.value)} — IceeFrog
– IceeFrog, Commented Nov 28, 2019 at 22:31
@apokryfos can you give me an example with an event handler? I'm currently looking for a way to do it this way, will adding a button on the same <td> catch the event handler? — IceeFrog
– IceeFrog, Commented Nov 28, 2019 at 22:33
Well I do not know what the idea behind you code actually is, but onclick is not the same as oninput. So if you want to react on click, like the title suggests, use onclick. — Lain
– Lain, Commented Nov 28, 2019 at 22:33

apokryfos · Accepted Answer · 2019-11-28 22:46:03Z

1

Assume the following HTML:

<td align="center">
     <input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" min="0" max="@monto.Trim()" value="" step="any" style="width: 100px" />
     <button class="set-max">Max value</button>
</td>

You can add an event listener on the button via JavaScript e.g. put this code in the bottom of your table or in the bottom of the <body> tag.

<script>
var buttons = document.querySelectorAll('.set-max'); 
buttons.forEach(function (button) {
   button.addEventListener('click', function (event) {
       var input = event.currentTarget.parentElement.querySelector('input[type="number"]');
       input.value = input.max;
   });
};
<script>

If the button ends up somewhere else you'd need to adjust the event listener to find the actual target element by navigating through the DOM hierarchy

answered Nov 28, 2019 at 22:46

apokryfos

40.9k11 gold badges85 silver badges128 bronze badges

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

1 Comment

IceeFrog Over a year ago

Yay thanks for the explanation, totally helped me out thanks sir!

Collectives™ on Stack Overflow

Fill input with max value on click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related