Javascript + PHP

Question

Hi, I need your help;

I have my While in PHP, listing all the materials, their quantities and a space where the Total is calculated as the quantity of the product increases.

Here my 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++;
        
       }
      }
?>

I created a variable to tell the 'qnt', so the id won’t repeat, but in JS I couldn’t create a for or another type of loop to "track" the while ids in php.

I have the following doubt, how would I create this for in JS? I’ve tried everything, I’ve done up arrays and nothing.

Here’s my JS code:

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;
};

Answer 1

Well your problem is not while, for or anything similar, your problem is actually of indentification, at the time of generating inputs with PHP you are not doing it correctly, in which case you have to give an ID for each whole block or be the unitario value the quantity and the total must have the same ID. I’ll post a cleaner HTML so you can see which parts are important.

<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>

Note that in each field the "ID" is the same for the three or "value_unitarioX" the "qntX" and the "totalX" have the same ID or are part of the same block, another detail I say is that the event takes place within the own quantity field onkeyup="calcTotal(this.id)" where it activates itself through the keyboard and passes the ID of itself.

Already in the Javascript part just take this event take the ID and treat the data without much mystery here I put the JS code complete with the comments inside.

<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: I added a total sum to a DIV as requested by the comment.