CODEWITHSUNDEEP
javascriptjqueryhtmlplugins
bigasif
bigasif

Reputation: 11

jQuery AutoNumeric not formatting multiple fields

I've tried a bunch of things and am banging my head against a wall. I can't seem to get the jQuery autonumeric plugin to apply to multiple input fields.

<script type="text/javascript">
  $(document).ready(function() { 
    $("#numeric").autoNumeric('init', {aSign: '$ '});
  }); 
</script>

I then use this in a few input fields...

<tr id="row">
  <td width="5%"><input id="numeric" type="text" name="price" data-a-sign="$ "></td>
</tr>
<tr id="row">
  <td width="5%"><input id="numeric" type="text" name="price" data-a-sign="$ "></td>
</tr>
<tr id="row">
  <td width="5%"><input id="numeric" type="text" name="price" data-a-sign="$ "></td>
</tr>

For some reason, the formatting only applies to the first field. So when I type in the first input field, it formats it as I'd like (e.g. $ 12.50). But the next fields simply act as if nothing has changed, and are simply text fields. I've also tried to use arrays in place of the input names after reading another post:

name="price[]"

I've also tried different names such as price1, price2, price3 but this didn't work, and also isn't how I'd like them to be named due to dynamic creation of additional items.

Any help/suggestions/thoughts? Thanks in advance.

Upvotes: 0

Views: 2047

Answers (1)

Abhishekh Gupta
Abhishekh Gupta

Reputation: 6236

ID's are unique and you are assigning multiple fields same ID so when initialzing it is selecting the first element found with the given ID. Use a class/tag selector like this:

<tr id="row">
  <td width="5%"><input class="numeric" type="text" name="price" data-a-sign="$ "></td>
</tr>
<tr id="row">
  <td width="5%"><input class="numeric" type="text" name="price" data-a-sign="$ "></td>
</tr>
<tr id="row">
  <td width="5%"><input class="numeric" type="text" name="price" data-a-sign="$ "></td>
</tr>

  $(document).ready(function() { 
      $(".numeric").autoNumeric('init', {aSign: '$ '});
  });

OR use tag selector:

$(document).ready(function() { 
    $("input").autoNumeric('init', {aSign: '$ '});
});

Upvotes: 1

Related Questions