Como usar mascara de moeda neste caso (js e html)

[Genneral]

Eu tenho a seguinte função:

<script language="JavaScript" type="text/javascript">
function Calcular(form) {
    var qtd = document.getElementById('qtd').value;
    var field_total = document.getElementById('total');
    var valor = 1111;
    field_total.value =  valor * qtd;
}
</script>

O número inserido no primeiro input entra no cálculo (valor * qtd) e é mostrado no input abaixo, nesta estrutura:

<form>
<input type="text" name="QTD" id="qtd" onkeyup="Calcular(this.form)">
<input type="text" id="total" name="TOTAL">
</form>

No segundo input, onde vem o total do valor calculado em R$, eu gostaria que o valor viesse com a máscara, porém sem sucesso com o plugin maskMoney. Isso porque o input usa a id total (chamando da function Calcular) e o plugin maskMoney utiliza uma ID também...então seriam 2 ID's em um input, o que não funciona.

Seria algo basicamente como isto: https://bitcambio.com.br/ porém sem este botão de compra. O valor que você insere no primeiro input recebe o valor e é mostrado no segundo input já com a formatação.

Ty!

[DiF]

@Genneral Na verdade até dá para usar o plugin. só usar classes ao invés de ID.  Tem uma forma de resolver o lance de não funcionar.

 

Basicamente precisas informar qual input deve usar a máscara, usar a função on() para atribuir os eventos para todos elementos filhos de outro elemento.. ao mesmo tempo informar qual elemento vai acionar o evento keyup.
Criar uma variável para o cálculo.. inserir o valor dentro do campo input desejado...
E por fim usar uma pequena "gambiarra" porque o javascript é meio loquinho.. e o plugin só funciona se você der um focus no campo... então para contornar isso e fazer ele funcionar automaticamente, só precisas mandar ele dar um focus no campo do total e depois mandar ele dar um focus no campo de quantidade novamente. "Tipo um vai e volta"

Veja o exemplo online funcional

 

https://jsfiddle.net/7p08ypkz/  Exemplo 1 usando o mask input.

 

https://jsfiddle.net/7p08ypkz/2/  exemplo 2 não usando o mask input.  mas sim usando a função tofixed(2) e parseFloat

 

O site do bitcoin usa o exemplo 2.  

[Genneral]

Muito obrigado @dif. Funcionou perfeitamente bem e vou fazer umas mudanças para que ele apresente a vírgula ao invés do ponto (100,00 e não 100.00) mas isto é direto no plugin, verei no github!

 

Mas a questão da classe eu nem imaginava ser possível usar, sou bem newba em JS kkkk. Sua explanação do algoritimo também ficou muito boa!!

 

Como eu inseri este jQuery em uma página wordpress precisei trocar o cifrão "$" pelo "jQuery", de resto tudo certo!

 

Obs: tive que fazer a chamada de outro script (este script do google) para que o JS funcionasse também, caso alguém tenha a mesma dúvida que eu.

 

Só tenho a te agradecer!

 

 

[Genneral]

Tentei utilizar as máscaras do plugin, porém me fala que a função não foi inicializada..Fiz as chamadas dos scripts e adicionei o script padrão:

<script>
  jQuery(function() {
    jQuery('#total').maskMoney({decimal:",", thousands:"."});
  })
</script>

Isto visando adicionar os decimais e milhares nos números, no "jsfiddle.net" funciona normalmente, porém no site da erro. Erro no console:

 

Uncaught TypeError: jQuery(...).maskMoney is not a function

Se abrir este arquivo que eu criei no jsfiddle: https://jsfiddle.net/bavaresco/m2meaa5u/ é possível ver funcionando, tanto com o parseFloat quanto com a máscara do plugin.

 

Alguma ideia do possível problema?

[DiF]

@Genneral As vezes isso acontece por causa da ordem de carregamento.. se tiver carregando o plugin maskmoney antes de outro que é requerido por ele.. ele dá esse erro...  

Tenta deixar esse plugin como o ultimo que será carregado.. e o plugin jquery deve ser o primeiro da lista.

[Genneral]

@dif eita nóis, não é que era isto mesmo!! jQuery do google em primeiro, plugin no fim da página e tudo funcionando...

 

Desconhecia este fator de ordem, é sempre bom aprender hahah.

 

Obrigado cara, tudo perfeito agora!!!

[DiF]

@Genneral muito bom que conseguiste resolver.  Por sugestão para aumentar seus conhecimentos,  tente implementar o bootstrap no input  para ficar parecido com o do site do bitcoin.   é bem simples mas é bom aprendizado.. no proprio site deles tem um manual mostrando como se coloca aquele "prefixo" antes do campo input!

 

PS: claro que faça um backup dos seus códigos funcionando! assim se der algo errado só voltar

 

abraço

[Genneral]

@dif já lidei com bootstrap a um tempo, é muito útil. Mas acredito que não usarei o estilo do bootstrap neste site, talvez em outro.

 

Abraço