Newsgroup: it.comp.lang.javascript
Titolo: creare dinamicamente text area

Ciao, ho il seguente problema:
vorrei fare una pagina in cui l'utente possa aggiungere un numero arbitrario
di text area premendo su un bottone "aggiungi".
In pratica all'utente si presenta una pagina vuota con solo il bottone, ed
ogni volta che preme sul bottone compare una text area in più
in cui può scrivere qualcosa. Ad ogni successiva pressione, viene aggiunta
sotto alla prima text area un'altra text area e cosi via.
Ovviamente quello che era stato scritto nelle text area deve rimanerci anche
se si preme sul bottone e viene aggiunta una nuova text area.
Preferirei che le text area facessero parte della medesima form ...
Ecco come ho provato a risolvere il problema:
- chiamando una funzione che usa il metodo document.write('codice html della
text box) , ma non funziona perchè ogni volta che chiamo questo metodo,
tutto il contenuto viene cancellato, quindi se premo sul bottone compare
solo una text box e sparisce il bottone.
- sostituendo al metodo di prima il document.form.innerHTML='codice html
della text box' , ma l'effetto è identico a quello di prima.
Ci sono altri metodi più adatti che non conosco?
Oppure bisognerebbe usare il metodo document.write passandogli il codice
html non solo della text area, ma di tutto il documento in quel momento
(come lo ottengo?) + il codice html della nuova text box?
Spero in un vostro illuminante aiuto
Vi ringrazio molto

 di text area premendo su un bottone "aggiungi".
Premesso che non ho esplorato piu' di tanto i meandri del DOM, puoi 
partire da questo:
<HTML>
<HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
function aggiungi()
	{
	var a="<br><TEXTAREA NAME='text"+document.getElementsByTagName
("TEXTAREA").length+"' ></TEXTAREA>";
	document.getElementById("Forma").innerHTML+=a;
	}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM id="Forma">
<INPUT TYPE='button' VALUE='clicca' onClick='aggiungi()'>
</FORM>
</BODY>
</HTML>
-- 
Ciao, Riccardo
------------------------------------------------------------------------
http://www.jsdir.com
 ---- Bring Your Site To Life!!!!
------------------------------------------------------------------------
http://www.dev2dev.it
 - La rete ha connesso nuove particelle - D2D006
------------------------------------------------------------------------
 ----> itALY = it <----


Grazie infinite per l'aiuto, sembra proprio fare quello che cerco. Solo che
adesso devo metterci le mani per
creare un qualcosa di più sofisticato e quindi cosa mi consigli di studiare?
XML DOM?
Potresti spiegarmi cosa fa il document.getElementsByTagName
("TEXTAREA").length ?
Es. se invece di un text area voglio metterci un <input type='text' name=
...... ecc ecc,
il TagByName cosa deve cercare?
Da quanto ho capito getElementsByTagName torna un array di oggetti che sono
stati trovati con quel nome, mentre nel tuo scrip mi pare
che lo usi per dare un numero progressivo ai nomi delle text area....
Grazie ancora

 il TagByName cosa deve cercare?
Gran bella domanda :-)
Non mi esprimo perche' scriverei cazzate, preferisco passare a Zer0 o 
Alberto :)


 il TagByName cosa deve cercare?
Sarebbe document.getElementsByTagName("INPUT").
Cosi' hai un array contenente tutti gli oggetti input (submit, checkbox,
text, ...), poi dovresti scorrerlo e verificare il type di ognuno.
Per rispondere alla tua domanda iniziale io farei una cosa di questo tipo
(considerando Mozilla, NS6 e successivi, IE5 e successivi):
<script>
function add(frm){
    var newElement=document.createElement("TEXTAREA");
    // a questo punto puoi impostare tutte le proprieta' della nuova
textarea
    frm.insertBefore(newElement,frm.fake)
}
</script>
<form action="#" name="frm">
<input name="cmdAdd" type="button" value="AGGIUNGI"
onclick="add(this.form)"><br>
<input type="hidden" name="fake" value="">
</form>

 di text area premendo su un bottone "aggiungi".
Con i browser che supportano l'HTML DOM W3C:
<html>
<head>
    <script>
        function addingAclone_episode2(){
            var pObj=document.createElement("TEXTAREA");
            document.forms[0].appendChild(pObj)
        }
    </script>
</head>
<body>
<form name="myDOMform" method="post" action="">
    <input type="button" onclick="addingAclone_episode2()" value="Andate e
moltiplicatevi"><br>
</form>
</body>
</html>
--------------------------------
Inviato via 
http://usenet.libero.it

 il TagByName cosa deve cercare?
Come ha detto Andrea, devi cercare il tag INPUT. Successivamente iterare il
risultato alla ricerca dei campi di tipo text.
var inputTags=document.getElementsByTagName("INPUT");
for (var i=0;inputTags.length;i++){
    if (inputTags[i].type=="text") alert("Questo e' un campo testo.\nIl suo NAME
e':"+inputTags[i].name+"\nIl suo VALUE e':"+inputTags[i].value);


 frm.insertBefore(newElement,frm.fake)
Bruuuutto.. L'elemento fake non ha senso, e un appendChild e' piu'
DOM-Compliant. :)


 DOM-Compliant. :)
Di pure orrendo, ma nel delirio di una webApp a cui sono sotto ho ricordato
"appendChild" come fratello di "insertAdjacentElement" e quindi figlio di IE
e non del W3C... vado a farmi l'ulteriore caffe'...

 e non del W3C... vado a farmi l'ulteriore caffe'...
appendChild e' cmq un derivato dell'XML DOM, quindi W3C.. "InsertBefore" e'
gia' piu' barbaro, IMVHO..


 method."
Infatti e' vero. Bastardo di un IE!
L'attributo / proprieta' "name" (minuscolo) lo riesci a settare, lo riesci a
leggere se lo richiedi, ma non riesci ad accedere all'elemento per nome. E'
come se venisse creata una proprieta' omonima che non corrisponde
all'attributo del tag. Megabastardo, di nuovo.

 L'attributo / proprieta' "name" (minuscolo) lo riesci a settare,
La proprieta' la riesci a settare, ma e' la proprieta' dell'oggetto JS, non
rispecchia il relativo attributo HTML, infatti come abbiamo visto (per
telefono, a beneficio di chi non spia le ns conversazioni), settando un:
pObj.name="myname"
questo non appare affatto nell'HTML, allo stesso modo di:
pObj.setAttribute("name","myname");
Ma al contrario di:
oObj.setAttribute("Name","myname");
.. solo che, per il discorso case-sensitive di cui prima, non e' cio' che
serve a noi.


     <script>
[..]
Grazie per l'esempio che è anche divertente :)
Solo che un povero principiante come me si è leggermente confuso
specialmente leggendo il dibattito tra te ed andrea...
Forse è bene che ti dica a cosa servirà poi questa applicazione:
io ho realizzato in PHPun manager per un server MySQL che ti mostra tutte le
tabelle di un server, per ogni tabella i dati delle tabelle,
inserire, cancellare, modificare i record delle tabelle ecc, come eseguire
query arbitrarie e mostrarne il risultato.
In PHP va benissimo (PHP e MySQL si sposano molto bene), ma come saprai ogni
azione necessita di un ping-pong tra client e server.
L'ultima cosa che manca è la creazione di una tabella, senza richiedere
all'utente di scrivere il codice della query x creare una tabella, ma
tramite interfaccia grafica. Ma se faccio questo in PHP, oltre a dover usare
le sessioni per tenere in memoria temporaneamente i dati, l'utente ogni
volta che per es. preme su "aggiungi campo" vedrà la pagina ricaricarsi con
il ping-pong tra il browser e server su cui sta lo script PHP.
Ad ogni pressione di un tasto "aggiungi" volevo quindi che comparisse una
text box (nome del campo) a fianco un combobox dove l'utente sceglie il tipo
del campo, una terza text box dove l'utente mette la dimensione del campo e
magari una checkbox per dire se è chiave primaria.
Fatto questo, in fondo alla pagina ci sarà un bel pulsantone "crea", che
dovrebbe spedire una bella query al mio file in php, una query del tipo
"create table ecc ecc". Questa query la devo spedire (via get o post) ma
soprattutto la devo generare... quindi a me sarebbe piaciuto dare i nomi ai
text box in modo progressivo (es. campo1, campo2... tipo1, tipo2....,
check1, check2...) in modo da sapere quali dati appartengono al primo campo
della tabella , quali dati al secondo campo evitando di fare confusione nel
momento della generazione della stringa della query, quando dovrò scorrermi
tutti gli elementi del documento.
Ma forse forse, questo in fin dei conti non serve: se so che per ogni
pressione del tasto "aggiungi un campo"  inserisco es. 4 oggetti di input
(due text area, un combo, una checkbox), quando scorro tutti gli oggetti del
documento so che quelli da 0 a 3 solo della prima riga, e cosi via fino alla
fine. Sempre che il metodo document.getElementsByTagName mi popoli un array
non con gli oggetti messi a casaccio ma ordinati nell'ordine in cui li ho
inseriti (e qui...mmmm...se è cosi sarebbe troppo facile).
Ok, sicuramente avrò detto qualche stupidata della quale mi scuso a priori
:)
Ciao

 :)
Figurati, siam tutti qui per imparare, e ti assicuro che non hai detto
alcuna stupidata (talvolta si leggono cose davvero allucinanti).. :)


Agent or webmaster wanted in italy
www.comserver.net

 name..
Il che mi sembra un po' strano, visto che la raccomandazione W3C per 
l'XHTML afferma che l'attributo "name" e' stato deprecato e verra' 
rimosso in successive versioni.
Ma in Moz/N6 hanno introdotto il marquee con mia grandissima sorpresa e 
delusione :-((
