Crear Formulario dinamico

diegosotomayor · #1 (**permalink**) 13/10/2010, 11:38

Hola amigos, la verdad es que soy nuevo en esto, me pidieron hacer un reporte en el cual, yo tengo un campo de texto junto con un boton, cada vez que le aprieto al boton se agrega otro campo de texto con otro boton. Mi problema es, como hago para que al apretar el boton de cualquier renglon se agregue otro campo de texto con su boton, exactamente debajo del que le aprete. ¿¿Me explico?? No quiero que se agregue hasta el final.

este es mi codigo js

Código:

function crearNivel(nvo,proc,K,J,L,M)
{
				
					
						K++;
						i++;
						J=0;
						L=0;
						aux = "";
						aux += "<div id=\"campos_"+i+"\">";
						aux += "<table>";
						aux += "<tr>";
						aux += "<td><input type=\"button\" id=\"mas"+K+"\" name=\"mas\" onclick=\"crearNivel('nuevo','nvo','"+K+"','"+J+"','"+L+"','"+M+"')\" value=\"+\"></td>";
						aux += "<td><input type=\"button\" id=\"nivel"+K+"\" name=\"nivel\" onclick=\"crearNivel('bajar','sub','"+K+"','"+J+"','"+L+"','"+M+"')\" value=\">\"></td>";
						aux += "<td colspan=2>&nbsp;</td>";
						aux += "<td><input type=\"text\"  id=\"txtcarpeta"+K+"\" name=\"txtcarpeta"+K+"\" value=\"Escribir nombre de carpeta\" onfocus=\"brrtxt(this.id)\" onkeypress=\"return parse(event)\" onblur=\"checktxt(this.id) \"> ";
						aux += "<td colspan=2>&nbsp;</td>";
						aux += "<td><select id=\"select"+K+"\" name=\"select"+K+"\" style=\"display:none\"><option value=\"-\">-</option><?echo $option;?></select>"
						aux += "</tr>";
						aux += "</table>";
						aux += "</div>";
						document.getElementById('tabla1').innerHTML += aux;
						document.getElementById('a').value = K
						document.getElementById('b').value = J
						document.getElementById('c').value = L
						document.getElementById('d').value = M
						
				}
			
			
	}		

	   
}

y esto es lo que tengo en HTML

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link href="../carpetas/estilos.css" rel="stylesheet" type="text/css" media="screen" />
		<link href="../carpetas/default.css" rel="stylesheet" type="text/css" media="screen" />
		<script type="text/javascript" src="./confArbol.js"></script>
		<?php $xajax->printJavascript(); ?>
	</head>
	<body>
		<form name="principal" method="post">  
			<input type="hidden" id="option" name="option" value="<?php echo $option;?>">
			<input type="hidden" id="identi" name="identi" value="<?php echo $a;?>">
			<input type="hidden" id="selec" name="selec" value="<?php echo $b;?>">
			
			<input type="hidden" id="url" name="url" value="<?php echo $c;?>">
			<input type="hidden" id="a" name="a" value=0>
			<input type="hidden" id="b" name="b" value=0>
			<input type="hidden" id="c" name="c" value=0>
			<input type="hidden" id="d" name="d" value=0>
			<table id="tgrisimg" align=center width=100%>
				<!--th> DOCUMENTACION    GENERAL    DEL    PROYECTO</th-->  
				<TD> CONFIGURACION DE ARBOL DE ARCHIVOS </TD>
			</table>
			</br>
			</br>
			<table align="right" width=100%>
				
				<TD  align="right">
				<input type="button" id="btnLimpiar" name="btnLimpiar" onClick="limpiar()" value="Limpiar" >
				<input type="button" id="btnguardar" name="btnguardar" onclick="xajax_guardar(xajax.getFormValues('principal', 1))" value="Guardar">
				</TD>
				
			</table>
			<BR/>
			<HR>
			
			<BR/>
			<div id="mensaje">
				<table align=center width=95%>
					<tr>
						<td id='tdmensaje' class='CeldaSola' value="HOLA" style='text-align:center; width:100%;'></td>
					</tr>
				</table>
			</div>
				<div id="tabla1">
					<table>
						<tr>
							<td><input type="button" id="mas" name="mas" onclick="crearNivel('nuevo','',0,0,0,0)" value="+"></td>
							<td><input type="button" id="nivel" name="mas" disabled="true" value=">" ></td>
							<td colspan=2>&nbsp;</td>
							<td><input type="text"  id="txtcarpeta0" name="txtcarpeta0" value="Escribir nombre de carpeta" onfocus="brrtxt(this.id)" onkeypress="return parse(event)" onblur="checktxt(this.id) " > 
							<td><select id="select0" name="select0" style="display:none"><option>-</option><?echo $option;?></select>
							
						</tr>
						</table>
									
				</div>
		</form>
        
</html>

espero su ayuda ya que es urgente! =S Gracias de antemano

IsaBelM · #2 (**permalink**) 13/10/2010, 12:15

has de recorrer y modificar el dom. busca información sobre el método insertBefore(). en cuanto a que no quieres se inserte hasta el final, ¿qué quieres decir?

diegosotomayor · #3 (**permalink**) 13/10/2010, 13:15

Gracias Isabel,
Supongramos que tengo 3 campos de texto ccada uno con su boton de agregar
lo que yo quiero hacer es agregar otro campo de texto entre el primero y el segundo. Asi como lo tengo, si le doy clic en cualquiera de de los 3 botones de agregar, me agrega otro campo de texto con su boton pero hasta el final, osea hasta abajo de los 3 que ya tenia, yo quiero que los agregue debao del que ya tengo creado.

IsaBelM · #4 (**permalink**) 13/10/2010, 14:49

busca información de como añadir nodos (insertBefore)