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.
