Calcular importe de un listado dinámico en php en base a un select

A convertir los valores a números.

precio = parseInt(document.getElementById('precio').value);

cantidad = parseInt(document.getElementById('cantidad').value);

Esto debería funcionar.

Ya he probado eso pero no me funciona. No obstante me has dado una idea de lo que puede ser, sigo pensando que tiene algo que ver con el bucle.

De todos modos mi código es solo una idea, si se te ocurre otro código que englobe lo que busco y funcione, me podría funcionar.

La idea es que de una base de datos lea ciertos campos.

El nombre del producto y el precio, luego un select con la posibilidad de elegir cantidad de productos(con un bucle) y un cuarto campo en el que aparecería el total de inmediato de multiplicar el precio del producto por la cantidad(javascript) seleccionada por el select, la idea es que al seleccionar un numero en el select aparezca el total al lado.

No obstante seguiré intentándolo, si se te ocurre algo por favor házmelo saber

Un saludo.

Te pongo un variante que puedes adaptar a tu manera de programar.

El problema que tiene es que tienes elementos con el mismo id. Elemento para el precio y de la cantidad tiene siempre el mismo id.

He tardado un poco pero aquí te dejo algo que funciona y puedes ver ejemplo:

Después de la consulta a la base de datos:

Utilizo un "while" para hacer bucle en toda la tabla:

while($row = $result->fetch_assoc()) {
$id = $row['id']; // sacar un campo que utilizaremos para el id de los elementos. ha de ser único.

<div>
                                 <p>
                                 <span><?php echo $row['descripcion']; ?></span> -
                                 <input type="text" id="precio_<?php echo $id; ?>" readonly="readonly" value="<?php echo number_format($row['precio'],2); ?>">
                                 <select id="cantidad_<?php echo $id; ?>" onchange="calculaTotal('<?php echo $id; ?>');" >
                                     <?php
                                        for ($j = 1; $j <= 10; $j++)
                                        {
                                     ?>
                                    <option value="<?php echo number_format($j); ?>"> <?php echo $j; ?>  </option>
                                    <?php
                                        }
                                     ?>
                                 </select>
                                 <span id="total_<?php echo $id; ?>"><?php echo $row['precio']; ?></span>
                                 </p>
                            </div>

Fíjate cómo hemos creado elementos con id distinito para recopilar el valor distinto en el javascript.

Para el precio utilizo un <input>

El js:

<script>
function calculaTotal(id)
{
   var total;
   var precio;
   var cantidad;
   precio = Number(document.getElementById('precio_'+id).value);
   cantidad = document.getElementById('cantidad_'+id).value;
   total=(precio*cantidad).toFixed(2);
   document.getElementById('total_'+id).innerHTML = total;
}
</script>

el ejemplo esta aquí: http://www.dissenyx.com/test

Puedes adaptarlo a tu manera y hacer la llamada de javascript en otro elemento.

<?php echo number_format($j); ?> // el number_format() aquí no es necesario. se quedó de las pruebas.

Es justo lo que quería, yo había hecho algo parecido que pero al final se basa en la misma línea

Es decir

document.getElementById('totales'+posicion).innerHTML=precio*cantidad;

No obstante, el valor "posicion" o "id" es algo imprescindible y que a mi me ha costado ver.

De todos modos me falta un pequeño detalle que llevo un tiempo intentando y no consigo sacar y es el total de totales, seria simplemente que el valor total de totales se fuese actualizando en función del valor del select que se vaya modificando.

En el test que has subido seria tan sencillo como añadir un campo más, y si mueves un select, el que sea, aparte de aparecer el resultado a la derecha en el campo total, también debería aparecer en el campo total de totales, aunque en este caso el campo total de totales acumularía todo el contenido de los campos "total".

Es decir moviendo cualquier select el resultado debería aparecer en cada uno de los totales y debería sumarse para así conseguir un único resultado.

No sé muy bien como hacerlo, lo he probado en javascript, esto es lo que he probado

function TotaldeTotales(cuentavalores,posicion) {     for (i=0;i<cuentavalores;i++)     {         var totalex= document.getElementById('totales'+posicion).innerHTML;         totalex=totalex+1;     }

Muy agradecido por tu ayuda y por tu esfuerzo, la verdad que me ha ayudado mucho y si me puedes ayudar con esto lo agradeceria enormemente

Saludos.

Me he retrasado pero el finde estaba fuera.

He actualizado el ejemplo. He cambiado el "span" por "input" para acceder más fácil a valores numéricos. Ahora la idea es hacer un bucle que recoja la información de todos los campos totales. Yo te he puesto con getElementByClassName().

function TotaldeTotales() {
     var x = document.getElementsByClassName("total"); //total es el class de los campos donde tenemos el total por producto.
     var totales = 0; // hacemos la variable numérica
     var i;
     for (i = 0; i < x.length; i++) {
     totales += Number(x[i].value);
}
document.getElementById("totales").innerHTML = totales;
}

¿Cómo llamamos la función? La podemos llamar justo despues de la que calcula cada total:

<select id="cantidad_<?php echo $id; ?>" onchange="calculaTotal('<?php echo $id; ?>');TotaldeTotales();" >

Si queremos que lo calcule cuando la página se carga, lo ponemos también en el "body" onLoad.

Otra manera de recopilar los totales es por elementos de un formulario con getElementById() y luego sumas los valores de los elements. Algo así:

totales += elements[i].value;

Piensa en getElementBy... algo (tag, class, id)

Si el primero te sirve utilízalo. Creo que no funciona en versiones antiguas de IE, que no reconoce getElementByClassName.

Ya diras.