Multiplicar datos dinamicos con JavaScript

[marco_sa]

Hola a todos/as

Despues de la pelea de estos dias con el onchange, que por fin funciona perfectamente, me veo en un dilema o mas bien un problema, os explico tengo 4 celdas en una tabla, estas se van creando segun las necesito pulsando añadir o borrar, bien esta conformada asi:

combo con descripcion, lo selecciono y me imprime en la siguiente celda en un input el precio unitario, la tercera celda es otro combo unidades de producto, y la cuarta celda es la multiplicacion del combo unidades por el precio unitario, bien si fuera una tabla no dinamica lo tendria resuelto, mi problema viene en como hacer los eventos para que se realize la dichosa multiplicacion.

La funcion encargada de hacer la dichos multiplicacion es calculaTotalProducto1

Os pongo el codigo que tengo JavaScript

Código:

 

// Funcion que añade filas a una tabla dinamicamente
function addRowToTable()
{
  var tbl = document.getElementById('tabla');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
   
  // Combo nombre producto
  var celdaComboNombreProducto = row.insertCell(0);
  var sel = document.createElement('select');
  sel.name = 'nombre_producto' + iteration;
  sel.id = 'id_producto' + iteration;
  sel.options[0] = new Option('Seleccion', '0');
   
  // Cargamos desde mysql el combobox
  <?Php
$sqltarifa=mysql_query("select * from productos");
while ($ftarifa=mysql_fetch_array($sqltarifa)){
print "sel.options['".$ftarifa[0]."']= new Option ('".$ftarifa[3]."','".$ftarifa[7]."');";
}
mysql_free_result($sqltarifa);
?>
  sel.onchange = function(){muestraPrecioProducto(this.value,this.id);}
  celdaComboNombreProducto.appendChild(sel);

// input precio producto
  var celdaPrecioProducto = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'precio_producto' + iteration;
  el.id = 'id_producto' + iteration + '_precio';
  el.size = 8;
  celdaPrecioProducto.appendChild(el);
  
  // unidades de producto
  var comboUnidadProducto = row.insertCell(2);
  var sel = document.createElement('select');
  sel.name = 'unidades_producto' + iteration;
  sel.id = 'id_unidades' + iteration;
  sel.options[0] = new Option('Cantidad', '0');
  sel.options[1] = new Option('1', '1');
  sel.options[2] = new Option('2', '2');
  sel.options[3] = new Option('3', '3');
  sel.options[4] = new Option('4', '4');
  sel.options[5] = new Option('5', '5');
  sel.options[6] = new Option('6', '6');
  sel.onchange = function(){calculaTotalProducto1(this.id,this.value);}
  comboUnidadProducto.appendChild(sel);
  
  // Total producto
  var celdaTotalProducto = row.insertCell(3);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'total_producto' + iteration; 
  el.id = 'id_producto' + iteration + '_total';
  el.size = 8;
  celdaTotalProducto.appendChild(el);
}

function calculaTotalProducto1(valor, id) {
// Cogemos el valor del select 
var unidades = document.getElementById(valor).options[document.getElementById(valor).selectedIndex].value;
 //Aqui intento conseguir componer para traerme el valor de id_productonumero_total
var precio = document.getElementById('id_producto' +id+ '_precio').value;
 //Aqui generamos multiplicacion
var multiplica = parseFloat(unidades)*parseFloat(precio);


//Aqui imprimimos en el input el total
document.getElementById('id_producto' +id+ '_total').value= multiplica;
//document.getElementById(id+ '_precio').value = valor;
}

Codigo HTML

Código HTML:

<form action="tableaddrow_nw.html" method="get" name="frm1" id="frm2">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
</p>
<p>

<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
</p>
<table border="1" id="tabla">
  <tr>
   <th colspan="3">Tabla Ejemplo</th>
  </tr>
  <tr>


    <td><?
$sqltarifa=mysql_query("select * from productos");

echo '<select name="nombre_producto1" id="id_producto1" onChange="muestraPrecioProducto1()">';
echo '<option value="0">Seleccione </option>';
while ($ftarifa=mysql_fetch_array($sqltarifa)){
echo '<option value="' . $ftarifa[7] . '" >' . $ftarifa[3] . '</option>';
}
echo '</select>';

mysql_free_result($sqltarifa);
?>

    </td>
        <td><input type="text" name="precio_producto1" id="id_producto1_precio" size="8" value="0"/></td>
        <td>
    <select name="unidades_producto1" id="id_unidades1" onchange="calculaTotalProducto()">
          <option value="0" selected>Cantidad</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
    </select>
    </td> 
        <td><input type="text" name="producto1_total" id="id_producto1_total" size="8" value="0" /></td>
  </tr>
</table> 

Me devuelve este error "document.getElementById("id_producto" + id + "_precio") is null" y no hay manera de pasar el id de la fila para coger el valor y operar con el.

Haber si alguien me puede hechar una mano y decorme que hago mal.

Muchas gracias por vuestro tiempo.

Saludos

[Adler]

Hola
Desde el primer combox mandas a llamar a sel.onchange = function(){muestraPrecioProducto(this.value,this.i d);} pasandole dos parámetros, uno de ellos es el precio por unidad.
Ese valor podemos usarlo para rellenar el campo id_producto' + iteration + '_precio y para darle valor a las opciones de id_unidades' + iteration. De tal manera que la funcion calculaTotalProducto1() quedaría así

Código Javascript:

function calculaTotalProducto1(valor, id) {
var multiplica = parseFloat(id)*parseFloat(valor);
document.getElementById('id_producto' +id+ '_total').value= multiplica;
 

Ahora el problema es rellenar el campo id_producto' +id+ '_total. Cambiaremos alguna cosa
A la función calculaTotalProducto1() le añadiremos otro parámetro, en este caso, iteracion

Código Javascript:

calculaTotalProducto1(this.id,this.value, iteracion)
 

Así finalmente la función quedará así

Código Javascript:

function calculaTotalProducto1(valor, id, index) {
var multiplica = parseFloat(id)*parseFloat(valor);
document.getElementById('id_producto' +index+ '_total').value= multiplica;
}
 

Suerte

[marco_sa]

Hola Adler

Segun tu me lo has enviado no ha funcionado pero gracias a tus explicaciones he podido averiguar como funciona el envio de parametros y asi deducir como configurar las variables de id dinamicas.

Queria aprovechar la oportunidad para preguntarte una cuestion acerca de los parametros enviados en los eventos a una función en el caso del codigo que nos ocupa, como es que el parametro id, si se le hace un alert (id); me manda undefinided.

Me trato de explicar mejor este codigo es del combo:

Código:

  
sel.onchange = function(){calculaTotalProducto1(this.id, this.valor, iteration);}

Aui el de la funcion como a quedado, asi funciona perfectamente:

Código:

function calculaTotalProducto1(valor, id, index) {
// Cogemos el valor del select 
var unidades = document.getElementById(valor).options[document.getElementById(valor).selectedIndex].value;
 //Aqui intento conseguir componer para traerme el valor de id_productonumero_total
var precio = document.getElementById('id_producto' +index+ '_precio').value;
 //Aqui generamos multiplicacion
var multiplica = parseFloat(unidades)*parseFloat(precio);

//Aqui imprimimos en el input el total
document.getElementById('id_producto' +index+ '_total').value= multiplica;

}

Si te fijas en el comienzo de la funcion

Código:

function calculaTotalProducto1(valor, id, index) {

Llamamos la funcion funciona, entre comillas con 3 parametros , eso igual que en todos los lenguajes de programación, ahora bien si haces un alert(id); te dice undefined, por lo tanto entiendo que id viene vacio, y resulta que si lo quito del onchance en el combo o de la funcion, no funciona, igualmente si lo cambiamos de posición, mi pregunta es la siguiente:

¿Que leches hace id, que es o para que le vale a la funcion?

Mil gracias por tu ayuda.

Saludos

[Adler]

Hola

Después de revisar una y otra vez que es lo que podría estar pasando y no encontrar la razón por la que el parámetro id es indefinido. El problema y solución la tienes en esto que imprimes, por que supongo, mas bien sé, que no es un error de tipeo

sel.onchange = function(){calculaTotalProducto1(this.id, this.valor, iteration);}

A todo esto podrías hacer este cambio. Como no usas para nada el valor de la opción, no hace falta que lo pases

Código Javascript:

sel.onchange = function(){calculaTotalProducto1(this.id, iteracion);}
 
function calculaTotalProducto1(id, index) {
var unidades = document.getElementById(id).options[document.getElementById(id).selectedIndex].value;
 

Así queda mas claro para futuras revisiones

Suerte