How do I run a function and re-render a field each time an input field value is changed?

  • 1
  • Question
  • Updated 7 months ago
  • In Progress
I am assigning this custom snippet to a currency field. My objective is to place commas in the appropriate places as the user is typing. But for now the code is trying to replace the value of 2000 into the field whenever a character is entered into the input.

There are two issues I am having with the code below:

  1. The change event seems to only activate after I click out of the field. I would actually like this action to re-evaluate the fields value each time a character is entered or deleted.
  2. The field is added over and over and over again each time the function is run rather than updating the value and refreshing the existing field.
Here is my broken code:

var $ = skuid.$;
var field = arguments[0];
var value = arguments[1];
model = field.model, row=field.row, $=skuid.$;

field.element.change(function(value){
   value = 2000;
   skuid.ui.fieldRenderers[field.metadata.displaytype]['edit'](field,value);
});

skuid.ui.fieldRenderers[field.metadata.displaytype]['edit'](field,value);
Photo of Joseph Ucuzoglu

Joseph Ucuzoglu

  • 1,096 Points 1k badge 2x thumb

Posted 9 months ago

  • 1
Photo of Luzie Baumgart

Luzie Baumgart, Official Rep

  • 4,030 Points 4k badge 2x thumb
Hi Joseph, we were wondering if you could solve this already or still need assistance? Please take a look at this: https://stackoverflow.com/questions/2632359/can-jquery-add-commas-while-user-typing-numbers
You can see an example in the link and add the following code: $(field.element).find(“input”).addClass(“number”);