Foros del Web » Programando para Internet » Javascript »

Campos dinamicos - Objeto DOM

Estas en el tema de Campos dinamicos - Objeto DOM en el foro de Javascript en Foros del Web. Hola a todos quiero compartir este codigo para crear campos dinamicos con objetos DOM. Espero les ayude a generar campos de forma dinamica, despues agregare ...
  #1 (permalink)  
Antiguo 19/07/2011, 13:33
Avatar de quitos  
Fecha de Ingreso: junio-2004
Mensajes: 119
Antigüedad: 20 años, 5 meses
Puntos: 1
Información Campos dinamicos - Objeto DOM

Hola a todos quiero compartir este codigo para crear campos dinamicos con objetos DOM.

Espero les ayude a generar campos de forma dinamica, despues agregare un javascript que valide de forma dinamica los campos generados, para solicitar los campos indispensables.

Código PHP:
<script>
/*************** Comienza Agregar 4 Campos Dinamicos ************************/
camposmax=4;

var 
numero 0;
var 
fn 0;
var 
cont 0;
limit=camposmax-1;
// Funciones comunes
c= function (tag) { // Crea un elemento
   
return document.createElement(tag);
}
= function (id) { // Retorna un elemento en base al id
   
return document.getElementById(id);
}
= function (evt) { // Retorna el evento
   
return (!evt) ? event evt;
}
= function (evt) { // Retorna el objeto que genera el evento
   
return evt.srcElement ?  evt.srcElement evt.target;
}

function 
addField() {
    if(
cont == limit){
        
document.getElementById('addPest').style.display="none";
    }
    
cont++;
    
container d('files');
    
    
span c('DIV');
    
span.className 'cssPesta';
    
span.id 'file' + (++numero);
    
    
divclo c('DIV');
    
divclo.align ="right";
        
imgclo c('IMG');   
        
imgclo.name span.id;
        
imgclo.src 'images/fileclose.png';
        
imgclo.onclick removeField;
        
imgclo.height '15';
        
imgclo.alt 'x';
        
imgclo.className 'hand';
    
  
divclo.appendChild(imgclo);
    
    
divord c('DIV');
    
divord.className 'pesTit';
    
divord.innerHTML ="Orden: &nbsp; &nbsp; &nbsp; ";
        
orden c('INPUT');   
        
orden.name 'pestania['+(++fn)+'][orden]';
        
orden.type 'text';
        
orden.size '1';
    
  
divord.appendChild(orden);
    
    
divnom c('DIV');
    
divnom.className 'pesTit';
    
divnom.innerHTML ="Nombre: &nbsp; &nbsp;";
        
nombre c('INPUT');   
        
nombre.name 'pestania['+(fn)+'][nombre]';
        
nombre.type 'text';
        
nombre.size '26';
    
  
divnom.appendChild(nombre);
  
    
divtit c('DIV');
    
divtit.className 'pesTit';
    
divtit.innerHTML ="Titulo: &nbsp; &nbsp; &nbsp; &nbsp;";
        
titulo c('INPUT');   
        
titulo.name 'pestania['+(fn)+'][titulo]';
        
titulo.type 'text';
        
titulo.size '26';
    
  
divtit.appendChild(titulo);
    
    
divcon c('DIV');
    
divcon.className 'pesTit';
    
divcon.innerHTML ="Contenido: ";
        
contenido c('textarea');   
        
contenido.name 'pestania['+(fn)+'][contenido]';
        
contenido.cols '34';
        
contenido.rows '8';
        
contenido.className 'tinymce';
    
  
divcon.appendChild(contenido);
  
    
    
    
    
span.appendChild(divclo);
    
span.appendChild(divord);
    
span.appendChild(divnom);
    
span.appendChild(divtit);
    
span.appendChild(divcon);
    
container.appendChild(span);
}
removeField = function (evt) {
    
cont--;
    if(
cont == limit){
        
document.getElementById('addPest').style.display="block";
    }
    
lnk f(e(evt));
    
span d(lnk.name);
    
span.parentNode.removeChild(span);
}
/*************** Termina Agregar 4 Campos Dinamicos ************************/
</script>
<style>
.pesTit{
    height:30px;
    color:#666;
    font-size:12px;
    font-style:italic;
}
.cssPesta{
    height:290px;
    border-bottom:2px #999 dashed;
    margin-bottom:15px;
    margin-top:15px;
    padding-left:52px;
}
</style>

<p>&nbsp;</p>
<form method="post" name="formUsr">
            <table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td height="35" colspan="2" class="menuDivider"><strong>Contenido</strong>
                </td>
              </tr>
              <tr>
                <td width="85" height="35">&nbsp;&nbsp;&nbsp;Nombre:</td>
                <td width="265"><input type="text" name="contenido[nombre]" id="contenido_nombre" /></td>
              </tr>
              <tr>
                <td height="35">&nbsp;&nbsp;&nbsp;Etiqueta:</td>
                <td><input type="text" name="contenido[etiqueta]" id="contenido_etiqueta" /></td>
              </tr>
              <tr>
                <td height="60" valign="top">&nbsp;&nbsp;&nbsp;Descripci&oacute;n:</td>
                <td valign="top"><textarea name="contenido[descripcion]" id="contenido_descripcion" cols="30" rows="3"></textarea></td>
              </tr>
              <tr>
                <td height="20" valign="top">&nbsp;</td>
                <td valign="top">&nbsp;</td>
              </tr>
              <tr>
                <td height="60" valign="top">&nbsp;&nbsp; Pie&nbsp;Legal:</td>
                <td valign="top"><textarea name="contenido[legal]" id="contenido_legal" cols="30" rows="3"></textarea></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td height="30" valign="top">&nbsp;</td>
                <td align="right" valign="bottom">
                <!-- Este boton es el que hace que se agreguen los campos de forma dinamica -->
                <a href="JavaScript:;" id="addPest" onclick="JavaScript:addField();" accesskey="5"  class="main_link">A&ntilde;adir Pesta&ntilde;a</a>

          </td>
              </tr>
              <tr>
                <td colspan="2" valign="top">
                      <!-- Aqui se cargan los campos dinamicos --!>
                      <div id="files"></div>
                </td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td align="right">
                <input type="reset" name="btnLimpiar" value="Limpiar" id="btnLimpiar" /> &nbsp; &nbsp;
                <input type="submit" name="btnSave" value="Guardar Contenido" id="btnSave" /></td>
              </tr>
            </table>
            <p>&nbsp;</p>
</form> 
Cualquier observacion es bien aceptada.


Aclaro no todo el código es mio, yo solo adecue demasiadas ideas que he visto por toda la web.

Etiquetas: campos, dinamicos, dom, html, objeto, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:18.