Tema: Crear y remover inputs
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 08/12/2009, 11:18
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 2 meses
Puntos: 20
Respuesta: Crear y remover inputs
Pensaba que solo haría falta este trozo de código

Código javascript: 
Ver original
  1. var Handler = {
  2. add: function(elem, event, handler, capture){
  3.     try{
  4.     elem.addEventListener(event, handler, capture);
  5.     } catch(error){
  6.     elem.attachEvent('on' + event, handler);
  7.     }
  8. },
  9.  
  10. remove: function(elem, event, handler, capture){
  11.     try{
  12.     elem.removeEventListener(event, handler, capture);
  13.     } catch(error){
  14.     elem.detachEvent('on' + event, handler);
  15.     }
  16. }
  17. } // Handler;

Pero también hace falta todo el javascript price.js para conseguir el efecto, vaya si que es complicado....

Trasteando un poco he conseguido sacarlo sin utilizar tu código zerokilled. Mira que te parece.

¿Podrías simplificarlo??

Código html: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html> 
  3. <head>
  4. <title>Crear y remover inputs</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <style>
  7. body, td, th, div, p {
  8. color:#000000;
  9. font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  10. font-size:small;
  11. }
  12. input {
  13. margin:0.3em;
  14. }
  15. a.removelink {
  16. background:transparent url(delete.png) no-repeat scroll 4px 0;
  17. color:#999999;
  18. font-size:0.9em;
  19. padding:1px 0 1px 24px;
  20. text-decoration:none;
  21. }
  22. a.addlink {
  23. background:transparent url(add.png) no-repeat scroll left top;
  24. color:#999999;
  25. font-size:0.9em;
  26. padding:1px 0 1px 20px;
  27. text-decoration:none;
  28. cursor:pointer;
  29. }
  30. </style>
  31. <script type="text/javascript">
  32. <!--
  33. num=0;
  34. function crear(obj) {
  35.   num++;
  36.   fi = document.getElementById('productos'); 
  37.   contenedor = document.createElement('div'); 
  38.   contenedor.id = 'div'+num; 
  39.   fi.appendChild(contenedor); 
  40.  
  41.   // primer input
  42.   ele = document.createElement('input'); 
  43.   ele.name = '_default_host[]';
  44.   ele.className = 'cajatexto';
  45.   ele.size = '5';
  46.   contenedor.appendChild(ele); 
  47.   
  48.    // segundo input
  49.   ele = document.createElement('input'); 
  50.   ele.name = '_default_host[]';
  51.   ele.className = 'cajatexto';
  52.   ele.size = '30';
  53.   contenedor.appendChild(ele); 
  54.   
  55.    // tercer input
  56.   ele = document.createElement('input'); 
  57.   ele.name = '_default_host[]';
  58.   ele.className = 'cajatexto';
  59.   ele.size = '5';
  60.   contenedor.appendChild(ele); 
  61.   
  62.    // cuarto input
  63.   ele = document.createElement('input'); 
  64.   ele.name = '_default_host[]';
  65.   ele.className = 'cajatexto';
  66.   ele.size = '5';
  67.   contenedor.appendChild(ele); 
  68.   
  69.   // boton eliminar
  70.   ele = document.createElement('a'); 
  71.   ele.href = '#';
  72.   ele.name = 'div'+num;
  73.   ele.onclick = function () {borrar(this.name)}
  74.   ele.className = 'removelink';
  75.   ele.innerHTML = 'Eliminar';
  76.   contenedor.appendChild(ele);
  77. }
  78. function borrar(obj) {
  79.   fi = document.getElementById('productos'); 
  80.   fi.removeChild(document.getElementById(obj)); 
  81. }
  82. --> 
  83. </script>
  84.  
  85. </head>
  86. <body>
  87. <form method="post" action="#">
  88. <div id="productos"></div>
  89. <div><a title="Add another field" class="addlink" onclick="crear(this)">Añadir</a></div>
  90. </form> 
  91. </body>
  92. </html>


Salu2!