Campos dinamicos - Objeto DOM

[quitos]

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); 
} 
d = function (id) { // Retorna un elemento en base al id 
   return document.getElementById(id); 
} 
e = function (evt) { // Retorna el evento 
   return (!evt) ? event : evt; 
} 
f = 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.