0

Olá, preciso da ajuda de vocês;

Tenho o meu While no PHP, listando todos os materiais, suas quantidades e um espaço onde é calculado o Total conforme a quantidade do produto aumenta.

Aqui meu PHP:

<?php 
    
      
      $dadosMaterial = mysql_query(carregaDados2());
      $i = 1;
      if (mysql_num_rows($dadosMaterial)>0) {
        while($linha = mysql_fetch_array($dadosMaterial)){ 
      
      
        echo "<br><label>".$linha['matnome']."</label>";   
        echo "<br>";
        echo "<div id=px1>"."Valor"."<input type='text' class='form-control' style='width: 115px' value=".$linha['matpreco']."  readonly='readonly' name='valor_unitario' id='valor_unitario'/>"."</div>";
        echo "<div id=px2>"."Quantidade"."<input type='number' min='0' max=".$linha['matqtde']." class='form-control' style='width: 115px' name='qnt".$i."' id='qnt".$i."' value='0'/>"."</div>";
        echo "<div id=px3>"."Total "."<input type='text' class='form-control' style='width: 115px' name='total' id='total' readonly='readonly'/></div>"."";
        $i++;
        
       }
      }
?>

Criei uma variável para contar a 'qnt', para o id não se repetir, mas no JS eu não consegui criar um for ou outro tipo de laço de repetição para "acompanhar" as ids do while no php.

Eu tenho a seguinte dúvida, como eu criaria esse for no JS? Já tentei de tudo, fiz até arrays e nada.

Aqui meu código em JS:

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('qnt1').value );
    id('total').value = String(result.toFixed(2)).formatMoney();
  });

  id('qnt1').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;
};

1 Resposta 1

2

Bem o seu problema não é de while, for ou qualquer coisa semelhante, seu problema na verdade é de indentificação, na hora de gerar os inputs com o PHP você não esta fazendo isso corretamente, nesse caso você tem que dar um ID para cada bloco inteiro ou seja o valor unitario a quantidade e o total deve ter o mesmo ID. Vou postar um HTML mais limpo para você perceber quais as partes importantes.

<h3>Produto #1</h3>
Valor: <input type="text" value="12,50" readonly="readonly" name="valor_unitario1" id="valor_unitario1" />
Quantidade: <input type="number" min="0" max="10" id="qnt1" onkeyup="calcTotal(this.id)" value="0" />
Total: <input type="text" name="total1" id="total1" readonly="readonly" />

<h3>Produto #2</h3>
Valor: <input type="text" value="12,50" readonly="readonly" name="valor_unitario2" id="valor_unitario2" />
Quantidade: <input type="number" min="0" max="10" id="qnt2" onkeyup="calcTotal(this.id)" value="0" />
Total: <input type="text" name="total2" id="total2" readonly="readonly" />

<br /><br />
<b>Total Total:</b> <div id="somaTotal"></div>

Perceba que em cada campo o "ID" é o mesmo para os três ou seja o "valor_unitarioX" o "qntX" e o "totalX" possuem o mesmo ID ou seja fazem parte do mesmo bloco, outro detalhe que digo é que o evento ocorre dentro do proprio campo de quantidade onkeyup="calcTotal(this.id)" onde ele mesmo se ativa através do teclado e passa o ID dele mesmo.

Já na parte de JavaScript basta pegar esse evento pegar o ID e tratar os dados sem muito misterio aqui coloco o código JS completo com os comentarios dentro.

<script>
// Faz a leitura do elemento pelo ID
function byID(el) {
 return document.getElementById(el);
}

// Calcula a quantidade x total
function total(un, qnt) {
 // Fix para campos vazios
 return (qnt.length && qnt >= 0) ? parseFloat(un.replace(",", "."), 10) * parseFloat(qnt.replace(",", "."), 10) : 0;
}

// Função que formata o dinheiro
function formatMoney(v) {
 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;
}

// Calcula o total toral
function calculaoTotalTotal() {
 var total_total = 0, id = 1;
 // Corre todos os campos infinatamente
 for (;;) {
  var campo = byID("total" + id); // Pega a quantidade
  // Para o for quando não acha campos 
  if (campo == undefined) { 
   break; 
  } else {
   // Vertifica se o campo esta preenchido e calcula
   if (campo.value.length) { total_total += parseFloat(campo.value.replace(",", "."), 10); }
  }
  id++;
 }
 byID("somaTotal").innerHTML = formatMoney(total_total.toString()); // Formata e Imprime Total Total
}

// Recebe a ação de quantidade do input
function calcTotal(id) {
 var id = id.replace("qnt", "");  // Traz apenas o número de ID
 var valor_unitario = byID("valor_unitario" + id).value;  // Pega o valor unitario daquele bloco de ID
 var quantidade = byID("qnt" + id).value; // Pega a quantidade
 var soma = total(valor_unitario, quantidade); // Realiza a soma da quantidade x preço
 byID("total" + id).value = formatMoney(soma.toString()); // Formata e Imprime no Total
 calculaoTotalTotal(); // Calcula todos os campos
}
</script>

EDIT: Adicionei uma soma total a uma DIV conforma solicitado pelo comentario.

3
  • 1
    VLW CARA, SÉRIO. Bom, meu PHP eu não mudei muito, só coloquei mesmo o meu $i em todas as ids e names, porque anteriormente só estava contando na Quantidade; A partir do seu Javascript consegui fazer o cálculo, obrigado mesmo cara! O seu JS me salvou, o seu código em HTML também! Só foi questão de mudar meu código PHP, como você mesmo disse, VALEU CARA!
    – Igo Brasil
    Commented 3/04/2016 às 16:32
  • Só mais uma pergunta, como eu mostraria o TOTAL GERAL desses produtos (ou seja, todos os totais somados) em uma DIV fora do while?
    – Igo Brasil
    Commented 3/04/2016 às 18:43
  • @Igo Brasil pronto coloque mais uma função que soma e gera um total.
    – SK15
    Commented 4/04/2016 às 1:29

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 .