Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,591

    Select dinamica in base alle scelte dell'utente

    Salve a tutti
    avrei bisogno di modificare il modulo del motore di ricerca interno in modo piu' dinamico.

    Al momento faccio scegliere il tipo di pacchetto "pacchetto con volo" e quando viene selezionato l'aeroporto di partenza si apre una select nascosta con tutte le date disponibili (prendendole dal database)

    Adesso pero' ho aggiunto anche il "pacchetto senza volo" e quindi non vorrei far comparire la select che fa scegliere l'aeroporto (e di conseguenza quella che fa scegliere le date disponibili)

    Incollo la parte del codice html e javascript che utilizzo al momento.
    In che modo potrei modificare?

    Grazie

    codice:
    <form action="cerca.php" method="post" name="ricerca" id="ricerca" onsubmit="return ricerca_offerte()" autocomplete="off">
    <div class="form-group">
    <label>Tipo di Pacchetto</label>
    <select name="tipo_offerta" class="form-control" required><option value="" selected>Seleziona</option><option value="3">Pacchetto con Volo</option><option value="4">Pacchetto senza Volo</option></select></div>
    <div class="form-group">
    <label>Scegli Aeroporto di Partenza</label>
    <select name="citta" class="form-control" onChange="showNode(this.value);" required><option value="" selected>Seleziona</option><option value="2">Napoli Capodichino</option></select><br>
    <div id="1" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
    <select name="arrivo_roma" class="form-control"><option value="0" selected>Seleziona</option></select><br>
    </div>
    <div id="2" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
    <select name="arrivo_napoli" class="form-control"><option value="0" selected>Seleziona</option><option value="2021-06-07">07/06/2021 </option><option value="2021-06-14">14/06/2021 </option><option value="2021-06-21">21/06/2021 </option><option value="2021-06-28">28/06/2021 </option><option value="2021-07-05">05/07/2021 </option><option value="2021-07-12">12/07/2021 </option><option value="2021-07-19">19/07/2021 </option><option value="2021-07-26">26/07/2021 </option><option value="2021-08-02">02/08/2021 </option><option value="2021-08-09">09/08/2021 </option><option value="2021-08-16">16/08/2021 </option><option value="2021-08-23">23/08/2021 </option><option value="2021-08-30">30/08/2021 </option><option value="2021-09-06">06/09/2021 </option><option value="2021-09-13">13/09/2021 </option><option value="2021-09-20">20/09/2021 </option><option value="2021-09-27">27/09/2021 </option><option value="2021-10-04">04/10/2021 </option><option value="2021-10-11">11/10/2021 </option><option value="2021-10-18">18/10/2021 </option></select><br>
    </div>
    <div id="3" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
    <select name="arrivo_bari" class="form-control"><option value="0" selected>Seleziona</option></select><br>
    </div>
    <div id="4" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
    <select name="arrivo_milano" class="form-control"><option value="0" selected>Seleziona</option></select><br>
    </div>
    <div id="5" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
    <select name="arrivo_bologna" class="form-control"><option value="0" selected>Seleziona</option></select><br>
    </div>
    <div id="6" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
    <select name="arrivo_venezia" class="form-control"><option value="0" selected>Seleziona</option></select><br>
    </div>
    <div id="7" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
    <select name="arrivo_bergamo" class="form-control"><option value="0" selected>Seleziona</option></select><br>
    </div>
    <div id="8" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
    <select name="arrivo_verona" class="form-control"><option value="0" selected>Seleziona</option></select><br>
    </div>
    <div class="form-group">
    <label>Durata:</label>
    <select name="prezzo_come" class="form-control" required><option value="" selected>Seleziona</option><option value="1" >7 Notti</option><option value="2" disabled>Altre opzioni: contattaci</option></select></div>
    <div class="row">
    <div class="col-sm-12"><button type="submit" name="ricerca" class="btn btn-warning cerca-la">Mostrami i Preventivi</button></div>
    
    
    </div>
    </form>
    <script type="text/javascript">
    function showNode (sID) {
    	//alert (sID);
        showNode.active && showNode.active.style.setProperty("display", "none");
    	if (sID != 0) {
    		//alert (sID);
    		showNode.active = document.getElementById(sID);
    		showNode.active && showNode.active.style.setProperty("display", "block");
    	}
    
    
    }
    </script>

  2. #2
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    23,909
    Gestisci l'evento onchange sulla casella di selezione del tipo di offerta e in base all'opzione scelta, agisci sui controlli correlati modificando lo stile display mettendolo "block" o "none" per renderlo visibile o meno.

    Sai gestire gli eventi? Si tratta di un passaggio fondamentale da approfondire prima di iniziare a scrivere codice su una pagina.
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  3. #3
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,591
    Quote Originariamente inviata da alka Visualizza il messaggio
    Gestisci l'evento onchange sulla casella di selezione del tipo di offerta e in base all'opzione scelta, agisci sui controlli correlati modificando lo stile display mettendolo "block" o "none" per renderlo visibile o meno.

    Sai gestire gli eventi? Si tratta di un passaggio fondamentale da approfondire prima di iniziare a scrivere codice su una pagina.
    ma quindi rimuovo il js e utilizzo solo l'evento onchange?

  4. #4
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    23,909
    Quote Originariamente inviata da allin81 Visualizza il messaggio
    ma quindi rimuovo il js e utilizzo solo l'evento onchange?
    Il codice che hai scritto non riesco a comprenderlo: definisce una funzione showNode() e poi testa delle proprietà su di essa, direttamente all'interno del corpo della funzione, e non capisco a cosa serve stando al problema che hai descritto.

    A mio avviso, devi riscrivere il codice corretto che gestisca l'evento nel modo opportuno e regoli la visualizzazione degli elementi correlati.

    Parti da una implementazione semplice, magari facendo dei log quando il codice viene eseguito, e piano piano riempi gli spazi con il codice effettivo necessario, così a ogni passaggio è possibile verificare che l'implementazione sia valida (questo ovviamente se non hai ancora molta dimestichezza con JavaScript e l'uso del DOM).

    Ciao!
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  5. #5
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,591
    Quote Originariamente inviata da alka Visualizza il messaggio
    Il codice che hai scritto non riesco a comprenderlo: definisce una funzione showNode() e poi testa delle proprietà su di essa, direttamente all'interno del corpo della funzione, e non capisco a cosa serve stando al problema che hai descritto.

    A mio avviso, devi riscrivere il codice corretto che gestisca l'evento nel modo opportuno e regoli la visualizzazione degli elementi correlati.

    Parti da una implementazione semplice, magari facendo dei log quando il codice viene eseguito, e piano piano riempi gli spazi con il codice effettivo necessario, così a ogni passaggio è possibile verificare che l'implementazione sia valida (questo ovviamente se non hai ancora molta dimestichezza con JavaScript e l'uso del DOM).

    Ciao!
    mmm diciamo che con javascript non sono proprio ferratissimo.
    Per caso ci sono degli script o degli esempi già disponibili? (non saprei con quale nome cercarli)

  6. #6
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    23,909
    Quote Originariamente inviata da allin81 Visualizza il messaggio
    mmm diciamo che con javascript non sono proprio ferratissimo.
    Ma ci si può sempre documentare...

    Quote Originariamente inviata da allin81 Visualizza il messaggio
    Per caso ci sono degli script o degli esempi già disponibili? (non saprei con quale nome cercarli)
    Magari qualcosa di simile a una parte delle funzionalità che dovrai implementare si trova, ma per poter sfruttare l'esempio bisogna capire come funziona, quindi le basi si devono avere, e in ogni caso non sarà mai una versione completa di un software che soddisfa tutte le tue necessità particolari.

    Essendo questo un forum di programmazione, se qualcuno si mette di buona volontà, si documenta, separa le problematiche e affronta un ostacolo alla volta cercando di scrivere il codice e (per errori o comportamenti anomali) ha bisogno di una mano, ben venga.

    Tutti gli altri casi di "pappa pronta" per me sono da rigettare, o destinare all'area di ricerca collaboratori, perché di lavoro si tratta.

    Ciao!
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.