input widget restricted to numbers and max value as 100

I am working on Reactive application

I need to develop a input widget which accepts only number (no negative values and no decimal) and the max value of the field should be 100. if user wants to enter more than 100 then it should not allow user to enter more than 100. and if wants to highlight any number and change then it should allow.

I have created the following java script for this but I m facing one issue that if I will highlight any number and then enter any number then it will not allow me to enter number also.

this script is added on 'onkeypress' event and widget is of number type

if(event.charCode >= 48 && event.charCode <= 57 || event.charCode >= 96 && event.charCode <= 105)

   {

      var val = document.getElementById($parameters.TextboxId).value;

      var len = val.length;

      if(len < 3)

      {

          var newval = val + String.fromCharCode(event.charCode);

          if(newval <= 100)

            return true;

        }

      else

          event.preventDefault();

   }

else

event.preventDefault();


Please tell me how can I solve this or suggest me some other way which can be done.

Hi,

Did you try to use Input mask component? 

https://www.outsystems.com/forge/component-versions/7819

Maybe you can solve your problem with that and don't need to use dedicated JS.


Hope this can help.


Best regards,

Ricardo Pereira

Hi Ricardo,

Can you please explain a bit how can input mask helps in this scenario?

Regards,

Avishi

Hi,

You can use the simple way Regex to validate the input field.

^0*(?:[1-9][0-9]?|100)$

https://regex101.com/r/gT8wK5/1

Good Luck

Amit

Hi Avishi Aggarwal,

According to your requirement. I have done the sample and attached the URL here

But I need some clarification regarding this "if wants to highlight any number and change then it should allow." that you have mentioned

Regards,

Ellakkiya.s

Hi Ellakkiya,

seems your sample is working fine. can you please provide the procedure so that I can try


Regars,

Avishi Aggarwal

Hi Avishi Aggarwal,

I have uploaded the oml here.

If any queries, pls let me know. 


Regards,

Ellakkiya.S

ReactivetestappEllak.oml

Hi Ellakkiya,

I hope using this, it will not create any hinderance in calculation, right?

During calulation also, it will take the same value which we enter.

Regars,

Avishi Aggarwal

Hi Ellakkiya,

It is working only when no calculation is concerned.

During calculation, it is throwing error screen and showing "Cannot read property 'value' of null".

I need to apply this during calculations. when screen loads there will be some value in this input widget already and when I make that value as 0 it shows error. and if value is already there in the box then on first time click of backspace it doesn't erase the value. I have to click twice.

Regars,

Avishi Aggarwal

Hi Avishi Aggarwal,

"Cannot read property 'value' of null" represents ID of the input widget is not accessed properly.Breif explanation is here

Can  you replicate your scenario in sample oml?. So that i can able to resolve it.

Regards,

Ellakkiya.S


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.