1

<html>     
     <?php
     include ("conexion.php");
     $productos= "SELECT codigo,descripcion, precioventa,existencia, imagen FROM productos";
     ?>            
<head> 
<title>Formulario</title> 
</head>
<body> 
<table  class="default" border="1">
    <caption>Productos a la Venta</caption>
    <tr>
    <th> Código</th>
    <th> Descripción</th>
    <th> Imagen</th>
    <th> Existencia</th>
    <th> Precio Unitario</th>
    <th> Ingrese Cantidad</th>
    <th> Subtotal</th>
    </tr>
       <?php 
       $resultado =mysqli_query($conexion, $productos);
       while($row=mysqli_fetch_array($resultado)){    
        ?> 
  <form method="post" id="myForm"> 
       <tr>
        <td> <?php echo $row["codigo"];?></td>
        <td> <?php echo $row["descripcion"];?></td>
        <td> <img width="100" src= "imagenes/<?php echo $row['imagen'];?>"></td>
        <td> <?php echo $row["existencia"];?></td>
        <td> <input id= "precio" value="<?php echo $row["precioventa"];?>" disabled> </td>
        <td><input type="number" id="cantidad" min="0" max="<?php echo $row["existencia"];?>" size="1" value="0" > <input type="submit" value="Agregar" id="boton"></td>
        <td id="resultado" class="hide">
     </td>  
          <?php }mysqli_free_result($resultado);?>  
          </tr>  
     </form>    
    </table>  
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript">
         $(document).ready(function() { 
         $('#myForm').on('submit',function(e) {
              var precio = $("input#precio").val();
              var cantidad = $("input#cantidad").val();
         $.ajax({
                  url:'proceso.php',
                  data: "precio="+precio+"&cantidad="+cantidad,
                  type:  'POST',
                  success:  function (response) {
         $("#resultado").removeClass('hide');
         $("#resultado").html(response);
                   }
                   });
          e.preventDefault();
            });
            });
           </script>
</body>    
</html>

Espero me puedan ayudar, soy nueva en esto. Tengo una tabla con datos rescatados de una base de datos que son productos en venta y necesito multiplicar el precio unitario por la cantidad que se ingrese en el input ingrese cantidad al dar click en el botón agregar pero solo me realiza la operación en la primera línea y no en las otras al hacer click al botón para luego poder sumar los subtotales y hacer un total de los items en donde se realizó la multiplicacion o decir donde cantidad es igual o mayor a 1, he cambiado varias veces mi código y consigo que al hacer click en un solo botón me multiplica en todas los items o solo en la primera linéa como el código que les mostraré. Para aclarar un poco la idea, puse la imagen del resultado en el navegador, tengo la cantidad 4 en amarillo pero en la columna subtotal no me muestra el resultado después de darle click al botón, pero sí en la primera fila lo realiza.introducir la descripción de la imagen aquí

<?php 
  
  $cantidad = $_POST['cantidad'];
  $precio =$_POST['precio'];
  $res = $cantidad * $precio;
 
  echo "$".number_format($res);
 
 ?>
 
6
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla!
    – gbianchi
    Commented el 24 may. 2022 a las 16:28
  • al parecer tu problema se base en que no estas manejando el indice del arreglo que esta recorriendo para la construcción de tu tabla. Commented el 24 may. 2022 a las 16:59
  • Edité el código con las indicaciones que me recomendaste, espero esté más ordenado ahora y agradezco su respuesta sobre los errores. Ojalá puedan ayudarme ! Commented el 24 may. 2022 a las 17:50
  • List! ya lo arreglé. Commented el 24 may. 2022 a las 18:04
  • El problema que veo es que usas el mismo ID (precio y cantidad) para todas las filas. Los IDs deben ser unicos. Entonces actualizas "#resultado" pero como hay muchas filas con el mismo ID, solo actualiza una de ellas. Yo haria la cuenta con Javascript y luego guardaría con PHP en la BD. Commented el 24 may. 2022 a las 18:25

1 respuesta 1

0

Diría que estás complicándote la vida intentando usar PHP para una simple operación matemática que puedes hacer con javascript directamente.

  • Mira de cambiar esto:
var precio = $("input#precio").val(); 
var cantidad = $("input#cantidad").val();
$.ajax({
                  url:'proceso.php',
                  data: "precio="+precio+"&cantidad="+cantidad,
                  type:  'POST',
                  success:  function (response) {
         $("#resultado").removeClass('hide');
         $("#resultado").html(response);
                   }
                   });

por esto:

    e.preventDefault();
    var btn = $(this).find("input[type=submit]:focus" );
    var precio = btn.closest('td').prev('td').find('input').val();
    var cantidad = btn.closest('td').find('input').first().val();
    btn.closest('td').next('td').html("$" + (parseFloat(precio) * parseFloat(cantidad)))

Con estas asignaciones nuevas de precio y cantidad prescindimos del uso de los id porque estan repetidos en cada ciclo, y los buscamos moviendonos entre los elementos partiendo del botón que lanza la petición.

  • Aquí tienes otro problema:
<?php 
       $resultado =mysqli_query($conexion, $productos);
      while($row=mysqli_fetch_array($resultado)){    
        ?> 
  <form method="post" id="myForm"> 

eso lo debes cambiar por esto:

  <form method="post" id="myForm"> 
<?php 
       $resultado =mysqli_query($conexion, $productos);
      while($row=mysqli_fetch_array($resultado)){    
        ?> 

es decir, debes sacar el inicio del <form> del bucle while porque lo estás repitiendo constantemente, y en cambio tan solo lo cierras una vez fuera del while aquí:

<?php }mysqli_free_result($resultado);?>  
          </tr>  
     </form>  

Aquí dejo un snippet de ejemplo (sin el while pero con datos de ejemplo hardcodeados):

$(document).ready(function() {
  $('#myForm').on('submit', function(e) {
    e.preventDefault();
    var btn = $(this).find("input[type=submit]:focus");
    var precio = btn.closest('td').prev('td').find('input').val();
    var cantidad = btn.closest('td').find('input').first().val();
    btn.closest('td').next('td').html("$" + (parseFloat(precio) * parseFloat(cantidad)))
  });
});
<html>

<head>
  <title>Formulario</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
  <form method="post" id="myForm">
    <table class="default" border="1">
      <caption>Productos a la Venta</caption>
      <tr>
        <th> Código</th>
        <th> Descripción</th>
        <th> Imagen</th>
        <th> Existencia</th>
        <th> Precio Unitario</th>
        <th> Ingrese Cantidad</th>
        <th> Subtotal</th>
      </tr>
      <tr>
        <td> codigo</td>
        <td> descripcion</td>
        <td> <img width="100" src="imagenes/imagen.jpg"></td>
        <td> existencia</td>
        <td> <input id="precio" value="10" disabled> </td>
        <td><input type="number" id="cantidad" min="0" max="10" size="1"> <input type="submit" value="Agregar" id="boton"></td>
        <td id="resultado">
        </td>
      </tr>
      <tr>
        <td> codigo</td>
        <td> descripcion</td>
        <td> <img width="100" src="imagenes/imagen.jpg"></td>
        <td> existencia</td>
        <td> <input id="precio" value="20" disabled> </td>
        <td><input type="number" id="cantidad" min="0" max="20" size="1"> <input type="submit" value="Agregar" id="boton"></td>
        <td id="resultado">
        </td>
      </tr>
    </table>
  </form>
</body>

</html>

18
  • lo hice con mi codigo y nada Commented el 25 may. 2022 a las 14:22
  • este es el pastebin pastebin.com/85zNUzAR ohhh lo siento, no quise sobreescribir la pregunta inicial...lo veré Commented el 25 may. 2022 a las 14:47
  • Esto es lo que hice, pastebin.com/WhtrrQs6 Le agregué el atributo value="0" a cantidad para que no me arroje "NAN" si se da click al botón agregar sin antes indicar la cantidad. y le cambié la forma al botón de abajo "generar orden de compra". también al dar click en el botón generar orden me lleva a otra página que es esta pastebin.com/NjXtAfYi aquí ya me genera aleatoriamente el número de la orden de compra y tengo un formulario para llenar datos para la entrega lo que al apretar el botón guardar datos Commented el 26 may. 2022 a las 19:34
  • así lo dejé, son pocos los cambios pastebin.com/8rydWHuy y este el php que realiza las inserciones a mi base de datos pastebin.com/J0r8VsTn Commented el 27 may. 2022 a las 17:38
  • ese es donde está el formulario pastebin.com/ESVKMhPs este es el php pastebin.com/XjeNwSfz Commented el 27 may. 2022 a las 18:50

Tu Respuesta

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

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