aggiungere dinamicamente N campi ad un form

[Sifr]

Ciao a tutti,

ho un form in HTML costituito da N campi:

<input type="text" name="name1[]" id="id1[]" />
<input type="text" name="name2[]" id="id2[]" /> 
<textarea name="name3" id="id3[]">text3</textarea>
<input type="radio" name="radio1" id="radio1" />

Vorrei far in modo che, cliccando su un bottone apposito, la pagina mi generi automaticamente un altro set di campi contenente tutti i campi attuali il cui nome termina per [].

Al momento ero riuscito a far funzionare questo codice, che però richiede di inserire il codice HTML dei campi da inserire a mano:

<script type="text/javascript">
var counter = 1;
var limit = 50;
function addInput(divName){
     if (counter == limit)  {
          alert("Sei arrivato al limite di " + counter + " campi");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Set " + (counter + 1) + "<input type='text' name='text[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
//-->
</script>

Potreste darmi una mano a generare quell'innerHTML dinamicamente?

Purtroppo javascript mi è sempre stato ostico

Grazie!

[hdmi]

usa un ciclo for e usa il contatore per dare l'id ai tuoi elementi

[cavicchiandrea]

leggi qui.
Riflessione, sicuro che poi riuscirai a recuperare i valori dei campi generati dinamicamente che avranno tutti lo stesso nome
Forse potrebbe aiutarti anche questa discussione

[Sifr]

si, poi lato php so cavarmela, si tratta solo di riordinare l'array... che mi arriva in questo formato:

  ["campo_multiplo1"]=>
  array(3) {
    [0]=>
    string(0) ""
    [1]=>
    string(0) ""
    [2]=>
    string(0) ""
  }

Lo script l'ho scomposto in questi passaggi:

1. ottiene tutti gli elementi all'interno del fieldset (o div) che racchiude i campi da ripetere
1bis. ottiene tutti gli elementi il cui "name" finisce per "[]"
2. salva i suddetti elementi in un array
3. quando viene cliccato il bottone apposito, l'array del punto 2 viene ciclato, e per ogni elemento di quell'array, ne viene creato uno identico ma con ID differente (il "name" rimane lo stesso)

Qual è secondo voi il modo migliore per gestire il punto 1?

[cavicchiandrea]

Ma la guida e la discussione l'hai letta? Dalle tue domande non sembrerebbe!! Comunque ognuno approccia come vuole tu sei un'attendista (nel senso che preferisci attendere che qualcuno ti scriva il codice più tosto che studiare, è una scelta nulla di in questo.), auguri.

[Sifr]

Attendista puoi anche dirlo a qualcun altro.
Anche perchè di miE domande non ce ne sono: ce ne sta solo una, nella quale ho solo chiesto (parafraso) un consiglio sul come eseguire il punto 1, fra 2 alternative che ho pensato.

Tra l'altro, quella guida parla di come inserire elementi, cosa a cui ero già arrivato... e la discussione pure. Me le sono anche rilette tutte per sicurezza, ma parlano solo di come effettuare quello che io ho già effettuato.
Il mio problema adesso è ottenere un particolare sottoinsieme degli elementi del form, per poi ricavarne gli attributi (e lo so fare) e generarne un sottoinsieme quasi uguale (e credo di saperlo fare).

Ieri notte avevo già provato a fare qualcosa, ma con scarsi successi.

Codice:

var eles = [];
	var inputs = document.getElementsByTagName("*");


	for(var i = 0; i < inputs.length; i++) {
		
		document.write(inputs[i].name);
	   
	}

Output:

undefinedundefinedundefined

Il codice HTML è lunghissimo, non lo sto a postare, ma di certo non sono solo 4 tag.


ps.: avete idea del perchè il document.write() mi faccia sparire tutto il resto della pagina (pur rimanendo nel codice)?

[cavicchiandrea]

Chiedo scusa se ho urtato la tua sensibilità, non voleva essere offensivo (vedi spiegazione) comunque hai due strade:
- Clonare elementi o parti del documento pari pari (vedi guida)
- Costruirtele con il DOM (vedi discussione)
Credo che nel tuo caso, visto che usi gli id nei campi e dovendolo incrementare sia più indicata la discussione, se invece preferisci eliminarlo (che sconsiglio) puoi clonare gli elementi che ti servono seguendo la guida.
Per non infastidirti e per non essere frainteso ti saluto cordialmente.


P.S. document.write va usato prevalentemente (per usarlo in una funzione va sviluppato diversamente complesso da spiegare) al caricamento della pagina se lo usi in una funzione sovrascrive tutto il documento, usa innerHTML (non ho verificato la funzione non è detto che sia la soluzione)

[Enzaccio]

Probabilmente c'è anche il guaio che
var inputs = document.getElementsByTagName("*");

è stato dichiarato et valorizzato a zonzo per lo script: gli elementi devono prima esistere (nel tempo) perché un metodo li possa trovare.
Vedi com' ho fatto qua sotto: una funzione attende il comando dal body onload che scatterà al termine del caricamento della pagina.

<html><head>
<script type="text/javascript">

var eles = [];
var inputs;


function esegui(){

 inputs = document.getElementsByTagName("*");

        for(var i = 0; i < inputs.length; i++) {

            document.getElementById('scrittoio').innerHTML = 
            document.getElementById('scrittoio').innerHTML + ' ' + inputs[i].name
        }
 }

</script>
</head>
<body onload="esegui();">

<input type="text" name="name1[]" id="id1[]" />
<input type="text" name="name2[]" id="id2[]" /> 
<textarea name="name3" id="id3[]">text3</textarea>
<input type="radio" name="radio1" id="radio1" />

<div id="scrittoio"></div>

</body></html>

C'è anche l' impiego di innerHTML in alternativa al document.write per le ragioni che già ti sono state dette dal Mod. .
Ti stamperà ancora degli undefined dacché ("*") mette in lista anche quegli Elementi che il NAME non l' hanno.

Per il resto, posso pure concordare che questo è un forum un po' allo Stronsio, e difatti lo frequento saltuariamente, ma ti assicuro che il "cavicchiandrea" rimane una persona gradevolissima ed un costante seguitore .. segugio .. seguente .... che c'è sempre insomma.

[Enzaccio]

Volendo restare al document.write lo potresti utilizzare piazzando uno script al termine del codice tutto, nel nostro caso, ma più in generale dopo la codificazione degli Elementi da gestire:

<script>

var eles = [];
	var inputs = document.getElementsByTagName("*");


	for(var i = 0; i < inputs.length; i++) {
		
		document.write(inputs&#91;i&#93;.name);
	   
	}
</script>

</body></html>

Attenzione però che questo espediente a volte può rivelare delle sorprese (elementi che caricano tardivamente, pagina leggerissima che carica d' un lampo, ecc.) ma rende bene l' idea di cosa voglia dire usare il document.write nel mentre si scrive la pagina; allora, non la sovrascrive ma collabora con gli Elements che la compongono.

P.S. : Ora non ho letto tutto quanto linkato da Andrea, e non so se se ne parla, ma io facevo delle impressionanti repliche, inTabellando il tutto, con:

insertRow();
insertCell();
deleteRow();

Tra le parentesi tonde ci va un integrale (un numeretto) per la collocazione.
Attenzione che TR è read only a questi effetti, cioè non puoi replicare una riga copiando direttamente dalla precedente l' innerHTML ma devi reinserire ogni singola cella. Anche se molti Browser lo farebbero lo stesso ...

[Sifr]

Ciao,

innanzitutto volevo chiarire: mi sono "urtato" perchè io stesso trovo fastidiose quelle persone che pretendono che il proprio lavoro venga svolto aggratis da altri, e l'essere paragonato ad una di quelle mi è dispiaciuto. COmunque adesso è tutto ok =)

edit: ho fatto progressi, vedi post sotto

Cioddetto, ho esteso le mie ricerche, e la confusione è ancora maggiore, dato che adesso ho scoperto almeno 3 metodi per ottenere ciò che voglio:

1) tramite javascript, con lo script di Enzaccio leggermente modificato, creo un array di elementi il cui name termina per "[]", quindi li ricreo uno ad uno settando tutti gli attributi, valori ed opzioni quasi manualmente.

2) tramite javascript, utilizzando la funzione cloneNode() per clonare gli elementi. In questo caso, sarebbe perfetto questo esempio: http://www.quirksmode.org/dom/domform.html
Tuttavia, non sono riuscito a farlo funzionare in locale facendo un copia-incolla semplice semplice... sapete come mai?

3) tramite jQuery, con una funzione di questo tipo:

<script type="text/javascript">
 $(function(){
 $('input.cloneMe').live('click',function(){
 var f=$(this).closest('form').clone(true);
 $(f).insertAfter($(this).closest('form'));
 
 });
 });
</script>

Solo che già non capisco javascript, aggiungerci anche jQuery... ad esempio, così mi clona tutti gli elementi del form, comprese label, tr e td, il che è ottimo... ma dovrei clonare sono quelli all'interno di un determinato DIV, e soprattutto non dovrei creare un nuovo form, totalmente staccato dal primo, come invece accade ora.


Insomma non so che strada scegliere.

Quella con jQuery mi sembra la migliore, anche perchè non ho necessità di cambiare l'attributo name o l'attributo id, ed occhio sembra quella che mi consente la maggior automatizzazione