onChange en filas dinámicas no funciona

[educlon]

Bueno, acudo a ustedes a ver si me pueden dar una mano, ya que estoy trabado y no veo el error.

Tengo un formulario con una fila de controles. Cada fila está compuesta por 1 select y dos inputs.

Cuando pulso el botón "Agregar Producto" se van agregando filas dinámicamente, y en cada fila aparecen los 3 controles que me permiten seleccionar un producto, ingresar la cantidad y el precio.

El select se llena con los productos desde una BD. Necesito que al seleccionar un producto, se ejecute onChange y me muestre el precio en el tercer input. Estuve tratando pero el código no me funciona.

El javascript que utilizo es este:

Código Javascript:

var indiceFilaForm=1;
function agregarProducto()
{
    myNewRow = document.getElementById("tablaProducto").insertRow(-1);
    myNewRow.id=indiceFilaForm;
    myNewCell=myNewRow.insertCell(-1);
    myNewCell.innerHTML="<select name='vid_producto["+indiceFilaForm+"]' onchange='cambia_precio("+indiceFilaForm+")' >{/literal}{$marprod_list}{literal}</select>";
    myNewCell=myNewRow.insertCell(-1);
    myNewCell.innerHTML="Cant.<input type=text name='vcantidad["+indiceFilaForm+"]' size='3' value='1' style='text-align:center;' />";
    myNewCell=myNewRow.insertCell(-1);
    myNewCell.innerHTML="u$s<input type=text name='vprecio["+indiceFilaForm+"]' id='vprecio' size='6' style='text-align:right;' />";
    myNewCell=myNewRow.insertCell(-1);
    myNewCell.innerHTML="<input type='button'  value='Quitar' onclick='quitarProducto(this)'>";
    myNewCell=myNewRow.insertCell(-1);
    myNewCell.innerHTML="";
    myNewCell=myNewRow.insertCell(-1);
    myNewCell.innerHTML="";
    indiceFilaForm++;
}
 
function quitarProducto(obj) 
{
    var oTr = obj;
    while(oTr.nodeName.toLowerCase()!='tr')
    {
        oTr=oTr.parentNode;
    }
    var root = oTr.parentNode;
    root.removeChild(oTr);
}
 
// Precios de los productos
var precio_1 = "45.00";
var precio_2 = "90.00";
var precio_3 = "75.00";
var precio_5 = "220.00";
...
var precio_35 = "200.00";
 
function cambia_precio(indice)
{
    var id_producto;
    id_producto = document.f1.vid_producto[indice][document.f1.vid_producto[indice].selectedIndex].value;
    if (id_producto != "") 
    {
        mi_precio = eval("precio_" + id_producto);
        document.f1.vprecio[indice].value = mi_precio;
        document.f1.vprecio[indice].text = mi_precio;
    }
    else
    {
        document.f1.vprecio[indice].value = "";
        document.f1.vprecio[indice].text = "";
    }
}
 

Los var precio_1 a precio_35 se arman desde PHP.
Los

Código:

{literal}{/literal}

aparecen porque utilizo SMARTY, y el el javascript me imprimen los option del select con los productos, eso esta andando bien.

En definitiva, las filas se agregan bien, y los controles quedan bien indexados, pero no logro hacer que aparezca el precio dentro del tercer input.

Si alguien me puede decir donde está el error, se lo voy a agradecer, ya que yo no lo puedo ver aun.

Desde ya mil gracias...

Eduardo