Inserire campi form e select nel FORM

**celex** · 14-02-2008, 13:36

Ciao Raga...
avrei l'esigenza di creare 1 funzione che cliccando un pulsante mi inserisce una riga con
dei campi dinamici nel mio form....

es.
ho la prima riga con

<input type=text name=nome>
<input type=text name=cognome>
<select size=1 name=sesso>
<option value=Maschio>
<option value=Femmina>
</select>
<input type=text name=indirizzo>

cliccando sul pulsante mi crea un'altra riga con gli stessi campi....

Grazie in anticipo....

**tonz79** · 14-02-2008, 13:42

ciao io ho questa funzione(ti do anche quella x eliminare la riga):

codice:

<script type="text/javascript">
	var cntRows=1;
	function AddRow() {
		cntRows++
		var cell=cntRows
		var newcell="<input type=\"text\" name=\"riga"+"\" size=\"7\" value=\""+cell+"\">"
		var newcell2="<input type=\"text\" name=\"art"+"\" size=\"20\">"
		var newcell3="<input type=\"text\" name=\"qnt"+"\" size=\"20\">"
		var newcell4="<input type=\"text\" name=\"prezzo"+"\" size=\"20\">"
		var newcell5="<input type=\"button\" name=\"B2"+"\" size=\"20\" value=\"Inserisci Riga\" onclick=\"AddRow()\">"
		var newcell6="<input type=\"button\" name=\"B3"+"\" size=\"20\" value=\"Elimina Riga\" onclick=\"DelRow()\">"			
		
		tDettaglio.insertRow()
		tDettaglio.rows(tDettaglio.rows.length-1).insertCell()
		tDettaglio.cells(tDettaglio.cells.length-1).innerHTML=newcell
		tDettaglio.rows(tDettaglio.rows.length-1).insertCell()
		tDettaglio.cells(tDettaglio.cells.length-1).innerHTML=newcell2
		tDettaglio.rows(tDettaglio.rows.length-1).insertCell()
		tDettaglio.cells(tDettaglio.cells.length-1).innerHTML=newcell3
		tDettaglio.rows(tDettaglio.rows.length-1).insertCell()
		tDettaglio.cells(tDettaglio.cells.length-1).innerHTML=newcell4
		tDettaglio.rows(tDettaglio.rows.length-1).insertCell()
		tDettaglio.cells(tDettaglio.cells.length-1).innerHTML=newcell5
		tDettaglio.rows(tDettaglio.rows.length-1).insertCell()
		tDettaglio.cells(tDettaglio.cells.length-1).innerHTML=newcell6
	}
		
	function DelRow() {
		var current = window.event.srcElement;
   		while ( (current = current.parentElement)  && current.tagName !="TR");
        		 current.parentElement.removeChild(current);
	}

dove la prima riga e i pulsanti sono:

codice:

	<td><input type="text" name="riga" size="7" value="1" readonly></td>
	<td><input type="text" name="art" size="20"></td>
	<td><input type="text" name="qnt" size="20"></td>
	<td><input type="text" name="prezzo" size="20"></td>
	<td><input type="button" name="B2" onclick="AddRow()" value="Inserisci Riga"></td>
	<td><input type="button" name="B3" onclick="DelRow()" value="Elimina Riga"></td>

**Xinod** · 14-02-2008, 13:54

questo script che hai postato non mi risulta poter funzionare con browser diversi da IE

in script/ discussioni utili c'e' "aggiungi / rimuovi input dinamicamente"
che e' un buon esempio da cui partire per celex
(che, tra l' altro, l' avrebbe trovata da solo, con un minimo di ricerca...)

**celex** · 15-02-2008, 12:38

Ciao Xinod...

io avevo trovato la discussione che dici.....
ma non parla delle SELECT.....

il mio problema è proprio impostare le SELECT.....

infatti se leggi l'apertura del POST è:

.......<select size=1 name=sesso>
<option value=Maschio>
<option value=Femmina>
</select>.............

Come posso impostare il tutto???

**Xinod** · 15-02-2008, 14:22

il concetto e' sempre lo stesso, createElement e appendChild
ti faccio un esempio a pagina vuota (anche un po' piu' articolato di quello che serve a te per il caso specifico), pensa tu ad integrarlo nell' altro esempio

codice:

<script type="text/javascript">
/*<![CDATA[*/
window.onload=function(){

var opz={
	// 'text':'value',
	'scegli:':'',
	'prima':'prima.htm',
	'seconda':'seconda.htm',
	'terza':'terza.htm'
}

	var f=document.forms[0];
	var sel=document.createElement('select');
	sel.onchange=function(){alert(this.options[this.selectedIndex].value)}
	for(var k in opz){
		var op=document.createElement('option');
		op.appendChild(document.createTextNode(k));
		op.setAttribute('value',opz[k]);
		sel.appendChild(op);
	}
	f.appendChild(sel);
}
/*]]>*/
</script>

codice:

<body>
<form>
</form>
</body>

poi, ma non c'entra con questo problema delle select, ma con il setAttribute del name su IE
consiglio di leggere questo
http://www.thunderguy.com/semicolon/...rnet-explorer/
perche' anche quello script potrebbe riservare sorprese
ciao

**celex** · 16-02-2008, 13:48

Grazie...Xinod funziona correttamente...

ora il mio problema è come impostare la funzione onKeyup ad un INPUT tramite il
setAttribute

.......come posso fare???

**Xinod** · 16-02-2008, 13:52

come con gli altri gestori di eventi (onchange, onclick) nei 2 esempi
quindi non si fa con il setAttribute perche' non sono attribute

Discussione: Inserire campi form e select nel FORM

Strumenti discussione

Ricerca discussione

Visualizza

Inserire campi form e select nel FORM

Permessi di invio