-1

O que este código permite é modificar o valor do campo de 0.00 para o valor pretendido, mesmo que seja 2, ele substitui para 2.00.

O meu problema é que ele apenas substitui de 1 INPUT, se tiver 2 INPUTS com o mesmo ID ele so modifica 1.

Como faço para que modifique em todos com o mesmo Elmt ID.

<script>

document.getElementById('currency').onblur = function (){    
    //number-format the user input
    this.value = parseFloat(this.value.replace(/,/g, ''))
                    .toFixed(2)
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    //set the numeric value to a number input
    document.getElementById('number').value = this.value.replace(/,/g, '')
} 

9
  • 1
    Se você vai ter mais um input então sugiro usar uma class para que não tenha dois elementos com o mesmo id. 16/08/2019 às 1:05
  • como assim? o que pretendo é localizar todos os ID iguais e modificalos...
    – John
    16/08/2019 às 1:06
  • 1
    @John não é possível. Você pode até ter vários inputs com o mesmo ID, mas o JavaScript irá considerar apenas um deles. 16/08/2019 às 1:09
  • você até pode selecionar todos os elementos com o mesmo id dessa forma: document.querySelectorAll("#id"); 16/08/2019 às 1:10
  • 2
    Brotherzinho, um id é como um CPF, cada um tem o seu único. Se vc está usando id's iguais em mais de um elemento, é sinal de que vc precisa aprender HTML. Já pensou se mais de uma pessoa tivesse o mesmo CPF, que inferno que não iria ser? :D
    – Sam
    16/08/2019 às 3:58

1 Resposta 1

-2

usando o getElementById("id") ele ira retornar somente o primeiro elemento com o id, então para selecionar todos os elementos com mesmo id podemos utilizar o querySelectorAll("#id"), que nos retornara todos os elementos com aquele id.

let elements = document.querySelectorAll("#currency");

depois de selecionar todos os elementos podemos usar o forEach para adicionar o evento em cada elemento dessa forma:

   elements.forEach(el => {
        el.onblur = () => {
            //number-format the user input
            el.value = parseFloat(el.value.replace(/,/g, ''))
                .toFixed(2)
                .toString()
                .replace(/\B(?=(\d{3})+(?!\d))/g, '.');
            //set the numeric value to a number input
            el.value = el.value.replace(/,/g, '');
        };
    });

lembrando que não é recomendável ter mais de um elemento com o mesmo id em um arquivo html, acredito que você poderia identificar os elementos utilizando uma class e obtendo os elementos dessa forma:

let elements = document.querySelectorAll(".currency");

Assim você poderia passar um forEach em elements da mesma forma.

html usado para os testes:

<td>
    <tr>
        <input name='product_cost[]' placeholder='0.00' class='currency' type='text' class='form-control'
            placeholder='0.00' required>
    </tr>

</td>
<td>
    <input name='product_pvp[]' placeholder='0.00' class='currency' type='text' class='form-control' placeholder='0.00'
        required>
</td>
<td>
    <input name='product_pvp[]' placeholder='0.00' class='currency' type='text' class='form-control' placeholder='0.00'
        required>
</td>
<td>
    <input name='product_pvp[]' placeholder='0.00' class='currency' type='text' class='form-control' placeholder='0.00'
        required>
</td>
7
  • mesmo assim, continua a nao dar
    – John
    16/08/2019 às 1:29
  • <td><input name='product_cost[]' placeholder='0.00' id='currency' type='text' class='form-control' placeholder='0.00' required></td> <td><input name='product_pvp[]' placeholder='0.00' id='currency' type='text' class='form-control' placeholder='0.00' required></td>
    – John
    16/08/2019 às 1:29
  • ok fiz umas alterações no seu código baseado no html e esta funcionando, vou editar a resposta. 16/08/2019 às 1:35
  • certo. funciona usando class. agora uma pergunta... e se eu usar MULTIPLOS de <tr>... ele ja nao funciona, apenas no primeiro <tr> ehehe
    – John
    16/08/2019 às 1:40
  • tente dar um console.log(elements); provavelmente ele não deve estar encontrando os elementos, eu adicionei mais campos e coloquei um deles dentro de um <tr> e continua funcionando. veja se tem algum erro no console. vou adicionar o html que usei para os testes 16/08/2019 às 1:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .