Calculos de campos dinamicos (php+js)

[sergiolimo.]

Hola, tengo un problema al que no le encuentro solucion ya que no se me da muy bien el js. Tengo una lista con una serie de columnas generada por php, con un campo input "cantidad" (editable), otro de "descuento" (este para editar), "precio"(fijo) y otro "total"(este quiero que calcule)...

No se como hacer para que me calcule cuando la longitud del listado es dinamica, por ejemplo a cada campo cantidad le pongo de nombre "cantidad<? echo $x; ?>" donde x es la fila, pero no se como referirme a ese campo desde el js si va a variar su nombre dependiendo que campo edite

Gracias

[egepe]

suponte

<input type='text' name='prueba' id='prueba' values='<?php echo $x?>' />

en el javascript llamar a la variables del documento que trabajas es

valor = document.getElementById('prueba').value

Ahí pasas ese datos y luego haces los calculos que quieras hacer

Si luego quieres mostrar el dato resultado lo haces
así:
document.getElementById('total').value=vtotal

'total' es el ejemplo en el form donde vas a guardar el dato

vtotal = es el producto de cualquier calculo

Saludos

Ahh y se me olvidaba recuerda usar algun evento para que puedas activar esto

[sergiolimo.]

Gracias por tu respuesta. Veo que funcionaria mientras tenga un campo "prueba", pero y si tengo un prueba1, prueba2, prueba3... pruebax donde no se hasta donde llegue x, como hago el llamado valor = document.getElementById('prueba').value ?

[egepe]

<?php
$N=10;
for ($i=0;$i<N)$i++)
$val ="prueba".$i
?>
<input type="text" name="<?php $val?>" id="<?php $val?>" values="<?php echo $x?>" onclick="calcula('<?php $val?>)"/>
...

Y en la funcion

function calcula(val)
{

....

valor = document.getElementById(val).value

....

}


Código sólo referencial espero que te sirva de guía

[PIRRUMAN]

podrias empezar colocando el nombre de los input dinamicos de esta forma

<input name="nombre[]">
<input name="nombre[]">
<input name="nombre[]">
utiliza el document.getElementsByTagName('nombre[]') para acceder a todos los existentes

[egepe]

LOs input los puedes hacer así, pero para el document.getElementsByTagName debes pasar nombre[con un indice] para que el sepa cuál es cuál.

Como te dije los input puedes colocar incluso dentro del for que te coloque están perfecto! y pasas a la función calculo el indice y listo!!!

<?php
$N=10;
for ($i=0;$i<N)$i++)
?>
<input type="text" name="nombre[]" id="nombre[]" values="<?php echo $x?>" onclick="calcula('<?php $i?>)"/>
...

Y en la funcion

function calcula(I)
{

....

valor = document.getElementById('nombre['+I+']').value

....

}

[sergiolimo.]

Muchisimas gracias a ambos me vino muy bien la ayuda, voy a intentarlo

[sergiolimo.]

No doy pie con bola con esto, estoy intentando algo asi (lo modifique un poco para presentarlo limpio pero la idea es esta):

function calcula(i)
{
valor = document.getElementById('descuento['+I+']').value;
cantidad = document.getElementById('cantidad['+I+']').value;
precio = document.getElementById('precio['+I+']').value;
total = (cantidad * precio) - (valor * (cantidad * precio) / 100);
document.getElementById('titulo['+I+']').value = total;
}

...


<? for ($x=0; $x<$valorx; $x++) { ?>

<input type="text" name="cantidad[]" id="cantidad[]" value="<? echo $cantidad[$l]; ?>" size="8" maxlength="8" />
<input type="text" name="descuento[]" id="descuento[]" value="" onclick="calcula('.$l.')" size="8" maxlength="8" />
<input type="text" name="precio[]" id="precio[]" value="<? echo $precio[$l]; ?>" size="8" maxlength="8" />
<input type="text" name="total[]" id="total[]" value="" size="8" maxlength="8" />

<? ...
} ?>

como ven el js no es mi fuerte, tengo todo en php y solo necesito ese calculo para editar en vivo, estuve viendo en varios lugares y vi que hay muchas formas radicalmente diferentes de mostrar lo mismo pero aun no entiendo como hacer que funcione...

[sergiolimo.]

tendre que poner dentro de cada nombre la variable tambien?

<input type="text" name="cantidad[<? echo $cantidad[$l]; ?>]" id="cantidad[<? echo $cantidad[$l]; ?>]" value="<? echo $cantidad[$l]; ?>" size="8" maxlength="8" />

[emprear]

Iniciado por sergiolimo.

No doy pie con bola con esto, estoy intentando algo asi (lo modifique un poco para presentarlo limpio pero la idea es esta):

function calcula(i)
{
valor = document.getElementById('descuento['+I+']').value;
cantidad = document.getElementById('cantidad['+I+']').value;
precio = document.getElementById('precio['+I+']').value;
total = (cantidad * precio) - (valor * (cantidad * precio) / 100);
document.getElementById('titulo['+I+']').value = total;
}

...


<? for ($x=0; $x<$valorx; $x++) { ?>

<input type="text" name="cantidad[]" id="cantidad[]" value="<? echo $cantidad[$l]; ?>" size="8" maxlength="8" />
<input type="text" name="descuento[]" id="descuento[]" value="" onclick="calcula('.$l.')" size="8" maxlength="8" />
<input type="text" name="precio[]" id="precio[]" value="<? echo $precio[$l]; ?>" size="8" maxlength="8" />
<input type="text" name="total[]" id="total[]" value="" size="8" maxlength="8" />

<? ...
} ?>

como ven el js no es mi fuerte, tengo todo en php y solo necesito ese calculo para editar en vivo, estuve viendo en varios lugares y vi que hay muchas formas radicalmente diferentes de mostrar lo mismo pero aun no entiendo como hacer que funcione...

Primero sería bueno que nos muestres como te quedó el html generado tras hacer lo que te indicaron previamente (abrís la página en el navegador y ves el código fuente.

Ahora yendo a tu función js se detectan varios errores, fijate

calcula() recibe un parámetro i --> calcula(i)

Sin embargo luego hacés
valor = document.getElementById('descuento['+I+']').value;
y está recibiendo I (en mayúsculas), te recuerdo que js es "case sensitive", diferencia may de minusc.
Por otro lado los id deben ser únicos, asi que eso de utilizar los corchetes para construir el id está mal (sería para name en todo caso)
Pero insisto, hay que ver como te quedó el html generado

Saludos

[sergiolimo.]

Muchas gracias emprear, ya di con una solucion que me funciona perfectamente, y es la siguiente por si alguien tiene el mismo problema, incluso dejo como poner los datos con 2 decimales, que no se envie con enter y que al tocar tab se seleccionen solo los campos editables, espero sirva de ayuda:

(perdonen que esta con los "echo" de php pero copie y pegue de mi codigo)

function calcular(cual)
{
caja=document.forms["sumar"].elements;
subtotal=Number(caja["subtotal"+cual].value);
cantidad=Number(caja["cantidad"+cual].value);
lista=Number(caja["lista"+cual].value);
dcto=Number(caja["descuento"+cual].value)/100;

total_unitario=lista-(lista*dcto);
total_final=total_unitario*cantidad;

total_unitario=total_unitario.toFixed(2);
caja["subtotal"+cual].value=total_unitario;
total_final=total_final.toFixed(2);
caja["total"+cual].value=total_final;
}

function pulsar(e) {
tecla = (document.all) ? e.keyCode :e.which;
return (tecla!=13);

y en los input:

echo '<td width=40><input name="cantidad'.$l.'" type="text" value=1 onkeyup="calcular('.$l.')" onClick="this.select()" tabindex="'.(($l*2)+1).'" onkeypress="return pulsar(event)" size="8" maxlength="8" /></td><td width=15>'.$unidad_vta_pedido.'</td>';
echo '<td width=40><input type="text" name="lista'.$l.'" id="lista'.$l.'" value="'.$lista_precio_decimales.'" readonly="readonly" style="border:0" onkeypress="return pulsar(event)" size="8" maxlength="8" /></td>';
echo '<td width=40><input type="text" name="descuento'.$l.'" id="descuento'.$l.'" value="0" onkeyup="calcular('.$l.')" onClick="this.select()" tabindex="'.($l*2+2).'" onkeypress="return pulsar(event)" size="8" maxlength="8" /></td>';
echo '<td width=40><input type="text" name="subtotal'.$l.'" id="subtotal'.$l.'" value="'.$lista_precio_decimales.'" onkeyup="calcular('.$l.')" readonly="readonly" style="border:0" onkeypress="return pulsar(event)" size="8" maxlength="8" /></td>';
echo '<td width=40><input type="text" name="total'.$l.'" id="total'.$l.'" value="'.$lista_precio_decimales.'" readonly="readonly" style="border:0" onkeypress="return pulsar(event)" size="8" maxlength="8" /></td>';



$l es una variable de for que va desde 0 hasta un numero variable