Automatic comma's on a configurable list widget

Hello,

Is there a way for the configurable list widget, to have an automated comma when someone typs in 2 numbers?

(Screenshot for example) The left one is correct. The right one is how it is now.

Thanks in advance,

Owen

I don't think it is possible to format the number using only CSS on a configurable list. Please allow me some time to check on this and get back to you. 

Thank you for your patience.

Thank you for your answer,

Take your time.

-Owen

I've checked the possibility on masking the input field on a configurable list. Unfortunately, it seems that it is not possible at the moment. I see that there was a feature request sent to our backend team and see an update that it cannot be implemented. On the other hand, I see that there was an idea submitted by someone to CSS workgroup for implementing number formatting with CSS. 

https://wiki.csswg.org/ideas/content-formatting

Please be noted that it was just an idea which may or may not be implemented with CSS and it is completely out of our scope.

Thanks!

Hello,

Well that's a pity, but as always. Thank you for looking it up!

-Owen

On behalf of my colleague Kiran, you're welcome.  Let us know if you have any other issues, we are here to assist you as much as we can. Thank you.

Hi, I'm coming back on this question because I still need the outcome if that's possible, but i thought to myself, can this be possible with a matrix field?

Thanks in advance,

Owen

Hello Owen,

I'm not sure if the masking input using text fields without using a configurable list/matrix field would work for you. A text box can be masked to input in the format that we need to set by using Input Mask property. 

Also, you may want to take a look at our Masked Input widget. Since you want to have multiple fields on the form, it is also required to add multiple fields with masked input text box or the widget.

If you need the masking to be done on matrix field, it may be achieved by adding some Javascript code. Since it is not allowed to inject Javascript codes to JotForm due to security issues, it is required to download the source code of the form to modify. You'll need to embed the modified code directly on your webpages. Let me see if I can work on it and get back to you later with relevant information.

Thank you!

Please take a look at the following form with added jquery mask plugin and validated the matrix cells. 

https://shots.jotform.com/kiran/shared/712408/matrixinputmask.html

The following code is added the form source code and hosted the file separately. 

<script type="text/javascript" src="https://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js"></script>

<script type="text/javascript">

var j = jQuery.noConflict();

  j("#input_140_0_0").mask("9,9");

  j("#input_140_0_1").mask("9,9");

  j("#input_140_0_2").mask("9,9");

  j("#input_140_0_3").mask("9,9");

  j("#input_140_1_0").mask("9,9");

  j("#input_140_1_1").mask("9,9");

  j("#input_140_1_2").mask("9,9");

  j("#input_140_1_3").mask("9,9");

</script>

Let us know if that works for you. Thanks!

Yes, that's almost perfect. But there is one problem with this. the numbers go up to 12.

So if I typ in 12 I get 1.2.  

Do you know what can solve this problem?

Thanks for your hard work!

Owen

Hi,

Can you try this code to set the masking to two digits instead of one?

<script type="text/javascript" src="https://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js"></script>

<script type="text/javascript">

var j = jQuery.noConflict();

  j("#input_140_0_0").mask("99,99");

  j("#input_140_0_1").mask("99,99");

  j("#input_140_0_2").mask("99,99");

  j("#input_140_0_3").mask("99,99");

  j("#input_140_1_0").mask("99,99");

  j("#input_140_1_1").mask("99,99");

  j("#input_140_1_2").mask("99,99");

  j("#input_140_1_3").mask("99,99");

</script>

Do let us know if you need further assistance,
Regards.

I'm sorry but where do I put this code into?

Thanks

As mentioned by my colleague, Kiran, the following code is added in the form source code and hosted the file separately. You will need to embed/host your form on your website using the form source code to be able to add the script mentioned. To get the full source code of your form, just follow the instructions provided in this article: How to get the Full Source Code of your Form.

Thanks for the help guys!

Owen

On behalf of my colleague, you are welcome. If you have any other question, please feel free to contact us again. Regards.