• Publicidad

Reubicar input

Discute todo acerca de JavaScript así como DHTML o la tecnología AJAX.

Reubicar input

Notapor marcosss » 2007-07-18 03:40 @194

¡Hola!

Estoy programando en JavaScript y PHP y tengo un problemilla.

Yo creo los hermanos dinámicamente (el código está abajo) y los creaba dentro de un fieldset, pero para validar los datos introducidos por el usuario tuve que quitar el fieldset, porque si no, no me dejaba validarlo (el código de la validación no lo he incluido para no enrevesar más el código). Entonces ahora, al pulsar yo el botón para crear un nuevo hermano, como no tiene fieldset me sale al final de la página, pero yo quiero que me salga donde está el código de crear el hermano. ¿Cómo se puede hacer eso?

Muchas gracias.
Sintáxis: [ Descargar ] [ Ocultar ]
  1. <?  
  2. session_start(); 
  3. ?> 
  4.  
  5. <html> 
  6. <head> 
  7.  
  8. <script type="text/javascript"> 
  9.  
  10. num=0; 
  11. function crearHermano(obj) { 
  12. num++; 
  13. //Creamos los datos del hermano  
  14.  
  15. fi = document.getElementById('f1');  
  16. contenedor = document.createElement('div');  
  17. contenedor.id = 'div'+num;  
  18. fi.appendChild(contenedor);  
  19.  
  20. txt = document.createElement('<br>'); // Meto un salto de línea 
  21. contenedor.appendChild(txt); 
  22.  
  23. txt = document.createElement('<br>'); // Meto un salto de línea 
  24. contenedor.appendChild(txt); 
  25.  
  26. txt = document.createTextNode('DNI: '); //Creamos el DNI  
  27. ele = document.createElement('input');  
  28. ele.type = 'text';  
  29. ele.name = 'cDNIH'+num;  
  30. contenedor.appendChild(txt); 
  31. contenedor.appendChild(ele);  
  32. txt = document.createElement('<br>'); // Meto un salto de línea 
  33. contenedor.appendChild(txt); 
  34. txt = document.createElement('<br>'); // Meto un salto de línea 
  35. contenedor.appendChild(txt); 
  36.  
  37. //Creamos el nombre 
  38. txt = document.createTextNode('Nombre: '); 
  39. ele = document.createElement('input');  
  40. ele.type = 'text';  
  41. ele.name = 'cNombreH'+num;  
  42. ele.size = '40'; 
  43. contenedor.appendChild(txt); 
  44. contenedor.appendChild(ele);  
  45. txt = document.createElement('<br>'); // Meto un salto de línea 
  46. contenedor.appendChild(txt); 
  47. txt = document.createElement('<br>'); // Meto un salto de línea 
  48. contenedor.appendChild(txt); 
  49.  
  50. txt = document.createElement('<br>'); // Meto un salto de línea 
  51. contenedor.appendChild(txt); 
  52. txt = document.createElement('<br>'); // Meto un salto de línea 
  53. contenedor.appendChild(txt);  
  54.  
  55.  
  56. txt = document.createElement('<br>'); // Meto un salto de línea 
  57. contenedor.appendChild(txt); 
  58. ele = document.createElement('input');  
  59. ele.type = 'button';  
  60. ele.value = 'Borrar';  
  61. ele.name = 'div'+num;  
  62. ele.onclick = function () {borrar(this.name)}  
  63. contenedor.appendChild(ele);  
  64.  
  65.  
  66. function borrar(obj) { 
  67. fi = document.getElementById('f1');  
  68. fi.removeChild(document.getElementById(obj));  
  69.  
  70.  
  71. </script> 
  72.  
  73. <title>Crear datos familiares</title> 
  74. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  75. </head> 
  76.  
  77. <body> 
  78.  
  79.  
  80. <? 
  81.  
  82. include("conexion.php"); 
  83.  
  84.  
  85. echo '<form name="f" id="f1" method = "POST" action ="guardarDatosFamiliares.php" OnSubmit="return validar(this)"> 
  86.  
  87. //Esto iba antes dentro de un fieldset 
  88. <h2>Nuevo hermano</h2> 
  89. <input type="button" value="Añadir Hermano" onclick="crearHermano(this)"> 
  90. </div> 
  91. <br><br> 
  92. ';  
  93. //Hasta aqui llegaba el fieldset 
  94.  
  95. echo'<input name="nHermanosCreados" type="hidden" value="">';  
  96.  
  97. echo '<div style="margin-left: 3%; width=200px;">  
  98. Padre: <input name="cNombreP" type="text" size="40"> 
  99. &nbsp&nbsp Edad: <input name="cEdadP" size="3" type="text"> 
  100. &nbsp&nbsp Estado civil:  
  101.  
  102. <select name="cECivilP"> 
  103. <option value="Soltero">Soltero</option> 
  104. <option value="Casado">Casado</option> 
  105. <option value="Separado">Separado</option> 
  106. <option value="Viudo">Viudo</option> 
  107. </select> 
  108.  
  109. <br><br> 
  110. Estudios: <input name="cEstudiosPadre" type="text"> 
  111. &nbsp&nbsp Profesión: <input name="cProfesionP" size="40" type="text"> 
  112. &nbsp&nbsp Situación laboral:  
  113.  
  114. <select name="cSituacionLaboralP"> 
  115. <option value="Activo">Activo</option> 
  116. <option value="Desempleado">Desempleado</option>  
  117. <option value="Sus labores">Sus labores</option> 
  118. <option value="Invalidez">Invalidez</option> 
  119. </select> 
  120.  
  121. <br><br>'; 
  122.  
  123. echo ' 
  124. <input name="botonGuardar" type="submit" value="Guardar"> 
  125.  
  126. </form>'; 
  127. ?> 
  128.  
  129. </body> 
  130. </html> 
marcosss
Perlero nuevo
Perlero nuevo
 
Mensajes: 87
Registrado: 2007-05-14 06:23 @307

Publicidad

Notapor kidd » 2007-07-18 09:57 @456

Hola:

Me parece que el problema es que estás creando los nuevos campos en base a tu botón. Lo que yo haría es crear un div con un id abajo del botón y usar ese como contenedor para los nuevos campos.


Saludos
Uriel Lizama Perl programmer fundador de Perl en Español
Perl Programming Language
Avatar de Usuario
kidd
Creador de Perl en Español
Creador de Perl en Español
 
Mensajes: 1166
Registrado: 2003-10-15 16:52 @744
Ubicación: México

Respuesta a insertar donde quieras

Notapor merlod » 2007-12-17 15:12 @675

Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
function insertarFila(obj) {
fila = obj.parentNode.parentNode;

  var elmTBODY = document.getElementById('CuerpoTabla');
  var elmTR;
  var elmTD;
  var elmText;

     elmTR = document.createElement('tr');
     for (var i=0; i<3; i++) {
        elmTD = document.createElement('td');
        elmText = document.createTextNode('Nueva celda.');
        elmTD.appendChild(elmText);
        elmTR.appendChild(elmTD);
                caja=document.createElement('INPUT');
                if(i==1)
                {caja.type='radio';}
                else
                {caja.type='text';caja.value="hoalaasjasklfjskafj";}
        elmTD.appendChild(caja);
                }
     elmTBODY.insertBefore(elmTR,fila.nextSibling)
   
}

function eliminarFila(obj) {
  var elmTBODY = document.getElementById('CuerpoTabla');
   elmTBODY.removeChild(fila.nextSibling);
 
}

//-->
</script>
</head>
<body>
<table width="100%" border="5" id="t1" >
  <tbody id="CuerpoTabla">
  <tr>
    <td><a href="#" onClick="insertarFila(this);">insertar</a></td>
    <td><a href="#" onClick="eliminarFila(this);">Eliminar</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#" onClick="insertarFila(this);">insertar</a></td>
    <td><a href="#" onClick="eliminarFila(this);">Eliminar</a></td>
    <td>&nbsp;</td>
  </tr>
  </tbody>
</table>


</body>
Coloreado en 0.002 segundos, usando GeSHi 1.0.8.4
merlod
Perlero nuevo
Perlero nuevo
 
Mensajes: 1
Registrado: 2007-12-17 15:08 @672


Volver a JavaScript

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado

cron