Javascript + PHP

Question

Javascript + PHP

Navigation

#1 by (2 votes)

0

Hello, 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's 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 count 'qnt', so the id does not repeat itself, but in JS I could not create a for loop or other type of loop to 'follow' the while ids in php. >

I have the following question, how would I create this for in JS? I've tried everything, made up arrays and nothing.

Here's my code in 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;
};

javascript while for

asked by anonymous 03.04.2016 / 03:50

1 answer

Parameters in form action are not sent by GET method Extensive file download on website

score 2 · Accepted Answer

Well your problem is not of while , for or anything similar, your problem is actually of identification, when generating inputs with PHP you are not doing this correctly, in this case you have that give an ID for each integer block ie the unit value the quantity and the total must have the same ID. I'll post a cleaner HTML for you to figure out 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>

Notice that in each field the "ID" is the same for all three, that is, " X " or "qnt X " and " > X "have the same ID or are part of the same block, another detail I say is that the event occurs inside the field of quantity onkeyup="calcTotal(this.id)" where he himself activates through the keyboard and passes his ID even.

Now in the JavaScript part, just take this event to get the ID and treat the data without much mystery here I put the complete JS code 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 sum total to a DIV as requested by the comment.