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

[zerokilled]

el problema es que los nombre de los inputs estan compuesto de la forma "vprecio[1]", "vprecio[2]", etc. luego en javascript no se puede usar el nombre en la sintaxis de punto como en la siguiente linea document.f1.vprecio[indice].value = mi_precio; javascript interpreta la porcion en azul como un objeto indexado, es decir, un array o coleccion de nodos o coleccion de elementos. sin embargo, ese no es tu caso.

para solucionarlo tienes que cambiar la sintaxis a la siguiente forma: document.f1['vprecio' + indice].value = mi_precio; es decir, f1[nombre_input] donde nombre_input es un string.

[educlon]

Excelente, muchas gracias ZEROKILLED, hice lo que me comentaste y funcionó, la verdad no sabía que no se podía usar el índice en este caso. Voy a investigar mas este asunto. Para el que lo desee, dejo el codigo completo con tres items de menu:

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+")' ><option value=1>AirLink - PCI AIR LINK N (u$s 45.00)</option><option value=2>American Tourister - FUNDAS TELA AVION (u$s 8.00)</option><option value=3>Case Logic - CASE LOGIC (u$s 36.00)</option></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="23.00";
var precio_2="120.00";
var precio_3="54.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 = "";
    }
}
 

Código HTML:

<table>
<tr class="tablerow1">
	<td width="10%"><b>Articulos</b></td>
	<td width="90%">
		<table cellpadding='3' cellspacing='3' style='border:#999999' id="tablaProducto">
			<tr bgColor='#CCCCCC'></tr>
		</table>
		<input type="button" onClick="agregarProducto()" value="Agregar Producto" >
	</td>
</tr>
<table> 

Espero que les sirva

Mil gracias y saludos...

Eduardo