Multiplicar campo form

jhonata_paulino · Julho 5, 2017

Olá pessoal, faz uma tempo que não faço site nem sistema, e agora estou desenvolvendo o sisteminha aqui e me deparei com um problema que deve ser simples, mas devido ao tempo parado não estou conseguindo fazer.

Peguei esse código que multiplica o valor pela quantidade, eu consegui fazer outro aqui, mas achei esse melhor pq ele já tem a máscara no campo, preciso que seja 10 um abaixo do outro, mas a função só pega em 1. Quem puder ajudar agradeço.

Quem conseguir resolver, diz o que eu tenho que alterar para ela pegar os outros campos.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script type="text/javascript">
function id(el) {
  return document.getElementById( el );
}
function total( un, qnt ) {
  return parseFloat(un.replace(',', '.'), 10) * parseFloat(qnt.replace(',', '.'), 10);
}
window.onload = function() {
  id('valor_unitario').addEventListener('keyup', function() {
    var result = total( this.value , id('qnt').value );
    id('total').value = String(result.toFixed(2)).formatMoney();
  });
  id('qnt').addEventListener('keyup', function(){
    var result = total( id('valor_unitario').value , this.value );
    id('total').value = String(result.toFixed(2)).formatMoney();
  });
}
String.prototype.formatMoney = function() {
  var v = this;
  if(v.indexOf('.') === -1) {
    v = v.replace(/([\d]+)/, "$1,00");
  }
  v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20");
  v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2");
  v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, "$1.$2,$3");
  return v;
};
</script>
<body>
  <form action="" method="post">
    Valor Unitário: <input type="text" name="valor_unitario" id="valor_unitario" />
    Quantidade: <input type="text" name="qnt" id="qnt" value="0" />
    Total: <input type="text" name="total" id="total" readonly="readonly" />
    
    <p>
    
    
        Valor Unitário: <input type="text" name="valor_unitario2" id="valor_unitario2" />
    Quantidade: <input type="text" name="qnt2" id2="qnt2" value="0" />
    Total: <input type="text" name="total2" id2="total2" readonly="readonly" />
    
  </form>

</body>
</html>

tiagosabadini · Julho 6, 2017

Veja o exemplo:

1. Pegue todos os elementos:

var elementos = document.querySelectorAll('.quantidade');

2. Adicione observadores:

for(var i = 0; i < elementos.length; i++){
		elementos[i].addEventListener('keyup', function(){
			var idCampoTotal = document.querySelector("#"+this.id).dataset.total;
			var idValorUnitario = document.querySelector("#"+this.id).dataset.valor;
			var valorValorUnitario = document.querySelector('#'+idValorUnitario).value;
			var valorQuantidade = document.querySelector('#'+this.id).value;
			
			var valorTotal = total(valorValorUnitario, valorQuantidade);
			document.querySelector('#'+idCampoTotal).value = String(valorTotal.toFixed(2)).formatMoney();
		});
	}

3. Então adicione seus campos de formulários devidamente identificados:

Valor Unitário: <input type="text" name="valor_unitario" id="valor_unitario1" />
    Quantidade: <input type="text" class="quantidade" name="qnt1" id="quantidade1" data-valor="valor_unitario1" data-total="total1" value="0" />
    Total: <input type="text" name="total" id="total1" readonly="readonly" />
    <br /><br />
	
	Valor Unitário: <input type="text" name="valor_unitario" id="valor_unitario2" />
    Quantidade: <input type="text" class="quantidade" name="qnt2" id="quantidade2" data-valor="valor_unitario2" data-total="total2" value="0" />
    Total: <input type="text" name="total" id="total2" readonly="readonly" />

Veja que estou utilizando os atributos data do html, no campo quantidade, para identificar a origem e o destino dos dados.

Se você adicionar novos campos, coloque quantidade3, quantidade4, etc.

Claro que isso pode ser melhorado, mas dá pra você ter uma ideia de como desenvolver seu código.

Código completo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script type="text/javascript">

window.onload = function(){

	var elementos = document.querySelectorAll('.quantidade');
	
	for(var i = 0; i < elementos.length; i++){
		elementos[i].addEventListener('keyup', function(){
			var idCampoTotal = document.querySelector("#"+this.id).dataset.total;
			var idValorUnitario = document.querySelector("#"+this.id).dataset.valor;
			var valorValorUnitario = document.querySelector('#'+idValorUnitario).value;
			var valorQuantidade = document.querySelector('#'+this.id).value;
			
			var valorTotal = total(valorValorUnitario, valorQuantidade);
			document.querySelector('#'+idCampoTotal).value = String(valorTotal.toFixed(2)).formatMoney();
		});
	}		
		
	function total( un, qnt ) {
	  return parseFloat(un.replace(',', '.'), 10) * parseFloat(qnt.replace(',', '.'), 10);
	}
	
	String.prototype.formatMoney = function() {
	  var v = this;
	  if(v.indexOf('.') === -1) {
		v = v.replace(/([\d]+)/, "$1,00");
	  }
	  v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20");
	  v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2");
	  v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, "$1.$2,$3");
	  return v;
	};
		

}


</script>
<body>
  <form action="" method="post">
  
    Valor Unitário: <input type="text" name="valor_unitario" id="valor_unitario1" />
    Quantidade: <input type="text" class="quantidade" name="qnt1" id="quantidade1" data-valor="valor_unitario1" data-total="total1" value="0" />
    Total: <input type="text" name="total" id="total1" readonly="readonly" />
    <br /><br />
	
	Valor Unitário: <input type="text" name="valor_unitario" id="valor_unitario2" />
    Quantidade: <input type="text" class="quantidade" name="qnt2" id="quantidade2" data-valor="valor_unitario2" data-total="total2" value="0" />
    Total: <input type="text" name="total" id="total2" readonly="readonly" />
  
  </form>

</body>

Entrar

Arquivado

Multiplicar campo form

Pergunta

jhonata_paulino 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

1 resposta a esta questão

Recommended Posts

tiagosabadini 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante