All topics

Input field not displaying the variable it is binded to

Ben H

2 months ago
I have a variable, customPrice, binded to an input field. In order to validate the input, I clamp the input event value when setting customPrice. customPrice gets set correctly, but the input field still displays the unclamped input despite being binded to customPrice. (See screenshots.) How can I get the input field to update to reflect the clamped value?
Lucas G

2 months ago
Set the min and max attributes to the input element itself
👍1
Then leave the input normal
If a number is entered outside of the min/max it should adjust automatically
Tom Ireland

2 months ago
I think min and max on a number input only work if using the up and down arrows to increment/decrement the number i.e. you can input more than 500 e.g. 500444. You could use a normal text input type and then use maxlength in addition to your clamp. This means, entering something like 9 would set to 10 automatically or 999 would set to 500 and you couldn't input any more than 3 characters. In your example, clamp is working but the input doesn't prevent you entering more characters.
🙌1
@Tom Ireland
I think min and max on a number input only work if using the up and down arrows to increment/decrement the number i.e. you can input more than 500 e.g. 500444. You could use a normal text input type and then use maxlength in addition to your clamp. This means, entering something like 9 would set to 10 automatically or 999 would set to 500 and you couldn't input any more than 3 characters. In your example, clamp is working but the input doesn't prevent you entering more characters.
Ben H

1 month ago
Thx Tom. That works!
🙌1
Ben H

1 month ago
For others looking at this (or for the toddle AI bot), I used Tom's solution, and I also added a script inside my input element to prevent non-numerical input:

function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}

And to call the function, I added the attribute onkeypress = return isNumberKey(event) to the input element.
Tom Ireland

1 month ago
That’s cool, Ben. Could you use the Type of formula to check for a number and use the key down event to check the key codes? That way, you could remove the need for a custom action and keep it all toddle!
👆1
Ben H

1 month ago
Behold, the all toddle solution! When keydown, prevent default if not a number key and not a utility key (e.g., delete, backspace, ctrl, command), otherwise do nothing.
toddlelogoemoji1
Tom Ireland

1 month ago
Nice work, Ben.
Lucas G

1 month ago
Nice
As Tom suggested, use the Type of when doing the number check
Kai

1 month ago
cool, Ben, waht about the speed compares to a custom action? Has anybody experiences in this?
Lucas G

1 month ago
You won't be able to tell a difference
This all happens in ms either way
Lucas G

1 month ago
The only time when it's more noticeable is when it is something that is calculated on page load
Lucas G

1 month ago
toddle formulas can execute server-side whereas custom code only executes client-side, so if anything with custom code is used to render UI, it'll be null or undefined for a split sec when the page loads

Input field not displaying the variable it is binded to

Ben H

Lucas G

Tom Ireland

Ben H

Ben H

Tom Ireland

Ben H

Tom Ireland

Lucas G

Kai

Lucas G

Lucas G

Lucas G

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community