Input field not displaying the variable it is binded to

  • benjamin.h-1295232013611303023

    Ben H

    6 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?
    1295232014051446847-
    1295232014965936169-
    1295232015578431569-
  • lucasg-1295260788218400768

    Lucas G

    6 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
  • tomthebigtree-1295264167275663360

    Tom Ireland

    6 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
  • benjamin.h-1295436014466367654

    Ben H

    6 months ago

    Thx Tom. That works!
    🙌1
  • benjamin.h-1295442284518834286

    Ben H

    6 months 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.
  • tomthebigtree-1295444078615466097

    Tom Ireland

    6 months 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
  • benjamin.h-1295456601549045872

    Ben H

    6 months 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.
    1295456600831819817-
    1295456601230147687-
    toddlelogoemoji1
  • tomthebigtree-1295486424384147476

    Tom Ireland

    6 months ago

    Nice work, Ben.
  • lucasg-1295490522953285744

    Lucas G

    6 months ago

    Nice
  • As Tom suggested, use the Type of when doing the number check
  • magical_fawn_52793-1295496913881403472

    Kai

    6 months ago

    cool, Ben, waht about the speed compares to a custom action? Has anybody experiences in this?
  • lucasg-1295507936847724656

    Lucas G

    6 months ago

    You won't be able to tell a difference
  • This all happens in ms either way
  • lucasg-1295508260715106385

    Lucas G

    6 months ago

    The only time when it's more noticeable is when it is something that is calculated on page load
  • lucasg-1295508693311295519

    Lucas G

    6 months 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