Calcular importe de un listado dinamico en base a un select

[neoarcangel]

Hola, os cuento lo que tengo.

Tengo un pagina hecha en php con un listado de productos que los coge de la base de datos en la cual al lado del producto aparece el precio y al lado de este un select para poder seleccionar entre 1 y 10 productos, todo esto funciona perfecto, el problema esta en que quiero que al lado de el select aparecezca el total de lo que cuesta lo que haya seleccionado el cliente, es decir, si el producto vale 100 y el cliente selecciona en el select 3, inmediatamente el campo total deberia actualizarse en 300.
Me gustaria hacerlo en javascript

Este es el codigo php

Código PHP:

     <?php 
$trabajoinstan=new Trabajo(); 
                    $listandoproductos=$trabajoinstan->listaSoloProductosporId($_GET["categoriaxjavascript"]); 
                   for ($i = 0; $i < count($listandoproductos); $i++) 
                    { 
                      ?> 
                    
                    <tr class="fuenteParisian fuente20"> 
                        <td class=" centradovertical"><?php echo ucfirst($listandoproductos[$i]["producto"]);?></td> 
                        <td id="precio"><?php echo ucfirst($listandoproductos[$i]["precio"]);?>&nbsp; €</td> 
                       <td id="cantidad"> 
                            <div class="selectcantidad"> 
                               
                                 <select id="cantidad"  > 
                                     <?php 
                                        for ($j = 1; $j <= 10; $j++)  
                                        { 
                                     ?>   
                                    <option value="<?php echo $j; ?>"> <?php echo $j; ?>  </option> 
                                    <?php 
                                      
                                        } 
                                     ?>  
                                 </select> 
                            </div> 
                       </td> 
                       <td> 
                           <div class="form-group"> 
                               <input type="checkbox" class="form-control"/> 
                           </div> 
                       </td> 
                       
                        
                       <td> 
                           <input type="text" onmouseover="calculaTotal();" /> 
                       </td> 
                       
                   </tr> 
                   <?php                    
} 
                   ?>   

y esta es la funcion javascript que he hecho

Código:

function calculaTotal()
{
   var total;
   var precio;
   var cantidad;
   precio=document.getElementById('precio').value;
   cantidad=document.getElementById('cantidad').value;
   total=precio*cantidad;
   return total;
}

no me funciona, pero pienso que es por que no se integrarla bien, y ademas al tener que coger el valor a multiplicar de un bucle for, pienso que no lo estoy haciendo correctamente, la idea es que al mover el select, el total se incremente.

Si me pudierais echar una mano, me ayudaria bastante

Gracias.

[NeaFan]

Primero que todo quite los atributos de clase para que se visualice mejor, ya eso es cuestión de maquetación y carpintería.

Suponiendo que tienes 3 productos:
Producto 1 | 1000
Producto 2 | 5000
Producto 3 | 3000

al ejecutarse tu PHP este seria mas o menos el resultado:

Código HTML:

<table>
    <tr>
        <td >Producto 1</td>
        <td id="precio">1000</td>
        <td id="cantidad">
            <select id="cantidad"  >
                <?php
                for ($j = 1; $j <= 10; $j++) {
                    ?>  
                    <option value="<?php echo $j; ?>"> <?php echo $j; ?>  </option>
                    <?php
                }
                ?> 
            </select>
        </td>
        <td>
            <input type="checkbox" class="form-control"/>
        </td>
        <td>
            <input type="text" onmouseover="calculaTotal();" />
        </td>
    </tr>
        <tr>
        <td >Producto 2</td>
        <td id="precio">5000</td>
        <td id="cantidad">
            <select id="cantidad"  >
                <?php
                for ($j = 1; $j <= 10; $j++) {
                    ?>  
                    <option value="<?php echo $j; ?>"> <?php echo $j; ?>  </option>
                    <?php
                }
                ?> 
            </select>
        </td>
        <td>
            <input type="checkbox" class="form-control"/>
        </td>
        <td>
            <input type="text" onmouseover="calculaTotal();" />
        </td>
    </tr>
        <tr>
        <td >Producto 3</td>
        <td id="precio">3000</td>
        <td id="cantidad">
            <select id="cantidad"  >
                <?php
                for ($j = 1; $j <= 10; $j++) {
                    ?>  
                    <option value="<?php echo $j; ?>"> <?php echo $j; ?>  </option>
                    <?php
                }
                ?> 
            </select>
        </td>
        <td>
            <input type="checkbox" class="form-control"/>
        </td>
        <td>
            <input type="text" onmouseover="calculaTotal();" />
        </td>
    </tr>
</table>
 

¿Has notado los problemas? Seguro te habras dado cuenta que:
1ro: Los id: Precio e id: Cantidad se repiten en cada iteración del PHP «Los id son únicos»
2do: Intentas acceder a precio como si se tratase de un input;
precio=document.getElementById('precio').value
esta forma de acceder es incorrecta, en este caso puedes usar un innerHTML
precio=document.getElementById('precio').innerHTML ;
3ro: Quieres asignar un id tanto al campo de la tabla al cual defines cantidad como al select, ambos los identificas como id:Cantidad, «recuerda que el que contiene el valor es el select en este caso, puesto que el td contiene es al select (un objeto)»
4to: Usas el evento onmouseover sobre la casilla del total cuando el evento que te intereza es el onchange del select, puesto que solo realizaras un calculo si el valor del select cambia.

Soluciones Posibles

1ro:
Usa un contador: $contador = $contador + 1;
Este lo aplicas para la declaración de identificadores id="precio<?php echo $contador; ?" así obtendrías algo como:
precio1
precio2
precio3

2do:
Si deseas usar el campo <td id="precioN">numero</td> para acceder al contenido osea el texto (numero) lo haces con la propiedad innerHTML como lo indique arriba, sin embargo me doy cuenta que tienes una sintaxis mas o menos así:

Código HTML:

<td id="precio2">5000 €</td>
 

5000 € no es un numero propiamente dicho así que primero tendrías que crear una función formato(valor) que elimine los caracteres no numéricos.

3ro:
Solo asignale un id al select, el campo (td) no es de tu importancia aquí.

Código HTML:

<td><select id="Cantidad<?php echo $contador; ?>"><?php ... ?></select>
 

4to:
Usa el atributo onchange del select así cada cambio que hagas ejecutara la función CalcularTotal();

Código HTML:

<td><select id="Cantidad1" onchange="CalcularTotal();">9</select>
 

Sugerencia usa un parámetro en la función CalcularTotal(parametro) así sabrás cual input id:totalN afectaras así:
codigo del input:

Código HTML:

<input id="total<?php echo $contador; ?>" type="number"/>
 

ejemplo de resultado esperado:

Código HTML:

<input id="total3" type="number"/>
 

idea de una función:

Código Javascript:

function calculaTotal(posicion)
        {
            //Rescatas el valor del elemento con el id indicado
            var precio = document.getElementById('precio'+posicion).innerHTML;
            var cantidad = document.getElementById('cantidad'+posicion).value;
            //Eliminas los caracteres no numericos y retornas un numero real
            precio = formatearMoneda(precio);
            //El resultado lo escribes en el input con el id indicado
            document.getElementById("total"+posicion).value = precio * cantidad;
        }
 

No falta decir que la función formatearMoneda la debes crear previamente y que la nueva forma de llamar a la funcion CalcularTotal es:

Código HTML:

<td><select id="Cantidad<?php echo $contador; ?>"><?php ... ?></select>
 

Código HTML:

<td><select id="Cantidad1" onchange="CalcularTotal(1);">9</select>
 

En todo caso hay varias pautas que mejorar, mucha suerte con tu proyecto...

[neoarcangel]

Antes que nada lamento la tardanza en responder, he estado bastante liado.
Por otro lado agradecerte muchisimo tu respuesta, la verdad que respuestas tan concisas y explicativas como la tuya cuesta muchisimo verlas, me ha gustado mucho.

Al final he tenido que retocar un poquitin el codigo, de hecho pero al final he conseguido que me funcionase.
No obstante tu ayuda ha sido imprescindible para ello, asi pues al final ha quedado asi

Código:

 function calculaTotal(posicion)
 {
                 precio=document.getElementById('precio'+posicion).innerHTML;
                 cantidad=document.getElementById('cantidad'+posicion).value;
     
            document.getElementById('totales'+posicion).innerHTML=precio*cantidad;
            
 }

No obstante ahora me queda un ultimo toque que no se muy bien como enfocarlo, calcultaTotal, va calculando el total de cada registro asociado a la base de datos.

La idea es que haya otro campo ya sea en un tr, o en un div, que vaya almacenando el total de totales, es decir

Primero tu seleccionas un numero en el select, digamos el 5, ese 5 automaticamente se multiplica por el valor del producto, digamos 100, automaticamente en el campo total aparece 500
, todo esto iria en el div dinamico que creamos antes que tiene el nombre de "totalesregistro+posicion"

Este div se genera en base a la cantidad de registros que haya en la base de datos, es decir totalesregistro es donde va el total de cada registro, que podrá ser
totalesregistro1, totalesregistro2, totalesregistro3.

El problema viene ahora, si quiero sumar el contenido del todos los totalesregistro
Tengo algo asi.

Código:

function TotaldeTotales()
 {
     //Cuenta de totales de registro(aun no sé como hacerlo)
   totalesregistro=document.getElementById('totales'+posicion).innerHTML;
   for (i=1;i<count(cuentadetotales);i++)
     {
        totaldetotales+=totalesregistro;
    }
 }

Me falta la cuenta de totalesregistro, y no sé como hacerlo ya que "posicion" es un campo dinamico, y no sé muy bien como contar el total de campos "Totalesregistro"


¿Alguna idea?