aggiungi / rimuovi input dinamicamente

**Freedom** · 20-06-2005, 12:58

Ciao,

come è possibile realizzare un 'form dinamico' del genere:

<INPUT 1> [link:elimina]
<INPUT 2> [link:elimina]
...

[link:inserisci nuovo input]

In modo che l'utente possa aggiungere infiniti input a piacere e li possa eliminare uno alla volta. Ovviamente, almeno un input deve sempre essere visibile (non deve esserci la possibilità di poter eliminare tutti gli input).

Ho provato a fare una cosa del genere in asp, ma ho abbandonato.

Grazie a chiunque mi voglia dare una mano

**Xinod** · 20-06-2005, 13:56

esempio

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>aggiungi / rimuovi campi input</title>
<script language="JavaScript" type="text/javascript">
<!--
var num=1;
function accoda(){
	if(document.createElement && document.getElementById && document.getElementsByTagName) {
		// crea elementi
		var oTr=document.createElement("TR");
		var oTd1=document.createElement("TD");
		var oTd2=document.createElement("TD");
		var oField=document.createElement("INPUT");
		var oText=document.createTextNode("riga "+num);

		// setta attributi
  		oField.setAttribute("type","text");
		oField.setAttribute("name","testo"+num);

		// appendi al relativo padre
		oTd1.appendChild(oField);
		oTd2.appendChild(oText);
		oTr.appendChild(oTd1);
		oTr.appendChild(oTd2);
		document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr);

		// incrementa variabile globale
		num++
	}
}

function rimuovi(){
	if(document.removeChild && document.getElementById && document.getElementsByTagName) {
		// se non e' la prima riga
		if(num>1){
			// riferimento al tbody
			var tb=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
			// riferimento all' ultimo TR
			var lastTr=tb.getElementsByTagName('TR')[(tb.getElementsByTagName('TR').length)-1]
			// rimuovi
			tb.removeChild(lastTr);
			// decrementa variabile globale
			num--
		}
	}
}
//-->
</script>
</head>
<body>
<form name="modulo">
<input type="button" value="accoda" onclick="accoda()"> <input type="button" value="rimuovi" onclick="rimuovi()"> 
<table border="1" id="tabella">
<tbody>
<tr>
<td><input type="text" name="testo0" /></td><td>riga 0</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

ciao

**Freedom** · 20-06-2005, 14:05

Grazie Xinod!!

Era quello che cercavo... almeno, in parte.

E' possibile eliminare il solo campo scelto?

**Xinod** · 20-06-2005, 15:22

si' (ma pensa tu, se ti e' necessario, a come riordinare gli indici)

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>aggiungi / rimuovi campi input</title>
<script language="JavaScript" type="text/javascript">
<!--
var num=1;
function accoda(){
	if(document.createElement && document.getElementById && document.getElementsByTagName) {
		// crea elementi
		var oTr=document.createElement("TR");
		var oTd1=document.createElement("TD");
		var oTd2=document.createElement("TD");
		var oField=document.createElement("INPUT");
		var oButt=document.createElement("INPUT");

		// setta attributi
  		oField.setAttribute("type","text");
		oField.setAttribute("name","testo"+num);
		oButt.setAttribute("type","button");
		oButt.setAttribute("value","rimuovi");

		// setta gestore evento
		if(oButt.attachEvent) oButt.attachEvent('onclick',function(e){rimuovi(e);})
		else if(oButt.addEventListener) oButt.addEventListener('click',function(e){rimuovi(e);},false)

		// appendi al relativo padre
		oTd1.appendChild(oField);
		oTd2.appendChild(oButt);
		oTr.appendChild(oTd1);
		oTr.appendChild(oTd2);
		document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr);

		// incrementa variabile globale
		num++
	}
}


function rimuovi(e){
	if(document.removeChild && document.getElementById && document.getElementsByTagName) {
		if(!e) e=window.event;
		var srg=(e.target)?e.target:e.srcElement;

		// risali al tr del td che contiene l' elemento che ha scatenato l' evento
		while(srg.tagName!="TR"){srg=(srg.parentNode)?srg.parentNode:srg.parentElement}

		// riferimento al tbody
		var tb=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
		
		// rimuovi
		tb.removeChild(srg);
	}
}
//-->
</script>
</head>
<body>
<form name="modulo">
<input type="button" value="accoda" onclick="accoda()" />
<table border="1" id="tabella">
<tbody>
<tr>
<td><input type="text" name="testo0" /></td><td><input type="button" disabled="disabled" value="rimuovi" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

**Freedom** · 23-06-2005, 01:00

Xinod, sei un genio!

Era proprio quello che stavo cercando.

Ti posso chiedere un ultima cosa...? Poi, prometto solennemente di non abusare più della tua pazienza.

Io il codice l'ho 'modificato' così:

codice:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>aggiungi / rimuovi campi input</title>
<script language="JavaScript" type="text/javascript">
<!--
var num=1;
function accoda(){
	if(document.createElement && document.getElementById && document.getElementsByTagName) {
		// crea elementi
		var oTr=document.createElement("TR");
		var oTd1=document.createElement("TD");
		var oTd2=document.createElement("TD");
		var oField=document.createElement("INPUT");
			var oFieldB=document.createElement("INPUT"); 
		var oButt=document.createElement("INPUT");

		// setta attributi
  		oField.setAttribute("type","text");
		oField.setAttribute("name","testo"+num);
		  		oFieldB.setAttribute("type","text");
				oFieldB.setAttribute("name","testoB"+num); 
		oButt.setAttribute("type","button");
		oButt.setAttribute("value","rimuovi");

		// setta gestore evento
		if(oButt.attachEvent) oButt. attachEvent('onclick',function(e){rimuovi(e);})
		else if(oButt.addEventListener) oButt. addEventListener('click',function(e){rimuovi(e);},false)

		// appendi al relativo padre
		oTd1.appendChild(oField);
			oTd1.appendChild(oFieldB); 
		oTd2.appendChild(oButt);
		oTr.appendChild(oTd1);
		oTr.appendChild(oTd2);
		document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr);

		// incrementa variabile globale
		num++
	}
}


function rimuovi(e){
	if(document.removeChild && document.getElementById && document.getElementsByTagName) {
		if(!e) e=window.event;
		var srg=(e.target)?e.target:e.srcElement;

		// risali al tr del td che contiene l' elemento che ha scatenato l' evento
		while(srg.tagName!="TR"){srg=(srg.parentNode)?srg.parentNode:srg.parentElement}

		// riferimento al tbody
		var tb=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
		
		// rimuovi
		tb.removeChild(srg);
	}
}
//-->
</script>
</head>
<body>
<form name="modulo" action="aa.asp" method="post">
<input type="button" value="accoda" onclick="accoda()" />
<table border="1" id="tabella">
<tbody>
<tr>
<td>

Dal  <input type="text" name="testo0" />
/Al  <input type="text" name="testo0B" /> 
</td><td>
<input type="button" disabled="disabled" value="rimuovi" />
</td>
</tr>
</tbody>
</table>


<input type="submit" name="Submit" value="Prosegui"></p>
</form>

<%
response.write(request.form())
%>
</body>
</html>

In rosso le modifiche apportate.

Dunque, il quesito è questo: come posso rendere questo codice più 'personalizzabile' per quanto riguarda la paginazione. Cioè, come devo fare per eliminare la tabella?
Poi, in azzurro, ho messo quello che vorrei fare, cioè, vorrei aggiungere ad ogni input quei testi.

Grazie ancora per la pazienza! :rollo:

**Xinod** · 23-06-2005, 02:58

per aggiungere testo prima o dopo basta creare nodi di testo e appenderli nell' ordine all' elemento corretto

codice:

...
		var oField=document.createElement("INPUT");
			var oFieldB=document.createElement("INPUT");
		var oButt=document.createElement("INPUT");
		var oText1=document.createTextNode("dal");
		var oText2=document.createTextNode("/al");
...
		// appendi al relativo padre
		oTd1.appendChild(oText1);
		oTd1.appendChild(oField);
		oTd1.appendChild(oText2);
			oTd1.appendChild(oFieldB); 
...

perche' ti vuoi liberare della tabella?
a logica la rappresentazione tabellare ci sta tutta
e torna comodo per l' eliminazione risalire ad un elemento che contenga inequivocabilmente una riga

vuoi sostituire la tabella con un div x ogni riga?

**anna.elisa** · 26-07-2005, 14:17

Ciao,
una domanda riguardante a questo script.
Una volta aggiunti i campi, come posso leggere il valore contenuto in questi utilizzando js?

Ho provato a fare il classico document.modulo.elements["testo"+num].value ma con explorer non funziona.
Come errore mi da che document.testo1.value è nullo o non è un oggetto.

Invece provando con firefox funziona correttamente.

Perchè explorer no e firefox sì?

Grazie mille a tutti

**anflam** · 24-10-2005, 12:11

Salve a tutti
ho usato il seguente codice per inserire delle righe ad una tabella.
Qualcuno sa come posso assoicare l'Attributo maxlength dell'input creata a 3

ho provato a fare oField.setAttribute("maxlength","3") ma non
funziona.

Grazie !

**Xinod** · 24-10-2005, 14:24

aldila' di qualsiasi regola (almeno da me) immaginabile,
devi usare maxLength invece che maxlength!
ciao

**piccolanomade** · 09-11-2005, 14:37

Penso che ormai hai risolto... ma per il popolo... io ho risolto facendo

codice:

document.getElementById("testo"+num).value

Io l'ho testato solo con la proprietà focus() ma penso che valga anche per le altre.

Ciao

Discussione: aggiungi / rimuovi input dinamicamente

Strumenti discussione

Ricerca discussione

Visualizza

Form sul dinamico andante...

x anna.elisa

Permessi di invio