Buonasera a tutti.
Scrivo per chiedere un consiglio per la realizzazione di una pagina web dinamica tramite i js.
In pratica ho una form a cui devo aggiungere elementi a seconda delle azioni che eseguo su quelli già esistenti. Passo all'esempio pratico.
Questa è la mia form
Voglio che al verificarsi di onchange della select "action" nella mia form vengano aggiunti altri controlli. Ho alcune idee su come farlo, ho aperto la discussione per sapere quali di esse, o di altre adottabili, sarebbe la migliore per la mia esigenza. Con migliore intendo in ambito di performance, di leggibilità, di validità, insomma, la più corretta.codice HTML:<form method="GET" action="pages/risultati.php" autocomplete="off"> <table> <tr> <td><label for="action">Action:</label></td> <td> <select id="action" name="action" onchange="ActionSelect_OnChange();"> <option value="primo">Primo</option> <option value="secondo">Secondo</option> <option value="terzo">Terzo</option> <option value="quarto">Quarto</option> </select> </td> </tr> </table> <input id="submitButton" type="submit" value="INVIA" /> </form>
Ho pensato
- Di modificare l'innerHTML della table aggiungendo ciò che mi serve aggiungere. Il problema è che così facendo, a ogni onchange, la pagina html aggiungerebbe tutti i blocchi di codice in sequenza senza cancellare quelli aggiunti in precedenza. In questo caso dovrei salvare in una variabile la parte 'statica' del codice e ogni volta aggiungerci la parte desiderata. Questo, a parte sembrarmi poco appropriato perchè dovrei modificare ad ogni onchange tutto il contenuto della table, porterebbe a dei problemi aggiuntivi siccome anche i blocchi di codice che aggiungo potrebbero contenere controlli sensibili all'onchange, e quindi altri blocchi di codice da aggiungere.
- Di inserire un elemento "hidden", ovvero con padding:0, margin:0, e vuoto dopo la <tr> relativa al <select> come nuova riga della tabella, a cui cambiare l'innerHTML senza cambiarlo a tutta la <table>, ma questo significa che l'elemento hidden dovrebbe essere necessariamente un altro <tr>. Mi spiego meglio: non posso inserire ad esempio un <div> come campo hidden all'interno della tabella, e poi reinserirci altre righe <tr>, non mi sembra appropriato e poi potrebbe portare a problemi relativi al layout. Questo è limitativo, ma mi sembra comunque una soluzione migliore della prima.
Mi rendo conto che la spiegazione è un po' confusionaria, quindi provo a fare un esempio pratico.
Nella form ho la prima <select> che ha 2 valori: Mare, Montagna
Se seleziono Mare, mi appare una nuova select con 2 valori: Spiaggia, Scogliera
Se seleziono Spiaggia, mi appare una nuova select con 2 valori: Sabbia, Ghiaia
Se nella prima select seleziono Montagna, mi appara una nuova select con 2 valori:Neve, Roccia
Se seleziono Neve mi appare una nuova select con 2 valori: Sci, Snowboard.
Se seleziono Roccia mi appare una nuova select con 2 valori: Scalata, Parapendio
.. e così via.
In pratica è una form il cui risultato finale è l'elaborazione di diversi risultati scelti in cascata, e ogni scelta esclude le altre della stessa select. (ovviamente è solo un esempio, anzichè le select potrei avere radio button, input text, o addirittura altri elementi statici).
Grazie in anticipo per la pazienza e l'aiuto
Rispondi quotando
