Problema multiplicação de valores automáticos vindos com AJAX + PHP
Olá à todos. Com a ajuda do Forum, consegui multiplicar valores de uma tabela dinamicamente com Ajax, entretanto nesse exemplo eu preciso digitar todos os conteúdos, isso é quantidade e valor unitário. Mas agora preciso pegar o valor unitário dinamicamente, do qual fiz com Ajax, mas não estão funcionando:
O multiplicacao.php pega dados de Ajax do getProdServ.php e getProdServ.php. Mas ao pegar o dado pela linha
<div class="prodPreco"></div>
para mostrar o resultado do Ajax por uma busca dinâmica com PHP, não calcula.
multiplicacao.php
<head>
<script>
function showProdutos(str) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementsByClassName("prodserv")[0].innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getProdServ.php?tipo="+str,true);
xmlhttp.send();
}
</script>
<script>
function showPreco(str) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementsByClassName("prodPreco")[0].innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getProdPreco.php?id="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="" method="post" name="realizarPedido">
<label>Cliente</label>
<br>
<select required name="cliente" id="cliente">
<?
$sql = "SELECT * FROM cliente ORDER BY nomeCliente ASC";
$qr = mysqli_query($con, $sql) or die(mysqli_error($con));
while($ln = mysqli_fetch_assoc($qr)){
echo '<option value="'.$ln['idCliente'].'">'.$ln['nomeCliente'].'</option>';
}
?>
</select>
<br><br>
<label>Data Venda</label>
<br>
<input type="date" required name="dataVenda">
<br><br>
<table border="1" align="center" style="text-align: center;" cellpadding="1" cellspacing="1">
<thead align="center">
<tr>
<td>Tipo de Serviço</td>
<td>Produto / Serviço</td>
<td>Quantidade do Produto</td>
<td>Valor Unitário</td>
<td>Sub Total</td>
</tr>
</thead>
<tbody id="body-table">
<tr>
<td><select required name="tipoVenda[]" id="tipoVenda" onChange="showProdutos(this.value)">
<option value="">Selecione uma Opção</option>
<option>Serviço</option>
<option>Produto</option>
</select></td>
<td><div class="prodserv"></div></td> <!-- Produto -->
<td><input type="text" class="updateFields qtd" name="qtd[]"/></td>
<td><div class="prodPreco"></div></td>
<td><input type="text" class="updateFields valorsubtotal" name="valorsubtotal[]" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" style="text-align:center">Total:</td>
<td><input type="text" id="total" name="total" style="font-weight: bolder" readonly /></td>
</tr>
</tfoot>
</table>
<input type="submit" name="insertar" value="Cadastrar Item(ns)">
</form>
<br>
<button id="btn-addCell">Adicionar Cell</button>
<button id="btn-acao">Atualizar</button>
<!-- jQuery -->
<script src="../js/jquery-1.11.3.min.js"></script>
<script>
function getFieldNameByClass(classes){
classesArr = classes.split(" ");
for(x in classesArr){
if(classesArr[x] == 'qtd') return 'qtd';
if(classesArr[x] == 'valorunitario') return 'valorunitario';
if(classesArr[x] == 'valorsubtotal') return 'valorsubtotal';
}
}
//Encapsulamos para poder chamar em outro contexto
var updateFields = function(){
var fields = document.getElementsByClassName("updateFields");
for (var i = 0; i < fields.length; i++) {
fields[i].addEventListener('keyup', function() {
var thisTr = this.parentElement.parentElement;
var tdChilds = thisTr.childNodes;
var subTotalLinha = {};
for(var y = 0;y < tdChilds.length; y++){
//Pega apenas os Node reais
if(tdChilds[y].nodeType == tdChilds[y].ELEMENT_NODE){
//Dentro do Node (td) navega até o input td->input
var input = tdChilds[y].childNodes[0];
var inputName = getFieldNameByClass(input.className);
subTotalLinha[inputName] = input.value;
//Deixa a referencia ao node, para atualizar após a conta
if(inputName == 'valorsubtotal'){
subTotalLinha['nodeRef'] = input;
}
}
}
//is Defined or null?
if(subTotalLinha['qtd'] == null || subTotalLinha['qtd'] == '') return false;
if(subTotalLinha['valorunitario'] == null || subTotalLinha['valorunitario'] == '') return false;
var qtd = parseFloat(subTotalLinha['qtd']);
var valorunitario = parseFloat(subTotalLinha['valorunitario']);
var subTotal = qtd * valorunitario;
subTotalLinha['nodeRef'].value = subTotal;
//Vamos somar todos os campos a classe valorsubtotal
var subtotalFields = document.getElementsByClassName("valorsubtotal");
var total = 0;
for(var i = 0; i < subtotalFields.length; i++){
if(subtotalFields[i].value != ''){
total += parseFloat(subtotalFields[i].value);
}
}
//Agora atualiza o campo 'Total'
document.getElementById("total").value = total;
}, false);
}
}
updateFields();
</script>
</body>
getProdPreco.php<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
include "../connection.php";
$q = $_GET['id'];
$qSubst = substr($q, -4); //Gera prod/serv
/* Usar str_replace $q / $qSubst */
$idNormal = str_replace($qSubst, "", $q);
if($qSubst == "prod"){
$sql = mysqli_query($con, "SELECT * FROM produto WHERE idProduto = '$idNormal'") or die(mysqli_error($con));
$ln = mysqli_fetch_assoc($sql);
$precoProdutoVenda = $ln['precoProdutoVenda'];
echo '<input type="text" readonly value="'.$precoProdutoVenda.'" class="updateFields valorunitario" name="valorunitario[]">';
} elseif($qSubst == "serv"){
$sql1 = mysqli_query($con, "SELECT * FROM servico WHERE idServico = '$idNormal'") or die(mysqli_error($con));
$ln1 = mysqli_fetch_assoc($sql1);
$precoServico = $ln1['precoServico'];
echo '<input type="text" readonly value="'.$precoServico.'" class="updateFields valorunitario" name="valorunitario[]">';
}
?>
</body>
</html>
getProdServ.php<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
include "../connection.php";
$q = strval($_GET['tipo']);
if($q == "Serviço"){
echo '
<select required name="nomeProduto[]" onChange="showPreco(this.value)" class="updateFields select">
<option value="" class="updateFields">Selecione uma Opção</option>
';
$sql = mysqli_query($con, "SELECT * FROM servico ORDER BY servico ASC") or die(mysqli_error($con));
while($ln = mysqli_fetch_assoc($sql)){
$servico = $ln['servico'];
$precoServico = $ln['precoServico'];
$idServico = $ln['idServico'];
echo '<option value="'.$idServico.'-serv" class="updateFields">'.$servico.'</option>';
}
echo '
</select>
';
} elseif($q == "Produto"){
echo '<select required name="nomeProduto[]" onChange="showPreco(this.value)" class="updateFields select">
<option value="" class="updateFields">Selecione uma Opção</option>
';
$sql1 = mysqli_query($con, "SELECT * FROM produto WHERE codigoProduto != '1' ORDER BY nomeProduto ASC") or die(mysqli_error($con));
while($ln1 = mysqli_fetch_assoc($sql1)){
$idProduto = $ln1['idProduto'];
$nomeProduto = $ln1['nomeProduto'];
$precoProdutoVenda = $ln1['precoProdutoVenda'];
echo '<option value="'.$idProduto.'-prod" class="updateFields">'.$nomeProduto.'</option>';
}
echo '
</select>';
} else {
echo 'ERRO';
}
?>
</body>
</html>
Alguém saberia me dizer pq o Ajax está influenciando na multiplicação do Javascript, pois sem o Ajax funciona normalmente.
Desde já agradeço à todos.Discussão (0)
Carregando comentários...