elenco di valori e rendere visibili form

[Foxit80]

Buondì a tutti
Questa è la mia situazione,
ho 10 form settati come non visibili
vorrei creare un menù a tendina con dei valori da 1 a 10 in maniera tale che, per esempio, l'utente selezionando il numero 2 gli vengano mostrati solo i primi due form.

[NonCeLaFaccio+]

Ciao,
una cosa di questo genere?

<script type="text/javascript">
   function visualizza(numero) {
      for (i=1;i<=10;i++) {
         if (i <= numero) {
            document.getElementById("_"+i).innerHTML = "<input type='text'/>" ;
         } else {
            document.getElementById("_"+i).innerHTML = "<input type='hidden'/>";
         }
      }
   }
</script>

<form>
   <div>
      <select onchange="visualizza(this.value)">
         <option value="0">Scegli quanti campi visualizzare</option>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option>
         <option value="9">9</option>
         <option value="10">10</option>
      </select>
   </div>
   <div id="_1">
      <input type="hidden"/>
   </div>
   <div id="_2">
      <input type="hidden"/>
   </div>
   <div id="_3">
      <input type="hidden"/>
   </div>
   <div id="_4">
      <input type="hidden"/>
   </div>
   <div id="_5">
      <input type="hidden"/>
   </div>
   <div id="_6">
      <input type="hidden"/>
   </div>
   <div id="_7">
      <input type="hidden"/>
   </div>
   <div id="_8">
      <input type="hidden"/>
   </div>
   <div id="_9">
      <input type="hidden"/>
   </div>
   <div id="_10">
      <input type="hidden"/>
   </div>
</form>

Come vedi la select invia il numero scelto alla funzione visualizza che fa un ciclo inserendo (con innerHTML) all'interno delle 10 <div> il tag di tipo "text" fino al numero ricevuto e poi il tag di tipo "hidden".

Le div possono anche essere inizialmente vuote, così:

   <div id="_1">
   </div>
   <div id="_2">
   </div>
   <div id="_3">
   </div>
   <div id="_4">
   </div>
   <div id="_5">
   </div>
   <div id="_6">
   </div>
   <div id="_7">
   </div>
   <div id="_8">
   </div>
   <div id="_9">
   </div>
   <div id="_10">
   </div>

però in questo caso se il form viene inviato senza aver operato nessuna scelta non viene inviato nessun campo mentre nel primo esempio vengono sicuramente sempre inviati i dieci campi.
Se poi vuoi divertirti un po' potresti provare a fare una sola <div> entro cui inserire, sempre con innerHTML, il numero di tag scelto invece di averne sempre dieci, alcuni visibili e altri nascosti.
Dipende tutto dalla gestione che ne farai.

Inizialmente avevo provato ad assegnare direttamente il type dei tag input da javascript ma IE non lo accetta.

Vedi se può andar bene.
Ciao

[Foxit80]

Direi che va più che bene

grazie per l'aiuto

[Foxit80]

sarebbe possibile evitare che ogni form impostato come hidden, occupi spazio?perchè i miei form sono 50 e nel caso della scelta di un solo form mi lascerebbe uno spazio vuoto enorme.

form1
[blank]
[blank]
[blank]
[blank]
[blank]
[blank]
[...]

Grazie ancora

[NonCeLaFaccio+]

Gli hidden che io sappia non occupano spazio ma forse dipende dal browser

O forse, più probabilmente, lo spazio occupato è dovuto alle <div> che li contengono. Potresti provare a mettere tutti quelli hidden in un'unica <div> o non metterli affatto.

Per aiutarti meglio ho bisogno di capire due cose:

- Quando parli di 50 form intendi un form con 50 campi o proprio 50 form?

- I campi ti servono sempre tutti, alcuni visibili e altri nascosti o ti servono solo quelli visibili? In altre parole, quando invii un form vengono inviati tutti i campi che lo compongono sia hidden sia visibili quindi se ti occorre che i campi vengano inviati sempre tutti ma che solo alcuni siano visibili allora bisogna ricorrere ai campi hidden, se invece ti serve che vengano inviati solo quelli visibili si può evitare di inserire gli altri nel form risparmiando in termini di traffico e velocizzando quindi il caricamento della pagina e l'invio delle informazioni al server.

[Foxit80]

si scusa il termine sbagliato è un form con 50 campi,lo spazio come dicevi tu è occupato dai div perchè ho fatto la prova di aggiungere div senza campo e aggiunge spazio
e mi serve che vengano inviati solo i campi selezionati, esempio se ne seleziono 25 mi interessano solo i valori contenuti nei primi 25 campi

Grazie ancora per la disponibilità

[NonCeLaFaccio+]

Allora puoi provare così:

<script type="text/javascript">
   function visualizza(numero) {
      stringa = "";
      for (i=1;i<=numero;i++) {
         if (i==1) {
            stringa += "<input type='text' name='inp_"+i+"'/>";
         } else {
            stringa += "
<input type='text' name='inp_"+i+"'/>";
         }
      }
      document.getElementById('div_1').innerHTML = stringa;
   }
</script>

<form>
   <div>
      <select onchange="visualizza(this.value)">
         <option value="0">Scegli quanti campi visualizzare</option>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option>
         <option value="9">9</option>
         <option value="10">10</option>
      </select>
   </div>
   <div id="div_1">
   </div>
</form>

In modo che nell'unica div vengano inseriti solo i campi necessari. Come vedi viene costruita la variabile stringa accodando tutti i campi necessari e poi alla fine la stringa viene inserita nella div col solito innerHTML.

La if serve a differenziare il primo campo che non è preceduto da
da quelli successivi.

Ho inserito anche il name nei campi in modo che tu possa poi gestirli nel pgm ricevente, i nomi saranno inp_1, inp_2 ecc... ma puoi ovviamente cambiarli come preferisci.

Ciao

[Foxit80]

funziona tutto in modo perfetto

grazie

[danielix05]

mi permetto di riaprire questo thread perchè vorrei arrivassimo allo step successivo di cui avrei necessità.

una volta popolati i campi abbiamo una query del genere

?inp_1=valore1=2&parametro4=alt&distanza=alta&inp_1=uno&inp_2=due&inp_3=35&inp_4=44

nella pagina successiva, onLoad, ho intenzione di scrivere qualcosa del genere

   function visualizza(numero) {
      stringa = "";

var qst=location.search.substr(1);
var dati = new Array()
dati=qst.split("&");

      for (i=0;i<=numero;i++) {
         if (i==0) {
            stringa += "<input type='text' name='inp_"+i+"' value='"+dati[0].substr(dati[0].indexOf("=")+1)+"' />"+i;
         } else {
            stringa += "
<input type='text' name='inp_"+i+"' value='"+dati[i].substr(dati[i].indexOf("=")+1)+"' />"+i;
         }
      }
      document.getElementById('div_1').innerHTML = stringa;
   }

   
</script>
</head>

<body onLoad="visualizza(3)">

solo che non riesco a popolare correttamente i vari input.

Il mio intento è quello di far uscire compilati gli input già settati nel passo precedente ma non riesco, con javascript, a recuperare solo le variabili get che mi interessano IN PRATICA inp_n

quindi:
1. dalla select indico quanti input visualizzare
2. li popolo e mando il form
3. nella pagina che riceve il get dovrebbero uscire già gli input indicati nel punto 1. con i valori del punto 2.
4. da questa ultima pagina, infine, posso modificare numero input e valori

c'è speranza?

[NonCeLaFaccio+]

Ciao,
quesito interessante ma oggi sono piuttosto preso al lavoro e non so se riuscirò ad aiutarti, comunque intanto chiariscimi qualche dubbio:

- I dati non vuoi inviarli ad uno script php o asp sul server ma ad una pagina html che li elaborerà sul client con javascript, esatto? Non mi era ancora capitato ma, tutto sommato, non ci vedo niente di male. Quindi partiamo dal presupposto che la querystring arrivi correttamente alla seconda pagina, ok?

- La QS che indichi contiene due inp_1, immagino che sia una semplice svista e che vada corretta così, vero?

?valore1=2&parametro4=alt&distanza=alta&inp_1=uno&inp_2=due&inp_3=35&inp_4=44

- Se nella seconda pagina l'utente diminuisce e poi ri-aumenta il numero di campi da visualizzare vuoi che i campi eliminati e poi riattivati risultino vuoti o siano nuovamente riempiti col valore passato in QS?

- Nel body chiaramente è presente una div con id="div_1", vero?

- Cosa indica il parametro 3 passato dalla onload alla function visualizza?
EDIT: chiarisco meglio questa domanda, cosa indica quel parametro lo so, il dubbio è sul fatto che la onload non può sapere quanti campi visualizzare e che il tre non corrisponde all'esempio che hai fatto all'inizio (in cui sono quattro) per cui mi chiedevo se quel tre ha un significato particolare.

Direi che c'è speranza.