Añadir más campos SELECT clicando un botón

apañero · #1 (**permalink**) 28/11/2008, 18:25

Hola buenas, me gustaría saber cómo puedo repetir dinámicamente el mismo campo select (mismo contenido pero diferente nombre) de un formulario, haciendo click en un botón del tipo "Añadir Campo", ya que el número de SELECTS depende de cada tipo de dato que se vaya a meter.

Gracias!!

David · #2 (**permalink**) 28/11/2008, 18:40

Puees usar cloneNode(https://developer.mozilla.org/en/DOM/element.cloneNode). Por ejemplo, supongamos que tengas en vselect tu <select>. Entonces sería algo como esto:

Código javascript:

Ver originalnewsel = vselect.cloneNode(true); /* Clonamos el nodo */
newsel.name = "clon1"; /* Cambiamos el nombre al nuevo select creado */
vselect.parentNode.appendChild(newsel); /* Agregamos el select al mismo nodo padre al que pertenece el select original */

apañero · #3 (**permalink**) 28/11/2008, 18:48

Muchas Gracias David, el tema es que no entiendo nada de Javascript... así que no sé cómo podría implementar lo que quiero usando dicha función. ¿Me podrías ayudar? Sólo sé un poco de php y html...

gracias de nuevo.

apañero · #4 (**permalink**) 30/11/2008, 06:25

Bueno buscando por internete he encontrado y apañado un ejemplo, pero en IE me da un aviso de SCRIPT peligroso. ¿Se podría usar algún otro tipo de función para que no dé ningún aviso y funcione limpiamente en IE y FF?

Este es el código:

Código:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Add Row Testing</title>
<script type="text/javascript">
// Last updated 2006-02-21
function addRowToTable()
{
// just get some info and elements
  var tbl = document.getElementById('tblSample');
  var rows = tbl.getElementsByTagName('tr');
  var l = rows.length;
  var lastRow = rows[l-1];
  var clone = lastRow.cloneNode(true);
// now to fill in row data.
  clone.getElementsByTagName('select')[0].selectedIndex = lastRow.getElementsByTagName('select')[0].selectedIndex;
// and finaly fix up names
  clone.getElementsByTagName('select')[0].name = 'action'+l;
// add the row
  tbl.appendChild(clone);
}
function removeRowFromTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>
</head>
<body>
<form action="process.php" method="post" name="toolsubmit" >
<table id="tblSample" style='border: 4px groove #666666; margin-left: auto; margin-right: auto; '>
  <tr>
	<td>
	<select name="action1" onChange="setOptions(document.toolsubmit.action1.options[document.toolsubmit.action1.selectedIndex].value);">
	<option value="none">Please Select</option>
	<option value="add">Add</option>
	<option value="remove">Remove</option>
	<option value="change">Change</option>
	</select>
	</td>
  </tr>
</table>
<br />
<p style="text-align: center; ">
<input type="button" value="Add Another" onclick="addRowToTable();" />
<input type="button" value="Remove last Entry" onclick="removeRowFromTable();" />
</p>
<p style='text-align: center; '><input type='submit' value='Submit Request' /></p>
</form>
</body>
</html>

JavierB · #5 (**permalink**) 30/11/2008, 08:03

Hola apañero

El aviso de IE sólo sale cuando pruebas el código en tu ordenador, cuando tengas la página en internet no se verá.

Saludos,

apañero · #6 (**permalink**) 30/11/2008, 08:58

Es cierto, pero acabo de ver que en IE no funciona...