Perl en Español
  1. Home
  2. Tutoriales
  3. Foro
  4. Artículos
  5. Donativos
  6. Publicidad
 

Reubicar input

 
Publicar nuevo tema   Responder al tema    Foros de discusión -> Javascript
Mensaje Mie Jul 18, 2007 2:40 am
marcosss
Perlero Nuevo
Perlero Nuevo
 Registrado: 14 May 2007
Mensajes: 87
Reubicar input Responder citando
¡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.
HTML:
<?
  session_start();
?>

<html>
<head>

<script type="text/javascript">

num=0;
function crearHermano(obj) {
  num++;
                      //Creamos los datos del hermano
 
  fi = document.getElementById('f1');
  contenedor = document.createElement('div');
  contenedor.id = 'div'+num;
  fi.appendChild(contenedor);

  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
 
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
 
  txt = document.createTextNode('DNI: ');                     //Creamos el DNI       
  ele = document.createElement('input');
  ele.type = 'text';
  ele.name = 'cDNIH'+num;
  contenedor.appendChild(txt);
  contenedor.appendChild(ele);
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
       
                                                                                                        //Creamos el nombre
  txt = document.createTextNode('Nombre: ');
  ele = document.createElement('input');
  ele.type = 'text';
  ele.name = 'cNombreH'+num;
  ele.size = '40';
  contenedor.appendChild(txt);
  contenedor.appendChild(ele);
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);

  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt); 
 
 
  txt = document.createElement('<br>');    // Meto un salto de línea
  contenedor.appendChild(txt);
  ele = document.createElement('input');
  ele.type = 'button';
  ele.value = 'Borrar';
  ele.name = 'div'+num;
  ele.onclick = function () {borrar(this.name)}
  contenedor.appendChild(ele);
 
 
}
function borrar(obj) {
  fi = document.getElementById('f1');
  fi.removeChild(document.getElementById(obj));
}


</script>

<title>Crear datos familiares</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>


<?

include("conexion.php");


echo '<form name="f" id="f1" method = "POST" action ="guardarDatosFamiliares.php" OnSubmit="return validar(this)">

//Esto iba antes dentro de un fieldset
<h2>Nuevo hermano</h2>
<input type="button" value="Añadir Hermano" onclick="crearHermano(this)">
</div>
<br><br>
';     
//Hasta aqui llegaba el fieldset

echo'<input name="nHermanosCreados" type="hidden" value="">';      

echo  '<div style="margin-left: 3%; width=200px;">
    Padre: <input name="cNombreP" type="text" size="40">
        &nbsp&nbsp Edad: <input name="cEdadP" size="3" type="text">
    &nbsp&nbsp Estado civil:    
       
  <select name="cECivilP">
      <option value="Soltero">Soltero</option>
      <option value="Casado">Casado</option>
      <option value="Separado">Separado</option>
      <option value="Viudo">Viudo</option>
  </select>
       
        <br><br>
    Estudios: <input name="cEstudiosPadre" type="text">
        &nbsp&nbsp Profesión: <input name="cProfesionP" size="40" type="text">
        &nbsp&nbsp Situación laboral:
       
        <select name="cSituacionLaboralP">
      <option value="Activo">Activo</option>
          <option value="Desempleado">Desempleado</option> 
      <option value="Sus labores">Sus labores</option>
      <option value="Invalidez">Invalidez</option>
    </select>
       
        <br><br>';

echo '
<input name="botonGuardar" type="submit" value="Guardar">

</form>';
?>

</body>
</html>
Mensaje Mie Jul 18, 2007 8:57 am
kidd
Creador de Perl en Español
Creador de Perl en Español
 Registrado: 15 Oct 2003
Mensajes: 1361
Ubicación: México
Responder citando
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
Mensaje Lun Dic 17, 2007 2:12 pm
merlod
Perlero Nuevo
Perlero Nuevo
 Registrado: 17 Dic 2007
Mensajes: 1
Respuesta a insertar donde quieras Responder citando
Javascript:
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>
Publicar nuevo tema   Responder al tema    Foros de discusión -> Javascript Todas las horas son GMT - 6 Horas
Página 1 de 1



Powered by phpBB © 2001, 2005 phpBB Group