Formulario dinamico incrementable
Publicado por Pablo (1 intervención) el 03/07/2006 18:43:12
Hola que tal amigos, tengo este script que me agrega una fila de campos al apretar un boton funciona bien y los campos que se crean tienen un nombre segun se incrementa un campo oculto que uso como contador, mi problema es que no encuentro la forma de hacer que el select sea dependiente del campo codigo y que los valores en los campos A y B se auto sumen con un evento onClick en el campo C, en realidad este es solo un ejemplo que simplifique ya que realmente lo necesito con mas campos y otras operaciones pero si me ayudan con estas podre arreglarmelas o haber si alguien sabe como hacerlo con ASP y me pasa el dato saludos y gracias...
<html><head>
<title>Agregar fila de campos DINAMICOS</title>
<script type="text/javascript">
function adicionarFila(){
var cont = document.getElementById("cont");
var filas = document.getElementById("filas");
cont.setAttribute("value", parseInt(cont.value,0)+1);
var tabla = document.getElementById("contenido").tBodies[0];
var fila = document.createElement("TR");
fila.setAttribute("align","center");
var celda1 = document.createElement("TD");
var codigo = document.createElement("INPUT");
codigo.setAttribute("type","text");
codigo.setAttribute("size","8");
codigo.setAttribute("maxlength","20");
codigo.setAttribute("name","codigo" + cont.value);
celda1.appendChild(codigo);
var celda2 = document.createElement("TD");
var sel = document.createElement("SELECT");
sel.setAttribute("size","1");
sel.setAttribute("name","sel" + cont.value);
opcioncur = document.createElement("OPTION");
opcioncur.innerHTML = '';
opcioncur.value = '';
sel.appendChild(opcioncur);
opcion1 = document.createElement("OPTION");
opcion1.innerHTML = "este Select depende de lo que";
opcion1.value = "este Select depende de lo que";
sel.appendChild(opcion1);
opcion2 = document.createElement("OPTION");
opcion2.innerHTML = "se ponga en el anterior campo";
opcion2.value = "se ponga en el anterior campo";
sel.appendChild(opcion2);
celda2.appendChild(sel);
var celda3 = document.createElement("TD");
var valorA = document.createElement("INPUT");
valorA.setAttribute("type","text");
valorA.setAttribute("size","1");
valorA.setAttribute("maxlength","3");
valorA.setAttribute("name","valorA" + cont.value);
celda3.appendChild(valorA);
var celda4 = document.createElement("TD");
var valorB = document.createElement("INPUT");
valorB.setAttribute("type","text");
valorB.setAttribute("size","1");
valorB.setAttribute("maxlength","3");
valorB.setAttribute("name","valorB" + cont.value);
celda4.appendChild(valorB);
var celda5 = document.createElement("TD");
var valorC = document.createElement("INPUT");
valorC.setAttribute("type","text");
valorC.setAttribute("size","1");
valorC.setAttribute("maxlength","3");
valorC.setAttribute("name","valorC" + cont.value);
celda5.appendChild(valorC);
var celda6 = document.createElement('TD');
var boton = document.createElement('INPUT');
boton.setAttribute('type','button');
boton.setAttribute('value','borrar');
boton.onclick=function(){borrarFila(this);}
celda6.appendChild(boton);
fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);
fila.appendChild(celda6);
tabla.appendChild(fila);
}
function borrarFila(button){
var fila = button.parentNode.parentNode;
var tabla = document.getElementById('contenido').getElementsByTagName('tbody')[0];
tabla.removeChild(fila);
}
</script>
</head>
<body onLoad="adicionarFila()">
<Form name="detalle" action="ej.asp" method="get">
<input name="cont" type="hidden" id="cont" value="0" >
<input name="filas" type="hidden" id="filas" value="" >
<table align=center width=20% cellpadding=0 cellspacing=0 id="contenido" border="1">
<tr align="center">
<td>codigo</td>
<td>Select dependiente de Codigo</td>
<td>A +</td>
<td>B =</td>
<td>C</td>
<td> </td>
</tr>
</table>
<table align=center width=20% cellpadding=0 cellspacing=0 border="1">
<tr>
<td> </td>
</tr>
<tr align="center">
<td align="CENTER"><input name="enviar" type="submit" id="enviar" value="enviar" onClick="filas.value=cont.value, cont.value=0">
<input name="nueva_fila" type="button" id="nueva_fila" value="nueva fila" onClick="adicionarFila()"></td>
</tr>
</table>
</form>
</body>
</html>
<html><head>
<title>Agregar fila de campos DINAMICOS</title>
<script type="text/javascript">
function adicionarFila(){
var cont = document.getElementById("cont");
var filas = document.getElementById("filas");
cont.setAttribute("value", parseInt(cont.value,0)+1);
var tabla = document.getElementById("contenido").tBodies[0];
var fila = document.createElement("TR");
fila.setAttribute("align","center");
var celda1 = document.createElement("TD");
var codigo = document.createElement("INPUT");
codigo.setAttribute("type","text");
codigo.setAttribute("size","8");
codigo.setAttribute("maxlength","20");
codigo.setAttribute("name","codigo" + cont.value);
celda1.appendChild(codigo);
var celda2 = document.createElement("TD");
var sel = document.createElement("SELECT");
sel.setAttribute("size","1");
sel.setAttribute("name","sel" + cont.value);
opcioncur = document.createElement("OPTION");
opcioncur.innerHTML = '';
opcioncur.value = '';
sel.appendChild(opcioncur);
opcion1 = document.createElement("OPTION");
opcion1.innerHTML = "este Select depende de lo que";
opcion1.value = "este Select depende de lo que";
sel.appendChild(opcion1);
opcion2 = document.createElement("OPTION");
opcion2.innerHTML = "se ponga en el anterior campo";
opcion2.value = "se ponga en el anterior campo";
sel.appendChild(opcion2);
celda2.appendChild(sel);
var celda3 = document.createElement("TD");
var valorA = document.createElement("INPUT");
valorA.setAttribute("type","text");
valorA.setAttribute("size","1");
valorA.setAttribute("maxlength","3");
valorA.setAttribute("name","valorA" + cont.value);
celda3.appendChild(valorA);
var celda4 = document.createElement("TD");
var valorB = document.createElement("INPUT");
valorB.setAttribute("type","text");
valorB.setAttribute("size","1");
valorB.setAttribute("maxlength","3");
valorB.setAttribute("name","valorB" + cont.value);
celda4.appendChild(valorB);
var celda5 = document.createElement("TD");
var valorC = document.createElement("INPUT");
valorC.setAttribute("type","text");
valorC.setAttribute("size","1");
valorC.setAttribute("maxlength","3");
valorC.setAttribute("name","valorC" + cont.value);
celda5.appendChild(valorC);
var celda6 = document.createElement('TD');
var boton = document.createElement('INPUT');
boton.setAttribute('type','button');
boton.setAttribute('value','borrar');
boton.onclick=function(){borrarFila(this);}
celda6.appendChild(boton);
fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);
fila.appendChild(celda6);
tabla.appendChild(fila);
}
function borrarFila(button){
var fila = button.parentNode.parentNode;
var tabla = document.getElementById('contenido').getElementsByTagName('tbody')[0];
tabla.removeChild(fila);
}
</script>
</head>
<body onLoad="adicionarFila()">
<Form name="detalle" action="ej.asp" method="get">
<input name="cont" type="hidden" id="cont" value="0" >
<input name="filas" type="hidden" id="filas" value="" >
<table align=center width=20% cellpadding=0 cellspacing=0 id="contenido" border="1">
<tr align="center">
<td>codigo</td>
<td>Select dependiente de Codigo</td>
<td>A +</td>
<td>B =</td>
<td>C</td>
<td> </td>
</tr>
</table>
<table align=center width=20% cellpadding=0 cellspacing=0 border="1">
<tr>
<td> </td>
</tr>
<tr align="center">
<td align="CENTER"><input name="enviar" type="submit" id="enviar" value="enviar" onClick="filas.value=cont.value, cont.value=0">
<input name="nueva_fila" type="button" id="nueva_fila" value="nueva fila" onClick="adicionarFila()"></td>
</tr>
</table>
</form>
</body>
</html>
Valora esta pregunta
0