1

estoy intentando hacer una rutina que me permita traer desde una base de datos mysql, el precio de un producto y calcular el total de acuerdo a la formula: total = precio * cantidad. hasta ahora he hecho lo siguiente:

<!DOCTYPE html>
<html>
 <head>
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script language="javascript">
        $(document).ready(function(){
            $("#category").on('change', function () {
                $("#category option:selected").each(function () {
                    var id_producto = $(this).val();
                    $.post("subcategories.php", { id_producto: id_producto }, function(data) {
                        $("#subcategory").html(data);
                    });         
                });
            });
        });
</script>

  </head>
  <body>
    <form action="" method="post" name="formulario">
    <div class="form-group col-lg-3">
        <label for="category">Producto</label>
            <select name="category" id="category" class="form-control">
                <?php
                    require_once("config/config.php");
                    $conexion = new mysqli('localhost', DB_USER, DB_PASS, DB_NAME);
                        $result = $conexion->query(" SELECT id_producto, nombre_producto 
                        from producto   ORDER BY id_producto ASC" );
                        if ($result->num_rows > 0) {
                            while ($row = $result->fetch_assoc()) {                
                                echo '<option value="'.$row['id_producto'].'">'.$row['nombre_producto'].'</option>';
                            }
                        }
                ?>
            </select>
    </div>
                    <div class="form-group col-lg-3">
                        <label for="subcategory">Precio de Venta</label>
                        <select name="subcategory" id="subcategory" class="form-control" readonly=""></select>
                    </div>
                <div class="form-group col-lg-3">
                    <label for="cantidad">Cantidad</label>
                    <input type="number" name = "cantidad" class="form-control input-sm" id="cantidad">
            </div>
    <div class="form-group col-lg-3">
        <label for="subtotal">SubTotal</label>
        <input type="number" name = "subtotal"class="form-control input-sm" id="subtotal" readonly="">
    </div>
</form>
</body>
</html>

Este script me muestra los productos y su precio de venta. Lo que no he podido hacer es tomar las variables de "precio de venta" y "cantidad" y calcular el total y mostrarlo en el input "subtotal". El archivo subcategories.php, contiene lo siguiente:

<?php
 session_start();
 $html = '';
 require_once("config/config.php");
 $conexion = new mysqli('localhost', DB_USER, DB_PASS, DB_NAME);

 $id_producto = $_POST['id_producto'];
 $result = $conexion->query(
 "
 SELECT id_producto, precio_venta FROM producto
 WHERE id_producto = ".$id_producto." "
);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
    $html .= '<option 
 value="'.$row['id_producto'].'">'.$row['precio_venta'].' Bs.</option>';
  }
}
 echo $html;
?>

Este archivo retorna el "id" y el "precio_venta" del articulo en la variable $html. Pero dicha variable $html, está retornando solo el "id" del articulo y no puedo hacer el calculo del total. Espero haber explicado correctamente la situación. Agradecido de cualquier ayuda.

1
  • alguna idea como se hace en javascript para leer dos valores, multiplicarlos y luego escribir ese valor en otro campo???
    – user46896
    el 19 jul. 2021 a las 3:22

1 respuesta 1

1

Edición:

Si ya tienes la función para que te traiga el precio de venta funciona exactamente igual. Si aún no la tienes, puedes usar ajax. Asignas el precio de venta al value del input con id precio.

$.ajax({
  ...
  //Respuesta trae el precio de venta desde tu query
  success: function(respuesta) {
    $('#precio').val(respuesta);
  }
...
});

La idea básicamente es multiplicar el precio de venta por la cantidad y asignar el resultado al value del subtotal.

Te dejo un ejemplo básico, comentado en jQuery, el cual puedes adaptar a tu código.

//Cuando cambie la cantidad...
$('#cantidad').on('change', function(){
  //Obtenemos el precio de venta
  let precio = $('#precio').val();
  //Obtenemos la cantidad
  let cantidad = $('#cantidad').val();
  //Multiplicamos ambos valores
  let subtotal = precio * cantidad;
  //Asignamos el resultado al value de subtotal
  $('#subtotal').val(subtotal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="subcategory">Precio de Venta</label><br>
<input type="number" name = "precio" class="form-control input-sm" id="precio" value="20" readonly><br>
<label for="cantidad">Cantidad</label><br>
<input type="number" name = "cantidad" class="form-control input-sm" id="cantidad"><br>
<label for="subtotal">SubTotal</label><br>
<input type="number" name = "subtotal"class="form-control input-sm" id="subtotal" readonly="">

2
  • Gracias @DjCrazy, esa solución efectivamente funciona bajo esas condiciones, pero en mi caso, la variable que contiene el valor de "precio de venta" es tomada desde una funcion Javascript que ejecuta un archivo (subcategories.php) para buscar dicho precio. Replanteando la pregunta, como traigo ese valor para hacer el calculo?
    – HGarcia
    el 20 jul. 2021 a las 16:00
  • Disculpa @DjCrazy no se trabajar con Ajax. voy a editar la pregunta a ver si puedo explicarme mejor
    – HGarcia
    el 22 jul. 2021 a las 17:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.