Evento onChange dentro de codigo Javascript

[marco_sa]

Bueno os pongo todo el codigo para que lo veais, haber si veis algo que yo no veo o alguna otra manera de hacer, lo mismo y mas facil:

¿Que tiene que hacer el formulario?

El formulario tiene 4 celdas por fila,

1ª celda descripción del producto - select nombre producto
2ª celda precio unitario del producto seleccionado - input dependiente de 1ª
3ª celda unidades de cada producto - select unidades
4ª celda total (preciounitario*unidades) - input con el total unidades por precio

Entonces operamos de la siguiente manera, en la 1ª seleccionamos el producto, de hay nos imprime en 2ª el precio unitario, luego seleccionamos las unidades 3ª y en 4ª no calcula el total.

Para hacer esto utilizamos una tabla dinamica hecha con javaScript y acceso a mysql para cargar los productos y sus precios.

Al cambiar de producto con el select 1ª el input 2ª se actualiza, para ello utilizamos el evento onChange, dentro del select, asi llamamos a una funcion javaScript muestraPrecioProductos().

El problema es que al generar la segunda fila de la tabla no incluye el evento onChange por lo tanto no funciona.


Os pongo el codigo JavaScript, completo:

Código:

  <script type="text/javascript">

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);
  
  // Sabemos el numero a insertar
  //alert (lastRow);
  
  // left cell
 /* var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);*/
  
  
  
  // Combo nombre producto
  var celdaComboNombreProducto = row.insertCell(0);
  var sel = document.createElement('select');
//  sel.onchange= muestraPrecioProducto('sel.id');
  
  sel.name = 'nombre_producto' + iteration;
  sel.id = 'id_nombre_producto' + iteration;
  sel.options[0] = new Option('Seleccion', '0');
   
  // Aqui cargamos los productos en el select 
  <?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);
?>

//Aqui esta el problema
+++++++++++++++++++++++++++++++++++++++++++
  sel.onChange = function(){muestraPrecioProducto();}
+++++++++++++++++++++++++++++++++++++++++++
  
  celdaComboNombreProducto.appendChild(sel);

// precio producto
  var celdaPrecioProducto = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'precio_producto' + iteration;
  el.id = 'id_precio_producto' + iteration;
  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.options[0] = new Option('Cantidad', '0');
  sel.options[1] = new Option('1', '1');
  sel.options[2] = new Option('2', '2');
  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_total_producto' + iteration;
  el.size = 8;
  
   
  celdaTotalProducto.appendChild(el);
}


function removeRowFromTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

function muestraPrecioProducto() {
	var indice = document.frm1.nombre_producto1.selectedIndex
	var valor = document.frm1.nombre_producto1.options[indice].value
		document.getElementById('id_precio_producto1').value = valor;
			}

</script>

Aqui el HTML

Código HTML:

<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="nombre_producto1" onChange="muestraPrecioProducto()">';
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_precio_producto1" size="8"></td>
	    <td>
    <select name="unidades_producto1" id"id_unidades_producto1" onchange="calcula_total()">
          <option value="0" selected>Cantidad</option>
          <option value="1">1</option>
          <option value="2">2</option>

    </select>
    </td> 
	    <td><input type="text" name="total_producto1" id="id_total_producto1" size="8" ></td>
  </tr>
</table>
</form> 

Haber si alguien ve el por que de no funcionar el onChange.


Saludos y gracias a todos.