Tema: Crear y remover inputs
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 08/12/2009, 05:56
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
He probado como decías ZeroKilled, pero tengo dos problemas.

1 - El botón add aparece 1 vez debajo de la primera caja de texto y luego al pulsar sobre él, aparecen las cajas de texto debajo del botón add y así sucesivamente. En el primer ej. aparecía tb solo una vez pero se iba poniendo al final de cada caja.

2 - No se como incluir el boton "remove" al final del ultimo input de cada linea, tal y como lo he puesto ahora aparece, pero no allí...

Estoy algo perdido...

Código html: 
Ver original
  1. <html>
  2. <head>
  3. <title>Agregar y/o quitar cajas </title>
  4. <style>
  5. body, td, th, div, p {
  6. color:#000000;
  7. font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  8. font-size:small;
  9. }
  10. dd div {
  11. margin-top:0.3em;
  12. }
  13. a.addlink {
  14. background:transparent url(add.png) no-repeat scroll left top;
  15. color:#999999;
  16. font-size:0.9em;
  17. padding:1px 0 1px 20px;
  18. text-decoration:none;
  19. }
  20. a.removelink {
  21. background:transparent url(delete.png) no-repeat scroll 4px 0;
  22. color:#999999;
  23. font-size:0.9em;
  24. padding:1px 0 1px 24px;
  25. text-decoration:none;
  26. }
  27. </style>
  28. <script>
  29. function addhostfield()
  30. {
  31.   /*var container = document.getElementById('defaulthostlist');
  32.   var fila = document.getElementById('fila');
  33.   var row = document.createElement('div');
  34.   var input = document.createElement('input');
  35.   var link = document.createElement('a');
  36.   
  37.   input.name = '_default_host[]';
  38.   input.size = '30';
  39.   link.href = '#';
  40.   link.onclick = function() { removehostfield(this.parentNode); return false };
  41.   link.className = 'removelink';
  42.   link.innerHTML = 'remove';
  43.   
  44.   row.appendChild(input);
  45.   row.appendChild(link);
  46.   container.appendChild(row);*/
  47.   
  48.   var container = document.getElementById('contenedor');
  49.   var link = document.createElement('a');
  50.   link.href = '#';
  51.   link.onclick = function() { removehostfield(this.parentNode); return false };
  52.   link.className = 'removelink';
  53.   link.innerHTML = 'remove';
  54.   container.appendChild(link);
  55.   
  56.   container.appendChild(container.firstChild.cloneNode(true));
  57. }
  58.  
  59. function removehostfield(row)
  60. {
  61.   var container = document.getElementById('contenedor');
  62.   container.removeChild(row);
  63. }
  64. </script>
  65. </head>
  66. <body>
  67. <div>Agregar cajas y/o quitar cajas</div><br/>
  68.  
  69. <div id="contenedor"><p> <!-- fijate que ambos tags estan declarados en una misma linea sin separarse -->
  70.     <input type="text" value="" size="5" name="cantidad"/>
  71.     <input type="text" value="" size="30" name="descripcion"/>
  72.     <input type="text" value="" size="5" name="precio"/>
  73.     <input type="text" value="" size="5" name="total"/>
  74.     </p>
  75. <div>
  76. <div><a title="Add another field" class="addlink" href="javascript:addhostfield()">add</a></div>
  77. </body>
  78. </html>

Muchas gracias de antemano!