tengo varios dias ya rompiendome la cabeza y no logro ver donde esta el problema, tengo un formulario de facturacion donde se cargan los productos que se van a facturar, el primer campo es un select que lo lleno con una consulta a la BD, luego el campo precio se llena automatico con la informacion que trae de la base de datos, luego tengo 3 inputs mas donde coloco la cantidad, el descuento y el total, para ultimo mostrar un boton de agragar otro producto o eliminar producto, cuando le doy para agregar el segundo producto, me carga los inputs completo, llena el select con la consulta a la base de datos pero no me muestra el precio del producto seleccionado.
todo lo tengo dividido en 3 archivos .php, les dejo parte del codigo de cada archivo.
archivo precio.php
<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
$id_producto = htmlspecialchars(trim($_POST["id_producto"]));
include "../../conexion.php";
$db = connect();
$sqlper = "SELECT * FROM maestro_producto WHERE id_producto='$id_producto'";
$rsper = mysqli_query($db,$sqlper) or die ('Consulta fallida: '.mysqli_error($db));
$rowper = mysqli_fetch_assoc($rsper);
$precio = $rowper['precio_venta'];
echo json_encode([
'precio' => $precio,
]);
} else {
echo "<p>No hay datos</p>";
}
?>
archivo items.php
<?php
include "conexion.php";
$db = connecto();
$queryp=$db->query("SELECT * FROM maestro_producto");
$pro = array();
while($p=$queryp->fetch_object()){ $pro[]=$p; }
?>
<div class="form-row" style="color:#FFF" id="productos">
<div class="float-left" style="margin-left:10px;">
<input type="checkbox" name="item_index[]" />
</div>
<div class="form-group col-md-3">
<select id="id_producto" name="id_producto">
<option value="">--SELECCIONE--</option>
<?php foreach($pro as $pr):?>
<option value="<?php echo $pr->id_producto; ?>"><?php echo $pr->nombre_producto; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group col-md-1">
<input class="monto" id="precio_venta" type="text" autocomplete="off" maxlength="4" name="precio_venta" readonly onChange="multiplicar();">
</div>
<div class="form-group col-md-1">
<input class="monto" id="cantidad_venta" type="text" required autocomplete="off" maxlength="4" name="cantidad_venta[]" onChange="multiplicar();">
</div>
<div class="form-group col-md-1">
<input readonly id="subtotal" type="text" required autocomplete="off" maxlength="20" name="subtotal[]" onChange="descuento();">
</div>
<div class="form-group col-md-2">
<input type="text" id="id_descuento" style="width: 70px;" name="id_descuento[]" onChange="descuento();"/>
</div>
<div class="form-group col-md-1">
<input readonly id="total_parcial" type="text" maxlength="20" name="total_parcial[]">
</div>
<div class="form-group col-md-2">
<input class="btn btn-success" type="button" name="agregar_registros" value="+" onClick="AgregarMas();" />
<input class="btn btn-danger" type="button" name="borrar_registros" value="-" onClick="BorrarRegistro();" />
</div>
</div>
<script>
document.getElementById("id_producto").onchange = function(){alerta1()};
function alerta1() {
// Creando el objeto para hacer el request
var request = new XMLHttpRequest();
request.responseType = 'json';
// Objeto PHP que consultaremos
request.open("POST", "precio.php");
// Definiendo el listener
request.onreadystatechange = function() {
// Revision si fue completada la peticion y si fue exitosa
if(this.readyState === 4 && this.status === 200) {
// Ingresando la respuesta obtenida del PHP
document.getElementById("precio_venta").value = this.response.precio;
}
};
// Recogiendo la data del HTML
var myForm = document.getElementById("myForm");
var formData = new FormData(myForm);
// Enviando la data al PHP
request.send(formData);
}
</script>
y el archivo de la factura como tal agregar_factura.php
<?php
header("Content-Type: text/html;charset=utf-8");
include "../../conexion.php";
$db = connect();
$acentos = $db->query("SET NAMES 'utf8'");
$queryp=$db->query("SELECT * FROM maestro_producto");
$pro = array();
while($p=$queryp->fetch_object()){ $pro[]=$p; }
?>
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../../css/estilo.css">
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
</head>
<body style="background-color:transparent">
<form action="guardarfactura.php" method="post" style="color: grey ; width: 90%; background: rgba(0,0,0,0.5); text-align: center; align-content:center; margin:auto; margin-top: 20px; margin-bottom: 5%; padding: 15px; border-radius: 30px; height:100%; border-style: solid;" id="myForm">
<h2 style="color:#F2A620">NUEVA FACTURA</h2><br>
<div class="form-row" style="color:#FFF">
<div class="form-group col-md-3">
<label for="nombre">Cliente</label><br>
<?php
$queryc=$db->query("SELECT * FROM maestro_clientes");
$cli = array();
while($c=$queryc->fetch_object()){ $cli[]=$c; }
?>
<select id="id_cliente" name="id_cliente">
<option value="">--SELECCIONE--</option>
<?php foreach($cli as $cl):?>
<option value="<?php echo $cl->id_cliente; ?>"><?php echo $cl->nombre_cliente; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group col-md-3">
<label for="nombre">Vendedor</label><br>
<?php
$queryemp=$db->query("SELECT * FROM nomina_empleado WHERE id_empleado!='1'");
$emp = array();
while($e=$queryemp->fetch_object()){ $emp[]=$e; }
?>
<select id="id_empleado" name="id_empleado">
<option value="">--SELECCIONE--</option>
<?php foreach($emp as $em):?>
<option value="<?php echo $em->id_empleado; ?>"><?php echo $em->nombres_completo; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-row" style="color:#FFF">
<div class="form-group col-md-3">
<label for="nombre">Nombre Producto</label><br>
</div>
<div class="form-group col-md-1" style="margin-left:30px;">
<label>Precio</label><br>
</div>
<div class="form-group col-md-1" style="margin-left:-10px;">
<label for="nombre">Cantidad</label><br>
</div>
<div class="form-group col-md-1" style="margin-left:20px;">
<label for="contacto">Sub-Total</label><br>
</div>
<div class="form-group col-md-2" style="margin-left:-20px;">
<label for="nombre">Descuento</label><br>
</div>
<div class="form-group col-md-1">
<label >Total</label><br>
</div>
</div>
<div id="productos">
<?php require_once("items.php") ?>
</div>
<span class="success"><?php if(isset($resultado)) { echo $resultado; }?></span>
<div align="center"><br>
<input type="submit" name="Agregar" value="AGREGAR" class="btn btn-light btn-lg">
</div>
</form>
<script>
function multiplicar(){
m1 = document.getElementById("precio_venta").value;
m2 = document.getElementById("cantidad_venta").value;
r = m1*m2;
document.getElementById("subtotal").value = r;
}
</script>
<script>
function descuento(){
px = '100';
d1 = document.getElementById("subtotal").value;
d2 = document.getElementById("id_descuento").value;
d3 = d2/px;
r1 = d1*d3;
r2 = d1-r1
document.getElementById("total_parcial").value = r2;
}
</script>
<script>
function AgregarMas() {
$("<div>").load("items.php", function() {
$("#productos").append($(this).html());
});
}
function BorrarRegistro() {
$('div.form-row').each(function(index, item){
jQuery(':checkbox', this).each(function () {
if ($(this).is(':checked')) {
$(item).remove();
}
});
});
}
</script>
</body>
</html>
Espero me puedan ayudar. Gracias de antemano.
AgregarMas()
. Si observas, cada vez que invocas esa función llamas aitems.php
que te carga de nuevo todos los productos. El contexto tampoco está bien explicado en la pregunta, por ejemplo, de entrada, ¿cómo se presenta la página? ¿hay una lista de productos precargada de la cual el usuario selecciona el que quiere comprar? Es fundamental entender ese contexto inicial para poder ayudarte. Por ejemplo, podríamos pensar en una lista de productos ya con su precio ...