0

Below you'll find a simplified example of the code I am using and what I am trying to accomplish.
I'm tracking multiple variables with jQuery that need to call a function on a certain event. The problem is that I don't manage to use only that variable that just changed.

In the HTML body section I have a couple of input fields where people can fill in a number. That number should be formatted with commas as a thousand seperator. Thanks to Elias Zamaria I found an good solution for this (https://stackoverflow.com/a/2901298/7327579). Now I want this implemented with jQuery so I can track all of my variables that will get number inputs at once. 

<html>
  <title></title>
  <head>

In the head of the html I insert my script to track my variables:

    <script language="javascript">
      var Currency = function() {  
        this.currencyType = $("#businessAuthorisation, #businessIncome, #entityIncome, #entityAuthorisation);

The function that formats the numbers and should only get the current number from the current variable that is being changed:

          this.formatCurrency = function(x) {
              var parts = x.toString().split(".");
              parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              return parts.join(".");
          };
      };

Tracking starts and on the keyUp event my function is called. Only the current variable should be a parameter of the called function.

      $(document).ready(function() {
        var currency = new Currency();
        currency.currencyType.keyup(function() {
          currency.formatCurrency(this);
        });
      });
    </script>
  </head>

Here below are the concerning input fields in my form:

  <body>
    <form>
      <table>
        <tr>
          <td><input type="number" name="entityAuthorisation" id="entityAuthorisation" value="<%=entityAuthorisation%>></td>
        </tr>       
        <tr>
          <td><input type="number" name="businessAuthorisation" id="businessAuthorisation" value="<%=businessAuthorisation%>"></td>
        </tr>
        <tr>
          <td><input type="number" name="entityIncome" id="entityIncome" value="<%=entityIncome%>"></td>
        </tr>       
        <tr>
          <td><input type="number" name="businessIncome" id="businessIncome" value="<%=businessIncome%>"></td>
        </tr>
      </table>
    </form>
  </body>
</html>

How can I make sure that that the function only applies to the current element that caused the event?

Community
  • 1
  • 1
sRas091
  • 3
  • 2
  • 1
    Do you mean you want to know on which element actual event was triggered? Like, if I click on #entityAuthorisation element, you should get #entityAuthorisation element in jQuery? If you want this, you can use $(event.target). This gives exact element where click happened – Nitesh Dec 22 '16 at 08:26
  • In this case it is more like working with predefined variables that (in this case) get numeric input and depending on which variable that just received some numeric input a function is called with that specific variable as a parameter of that funcion. So I know all the elements that will be used in the future, but only want that element (belonging to the defined group of elements) that is being used currently. The answer of Barmar below is perfect for my question, but I appreciate the suggestion and find it interesting to try something in that way the next time, since it makes it more dynamic. – sRas091 Dec 22 '16 at 11:33

1 Answers1

1

In a jQuery event handler, this refers to the element that the event was triggered on. And you need to use .value to get the value of an input. So you should write:

  $(document).ready(function() {
    var currency = new Currency();
    currency.currencyType.keyup(function() {
      this.value = currency.formatCurrency(this.value);
    });
  });
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Works like a charm! Obvious when seeing it like this, but just couldn't get there. Thank you for the very quick response! – sRas091 Dec 22 '16 at 11:15