0

Estoy armando un sitio web con el cual trabajo con tabla de productos y necesito hacer que al elegir la cantidad de un producto se multiplique por el valor por unidad y que el resultado se muestre automático.

Sé hacer esto, pero no de manera automática. Si alguien sabe me podría ayudar.

PD: Estoy utilizando PHP, javascript y MySQL.

3
  • 3
    Por favor considera agregar lo que llevas al momento
    – BetaM
    el 20 feb. 2020 a las 3:20
  • ¿Qué te falla en el código? ¿Puedes compartir al menos el código HTML de los campos <input>? el 20 feb. 2020 a las 8:07
  • Puedes usar el evento onchange de un input y controlarlo a través de javascript
    – rpaillao
    el 20 feb. 2020 a las 11:04

4 respuestas 4

2

Si quieres crear contenido dinámico, estás obligado a utilizar algún lenguaje de programación del lado del cliente. Te recomiendo conocer las bases de javascript y luego potenciarlo con Jquery que en resumen, es un conjunto de funcionalidades hechas con javascript para que tú escribas menos código.

Te dejo un ejemplo del código que necesitas en javascript utilizando Jquery:

 $(document).ready(function(){
     $('#inputNumerico1').change(function(){ 
          var resultadoSuma = $('#inputNumerico1').val() + $('#inputNumerico2').val();              
         $('#labelResultado').text(resultadoSuma);
     });
     $('#inputNumerico2').change(function(){ 
          var resultadoSuma = $('#inputNumerico1').val() + $('#inputNumerico2').val();              
         $('#labelResultado').text(resultadoSuma);
     });
 });

Cabe señalar que para utilizar Jquery necesitas importarlo a través de una etiqueta html script

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>
1
1

Con javascript lo puedes hacer, agrega la siguiente función a tu botón (en el que tiene asignado el evento)

function multiplicar(){
  m1 = document.getElementById("multiplicando").value;
  m2 = document.getElementById("multiplicador").value;
  r = m1*m2;
  document.getElementById("resultado").value = r;
}
1
1

Imagino que la parte de PHP la tienes correctamente controlada, por lo que te comento cómo hacer la parte que se ejecuta en el navegador presuponiendo que sabes cómo realizar los cambios necesarios en PHP:

/* Cada vez que cambiemos la cantidad se actualizará el nuevo subtotal */
document.querySelectorAll('tbody input[type="number"]').forEach(elemento => {
  /* Cada vez que se produzca un cambio en una cantidad actualizamos */
  elemento.addEventListener('change', e => {
    /* El "input" tiene como padre a "td" y luego al "tr" que nos interesa */
    let fila = e.currentTarget.parentNode.parentNode;
    /* Buscamos el precio */
    let precio = parseFloat(fila.querySelector('[data-precio]').dataset.precio);
    /* Tenemos la cantidad */
    let cantidad = parseFloat(e.currentTarget.value);
    fila.querySelector('[data-subtotal]').dataset.subtotal = precio * cantidad;
    /* Calculamos el total a partir de la suma de subtotales */
    let total = 0;
    document.querySelectorAll('[data-subtotal]').forEach(elemento => {
      total += parseFloat(elemento.dataset.subtotal);
    });
    document.querySelector('[data-total]').dataset.total = total;
  })
});
[data-precio]:before {
	content: attr(data-precio) ' €';
}
[data-subtotal]:before {
	content: attr(data-subtotal) ' €';
}
[data-total]:before {
	content: attr(data-total) ' €';
}
td {
  text-align: center;
}
<table border="1" width="100%">
  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Subotal</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zapatillas deportivas</td><td data-precio="85.50"></td>
      <td><input type="number" min="0" max="100" value="0" /></td><td data-subtotal="0"></td>
    </tr>
    <tr>
      <td>Jersey muy chulo</td><td data-precio="15.90"></td>
      <td><input type="number" min="0" max="100" value="0" /></td><td data-subtotal="0"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" align="right">Total:</th>
      <th id="total" data-total="0"></th>
    </tr>
  </tfoot>
</table>

9
  • Muchas gracias por darte el tiempo de ayudarme funciona a la perfección, pero como soy novato en esto poco entiendo algunas lineas de codigo pero de todos modos lo guarde para poderlo reutilizar a futuro. el 20 feb. 2020 a las 14:01
  • Pregunta lo que necesites y trato de explicarlo con comentarios en el código o en un comentario. el 20 feb. 2020 a las 14:08
  • muchas gracias tendré presente lo dicho el 21 feb. 2020 a las 12:18
  • ¿disculpa me puede ayudar o explicar algo? el 21 feb. 2020 a las 15:55
  • No es necesario que preguntes si me puedes preguntar. Si es acerca de esta pregunta o respuesta lo puedes hacer aquí mismo, como comentario. Si es una duda nueva redacta una nueva pregunta y déjame un comentario por aquí para que le eche un vistazo. el 21 feb. 2020 a las 16:02
0

e implementado dicha fraccion de codigo pero las cantidades de precio no me muetra nada.

posdata: trabajo con Laravel

introducir la descripción de la imagen aquí

Nuevo colaborador
José Alberto Gomez Olivares es un usuario nuevo en el sitio. Tenlo en cuenta cuando preguntes por aclaraciones, comentes o respondas. Revisa nuestro Código de conducta.
1

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.