Form estendibile

[myricio]

Ciao a tutti,
premetto che di javascript so appena un po' di sintassi di base.
Nel mio sito ho realizzato due bottoni che incrementano e decrementano una variabile al click. Poi ho creato un form che voglio sia personalizzabile tramite quella variabile: cioè devo inserire uno script che, se incremento la variabile, aggiunge in coda un nuovo pezzo di form (alcuni campi) se decremento toglie l'ultimo campo aggiunto lasciando quelli compilati prima invariati.
Insomma se la varibile indica un numero di utenti (scelto dal visitatore) vorrei poi ad esempio chiedere all'utente tanti nomi quanti utenti ha inserito (dinamicamente).
Sapreste suggerirmi un codice che posso implementare o darmi un 'idea di come procedere?
Grazie mille.

[cavicchiandrea]

Leggi qui

[myricio]

Ciao! Grazie per la risposta. L'idea è perfetta. L'unico problema è che il mio form non aggiunge un campo input ma ben 23 pulsanti radio con relativa label e formattazione. Posso usare quel metodo lì ma il codice diventa davvero un delirio!
c'è un metodo alternativo per stampare tutto più velocemente? Che so, includere un file php dove dentro ho già tutto pronto..

[cavicchiandrea]

Si potresti sviluppare una pagina php che crea i radio (consecutivi) poi la carichi con ajax

[myricio]

si avevo letto qualcosa in merito ma perdonami, non ho mai usato ajax!
ho cercato in rete ma non capisco praticamente nulla..
sapresti indicarmi come cambierebbe il codice della discussione che mi hai linkato o è un bel casino?
grazie

[cavicchiandrea]

Posta il link alla pagina pubblica del form e dei campi che vorresti aggiungere cosi provo a farti un esempio in ajax.
Per quanto riguarda la domanda sono due cose completamente differenti la discussione tratta come generare dinamicamente degli input, che non centra nulla col caricare un blocco html con ajax.

[myricio]

ciao, scusa il ritardo nella risposta.
lavoro in locale quindi ti allego il codice usato.
ho semplificato un po' riportandolo.

<p>number of users: </p>
<textarea name="numusers">1
</textarea>
<span href="#" class="pulsante" onclick="incrementaw()">+</span>
<span href="#" class="pulsante" onclick="decrementaw()">-</span>
</td><td>

il js che si occupa del pulsante

var x=1;
function incrementaw() {
    if(x<6) {
        x=x+1;
         document.forms['engine'].elements['numusers'].value=x; 
    }
    else {
        document.forms['engine'].elements['numusers'].value="6+";
    }
}
function decrementaw() {
    if(document.forms['engine'].elements['numusers'].value=="6+") {
        x=6;
        document.forms['engine'].elements['numusers'].value=x;
    }
    else if(x<=1) {
        x=0;
         document.forms['engine'].elements['numusers'].value=x; 
    }
    else {
        x=x-1;
        document.forms['engine'].elements['numusers'].value=x;
    }
}

infine quello che includerei.
ho riportato soltato un radio per il semplice motivo che sono tutti uguali, cambiano solo le tipologie e le scelte nel radio. la struttura è la medesima. infine un inclusione sulla nazionalità dell'utente aggiunto.
i radio sono strutturati in tre colonne.

<tr><td colspan="3"> <h2>Xesima caratteristica utente </h2></td></tr>
    <!-- ETA' -->
    <tr><td><br>
    <h3>age:</h3>
    <span style="display:inline-block">
    <input type="radio" value="unselected" id="radio0" name="age"  checked/>
    <label for="radio0" class="radio" chec>unselected </label>
    </span>
    <span style="display:inline-block">
    <input type="radio" value="young" id="radio1" name="age"/>
    <label for="radio1" class="radio" chec>giovane </label>
    </span>
    <span style="display:inline-block">
       <input type="radio" value="adult" id="radio2" name="age" />
    <label for="radio2" class="radio">adulto </label>
    </span>
    <span style="display:inline-block">
    <input type="radio" value="old" id="radio3" name="age" />
    <label for="radio3" class="radio">vecchio </label>
    </span>
    <br/><br/>
</td></tr>
<tr><td colspan="3"><div align="center" style="margin-top:3%;"><?php include 'nationality/flags.html'; ?></div></td></tr>
</form>
</table>

grazie mille per l'aiuto.

[cavicchiandrea]

Mi sono "perso" ti ho mandato un messaggio privato ciao.

[Enzaccio]

Io invece in questo lavoro mi ci ritrovo e quando avrò tempo e voglia, al "myricio" gli posterò un prototipo.

Intanto gli dico guarda, meglio che "vecchio" potremmo scrivere "anziano" nelle legend dei radio.
Poi sappi che la chiusura:

</td></tr>
</form>
</table>

è scandalosa, mùtala in:

</td></tr>
</table>
</form>

ed idem per l' apertura che immagino ...

Le function di incremento/decremento della variabile e del textarea-value van bene e le riprenderò tal quali, solo le esprimerò in una forma più sintetica per garantire miglior leggibilità d' insieme al futuro papiro:

nella decrementaw() l' istruzione di assegnazione document.forms['engine'].elements['numusers'].value=x;
la possiamo esprimere una sola volta e dopo la serie degli else if che servono solo a determinare il valore di x .

E poi in luogo della textarea potremmo forse preferire usare un campo INPUT READONLY e di un limitato SIZE, se serve solo per visualizzare il numeretto.

Resta poi da decidere come recupererai i Valori al server, se dovremo cioè duplicare nella forma name="age2" o name="age[]" o in qualche altro archibugio.

Ho da affittare 3,5 vani a La Spezia, ottimo stato - prezzi giusti.