Publicado em 28 de abr.

Quantidade x Valor unitário em loop com Javascript

Estou desenvolvendo um projeto e estou barrado no javascript a umas 2 semanas rsrsrsr, Abaixo segue o que preciso:

Tenho uma tabela com quantidade e valor unitário vinda do banco dinamicamente.

Preciso que conforme o usuário vai inserindo o valor unitário de cada produto o sistema automaticamente coloque o valor total por item (quantidade x V. Unitário) em tempo real. Esta tabela pode vir com quantidades diferentes de produtos por isso que preciso de um looping com javascript.

Abaixo segue exemplo:

QTD V.Unitario Total

10 10.00 100.00

20 10.00 200.00

10 20.00 200.00

Aguardo desesperadamente ajuda. rsrs

Abaixo segue codigo.

<form name="form1" onkeypress='return VerificarEnter(event);' action="<?php echo $editFormAction; ?>" method="post">
 <table align="center" cellpadding="1" cellspacing="5" id="myTable" class="tablesorter">
 <thead>
 <tr>
 <th colspan="5">REF: <?php echo $row_rs_listadecompras['emp_listaID']; ?> / Categoria: <?php echo $row_rs_listadecompras['lista_categoria']; ?> / Data da lista: <?php echo $row_rs_listadecompras['lista_data_lista']; ?></th>
 <td bgcolor="#F4FBDD"> </td>
 <td bgcolor="#F4FBDD"> </td>
 <td bgcolor="#F4FBDD"> </td>
 </tr>
 <tr>
 <th colspan="5">Dados da Lista do cliente</th>
 <td colspan="3" bgcolor="#F4FBDD">Caro fornecedor favor preencher para proposta</td>
 </tr>
 <tr>
 <th width="3%">Item</th>
 <th width="5%">QTD</th>
 <th width="10%">Tipo</th>
 <th width="35%">Descrição</th>
 <th width="13%">Marca</th>
 <td width="13%" bgcolor="#F4FBDD">Marca do fornecedor</td>
 <td width="13%" bgcolor="#F4FBDD">V. Unitário</td>
 <td width="13%" bgcolor="#F4FBDD">Valor Total</td>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><?php $contaitens=$row_rs_listadecompras['lista_quantidade'];
 $resultadoitens = explode (",", $contaitens);
 // Loop pelo array $resultadoitens
 for ($x=0; $x<count($resultadoitens); $x++) {
 $soma= $x+1;
 echo "<input name='itens' type='text' value='$soma' disabled='yes' class='imputtext'/><hr />";
 } ?>
 </td>
 <td><?php $listaqtd=$row_rs_listadecompras['lista_quantidade'];
 $resultadoqtd = explode (",", $listaqtd);
 // Loop pelo array $resultadoqtd
 for ($x=0; $x<count($resultadoqtd); $x++) {
 echo "<input name='quantidade' type='text' value='$resultadoqtd[$x]' disabled='yes' class='imputtext'/><hr />";
 } ?>
 </td>
 <td><?php $listatipo= $row_rs_listadecompras['lista_tipo'];
 $resultadotipo = explode (",", $listatipo);
 // Loop pelo array $resultadodescricao
 for ($x=0; $x<count($resultadotipo); $x++) {
 echo "<input name='tipo' type='text' value='$resultadotipo[$x]' disabled='yes' class='imputtext'/><hr />";
 } ?>
 </td>
 <td><?php $listadescricao= $row_rs_listadecompras['lista_descricao'];
 $resultadodescricao = explode (",", $listadescricao);
 // Loop pelo array $resultadodescricao
 for ($x=0; $x<count($resultadodescricao); $x++) {
 echo "<input name='descricao' type='text' value='$resultadodescricao[$x]' disabled='yes' class='imputtext'/><hr />";
 } ?>
 </td>
 <td><?php $listamarca=$row_rs_listadecompras['lista_marca']; $resultadomarca = explode (",", $listamarca);
 // Loop pelo array $resultadomarca
 for ($x=0; $x<count($resultadomarca); $x++) {
 echo "<input name='quantidade' type='text' value='$resultadomarca[$x]' disabled='yes' class='imputtext'/><hr />";
 } ?>
 </td>
 <td bgcolor="#F4FBDD"><?php $contaitens=$row_rs_listadecompras['lista_quantidade'];
 $resultadoitens = explode (",", $contaitens);
 // Loop pelo array $resultadoitens
 for ($x=0; $x<count($resultadoitens); $x++) {
 $soma= $x+1;
 echo "<input name='valor_unitario' type='text' value='$resultadomarca[$x]' title='Insira a marca disponível' class='imputtext'/><hr />";
 } ?>
 </td>
 <td bgcolor="#F4FBDD"><?php $contaitens=$row_rs_listadecompras['lista_quantidade'];
 $resultadoitens = explode (",", $contaitens);
 // Loop pelo array $resultadoitens
 for ($x=0; $x<count($resultadoitens); $x++) {
 $soma= $x+1;
 echo "<input name='valor_unitario' type='text' value='' title='Insira o valor unitário do produto' onKeyUp='moeda(this);' onblur='Soma()' soma='sim' class='imputtext'/><hr />";
 } ?>
 </td>
 <td bgcolor="#F4FBDD"><?php $contaitens=$row_rs_listadecompras['lista_quantidade'];
 $resultadoitens = explode (",", $contaitens);
 // Loop pelo array $resultadoitens
 for ($x=0; $x<count($resultadoitens); $x++) {
 $soma= $x+1;
 $qtd=$resultadoqtd[$x];
 $vunitario='10';
 $result=$qtd*$vunitario;
 $convertido= 'R$' . number_format($result, 2, ',', '.');
 echo "<input name='valor_total' type='text' disabled='yes' value='$convertido' class='imputtext'/><hr />";
 } ?>
 </td>
 </tr>
 <tr>
 <td> </td>
 <td> </td>
 <td> </td>
 <td> </td>
 <td> </td>
 <td bgcolor="#F4FBDD"> </td>
 <td align="right" bgcolor="#FFFFFF">Valor Total: R$</td>
 <td bgcolor="#FFFFFF"><input type="text" name="total" disabled="yes" class="imputtext" style="background-color: #FFF; padding-left:5px"/></td>
 </tr>
 </tbody>
 </table>
 <p> </p>
 <table align="center">
 <tr valign="baseline">
 <td> </td>
 <td> </td>
 <td> </td>
 <td> </td>
 <td> </td>
 </tr>
 <tr valign="baseline">
 <td>Setor:
 <input type="text" name="proposta_setor" value="" size="32" class="imputtext"/></td>
 <td>Valor:<br /><input type="text" name="proposta_valor" value="" size="32" class="imputtext"/></td>
 <td>Forma de pagamento:
 <input type="text" name="proposta_formapagamento" value="" size="32" class="imputtext"/></td>
 <td>Frete por conta:
 <select name="select" size="1" id="select" class="imputtext">
 <option value="Comprador">Comprador</option>
 <option value="Fornecedor">Fornecedor</option>
 </select></td>
 <td>Prazo de entrega:
 <input type="text" name="proposta_prazoentrega" value="" size="32" class="imputtext"/></td>
 </tr>
 <tr valign="baseline">
 <td> </td>
 <td> </td>
 <td> </td>
 <td colspan="2" align="right"><input type="button" value="Enviar" onclick="confirmaProposta()" class="botaocadastro"/> <input type="button" value="Cancelar" onclick="javascript:window.history.go(-1)" class="botaocadastro"/></td>
 </tr>
 </table>
 <input type="hidden" name="proposta_empID" value="<?php echo $_SESSION['MM_EmpID']; ?>" />
 <input type="hidden" name="proposta_Fornecedor" value="<?php echo $_SESSION['MM_EmpNome']; ?>" />
 <input type="hidden" name="proposta_cadastrante" value="<?php echo $_SESSION['MM_Responsavel']; ?>" />
 <input type="hidden" name="proposta_data" value="" />
 <input type="hidden" name="MM_insert" value="form1" />
 <input type="hidden" name="proposta_empID_comprador" value=" <?php echo $_SESSION['MM_EmpID']; ?>" size="32" />
 <input type="hidden" name="proposta_referencia" value="<?php echo $_GET['ref']; ?>"size="32" />
</form>

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Progjunior Daniel· 29 de abr.

Tem o exemplo online? Pois assim eu não entendi direito. Porque pelo o que eu entendi é que você envia o formulário via post com as opções que o usuário escolheu. Se for assim você tem que calcular via php. Agora se você quer em js, tem que fazer onchange.

Tem um exemplo aqui que ele faz via ajax adicionando.

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>amCharts examples</title>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $('.adicionar').click(function(){
 var quantidade = $("#qtd").val();
 var codigo = $("#cod").val();
 $.ajax({
 type: "POST",
 url: "cadastra.php",
 data: "quantidade="+quantidade+"&codigo="+codigo,
 dataType: "html",
 success: function(xml){
 $(".resultado").append(xml);

 },
 error: function(){
 alert("Erro inserir lembrete!");
 }
 });
 });
 });
 </script>
	</head>
	<body>
 <form action="calca.php" method="post">
 <table border="1">
 <tr><td colspan="2" align="center">adicionar produto</td></tr>
 <tr><td>Código Produto</td><td>Quantidade</td></tr>
 <tr>
 <td><input type="input" name="cod_produto" style="width:80px" id="cod"/></td>
 <td><input type="input" name="qtde_venda"style="width:80px" id="qtd"/></td>
 <tr><td colspan='2' align="right"><input type="button" value="adicionar" name="adicionar" class="adicionar"/></td></tr>
 </tr>
 </table>
 </form>
 <br/>
 <table class="resultado">
 <tr><td colspan="5">Resuno</td></tr>
 <tr><td>      </td><td>Produto</td><td>Preço</td><td>Quantidade</td><td>Total</td></tr>
 </div>
 </body>

cadastra.php

<?php
	$id = $_POST['codigo'];
	$qtd = $_POST['quantidade'];
	$preco = "$ ".rand(0,9).",00";
	/* Troca essas variaveis $id e $qtd por essa consulta sua.
 $_SESSION['qproduto'] = 1;
	$cod_produto = $_POST['cod_produto'];
	$qtde_venda = $_POST['qtde_venda'];
	$consulta = mysql_query("select * from produtos where cod_produto='$cod_produto'");
	while($linha = mysql_fetch_assoc($consulta)) {
 //echo "<tr><td>".$_SESSION['qproduto']."</td><td>".$linha['descricao']."</td></tr>"; esse echo voce preenche assim mesmo, mas aconselho a fazer com todos os td que possam existir, por mais que voce não tenha dados para preencher.
	}
	*/
	echo "<tr><td>$id</td><td>Calça</td><td>$preco</td><td align='center'>$qtd</td><td>$preco</td></tr>";
?>