Visualizzazione dei risultati da 1 a 7 su 7

Discussione: controllo su select

  1. #1
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,476

    controllo su select

    Buonasera

    esiste un controllo sulla select?

    In pratica vorrei utilizzare una funzione solo se un campo è stato scelto.

    La funzione in questione è
    codice:
    function showNode (sID) {
        showNode.active && showNode.active.style.setProperty("display", "none");
        showNode.active = document.getElementById(sID);
        showNode.active && showNode.active.style.setProperty("display", "block");
    }
    </script>
    In pratica se la select chiamata citta è stata selezionata lo deve eseguire

    Come posso fare?

    Grazie

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,315
    Ciao, dovrebbe essere sufficiente impostare un gestore per l'evento onchange:
    https://www.w3schools.com/jsref/event_onchange.asp
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,476
    Ciao KillerWorm

    in effetti utilizzo già questo gestore, in questo modo:

    onChange=\"showNode(this.value);\"

    Piu' precisamente cosi' costruendo la select da php:

    Codice PHP:
    $elenco_citta "<select name=\"citta\" class=\"form-control\" onChange=\"showNode(this.value);\">$blocco_opzioni_citta</select>";
    $elenco_citta2 "<select name=\"citta2\" class=\"form-control\" onChange=\"showNode(this.value);\">$blocco_opzioni_citta2</select>"
    In basso alla pagina ho il codice inserito nel primo post

    Adesso ho il problema che quando seleziono la select "citta2" si apre la select di "citta"
    Quindi vorrei fare in modo da aprire la select delle date corrette

    L'esempio online lo tengo qui https://bit.ly/2YJUOUA
    In alto a destra c'è il motore per la ricerca delle offerte funzionante (basta scegliere l'aeroporto che si apre il calendario corretto)
    In basso ho la richiesta di preventivo ma selezionando la città di partenza non si apre la select con le date di partenza (oppure si apre quello del motore di ricerca delle offerte)

    Sto anche provando a chiamare il gestore in 2 modi diversi, tipo:
    onChange=\"showNode(this.value);\"
    onChange=\"showNode2(this.value);\"

    Ma ugualmente non va

    Sarà una cavolata, ma sto da oggi...
    Ultima modifica di allin81; 02-04-2019 a 17:07

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,315
    Ho dato uno sguardo alla pagina e, mentre verificavo la cosa, mi è parso di capire che tu abbia effettuato delle modifiche e che ad un certo punto tu abbia trovato la soluzione; correggimi se sbaglio; ora però vedo che stai continuando a modificare il codice.

    Ad ogni modo, in sostanza penso si tratti del "vecchio caro" problema degli id duplicati. Attraverso le due select infatti stai richiamando una funzione alla quale passi un valore che corrisponde all'id dell'elemento che vuoi manipolare, ma avendo impostato degli elementi con degli id uguali (così mi sembra) l'interprete JavaScript, attraverso il metodo document.getElementById(), va a selezionare il primo trovato con quell'id, come è corretto che sia.

    Chiaramente gli id devono essere univoci all'interno di uno stesso documento. Questa è una delle regole fondamentali per la programmazione web.

    Per risolvere puoi quindi usare quella stessa funzione ma adoperando degli id differenti. Chiaramente dovrai applicare questi id sugli elementi da manipolare e, analogamente, dovrai impostare i valori delle option in modo che corrispondano a tali id.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,476
    Si, confermo che sto provando a fare delle modifiche ma ancora non ho trovato la soluzione corretta


    Il metodo document.getElementById() lo sto provando ora, fino a una mezz'oretta fa non c'era, ma continuo ad avere il problema.


    Se cambio l'id del modulo di preventivo aggiungendo qualcosa tipo i-1 mi funziona, il problema è che poi nel database finisce proprio i-1 e non 1 e quindi mi sballa tutto.

    Quindi non ho capito se c'e' un modo per lasciare l'id senza mettere la lettera e il trattino per diversificare il nome oppure devo inserirli per forza

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,315
    Se cambio l'id del modulo di preventivo aggiungendo qualcosa tipo i-1 mi funziona, il problema è che poi nel database finisce proprio i-1 e non 1 e quindi mi sballa tutto.
    Ok, ma direi che questo è un problema minimo che si può risolvere facilmente. L'importante è avere chiaro il concetto di univocità degli id, da lì non si scappa.

    Quindi non ho capito se c'e' un modo per lasciare l'id senza mettere la lettera e il trattino per diversificare il nome oppure devo inserirli per forza
    Gli id degli elementi HTML devono essere INCONTROVERTIBILMENTE UNIVOCI.

    Quello che puoi fare, se non vuoi modificare i value delle option è passare, ad esempio, un prefisso alla funzione, da aggiungere al valore numerico restituito del select.

    Un esempio vale più di mille parole:
    codice:
    <!DOCTYPE HTML>
    <html lang="it">
       <head>
          <title>Esempio</title>
          <meta charset="utf-8">
          <script>
             function showNode (sID) {
                 showNode.active && showNode.active.style.setProperty("display", "none");
                 showNode.active = document.getElementById(sID);
                 showNode.active && showNode.active.style.setProperty("display", "block");
             }         
          </script>
       </head>
       <body>
    
          <select onchange="showNode('A'+this.value);">
             <option value="0" selected="">Seleziona</option>
             <option value="1">Lorem</option>
             <option value="2">dolor</option>
             <option value="3">sit amet</option>
             <option value="4">consectetur</option>
             <option value="5">adipiscing</option>
             <option value="6">elit</option>
          </select>
    
          <div id="A1" style="display: none;">Lorem</div>
          <div id="A2" style="display: none;">dolor</div>
          <div id="A3" style="display: none;">sit amet</div>
          <div id="A4" style="display: none;">consectetur</div>
          <div id="A5" style="display: none;">adipiscing</div>
          <div id="A6" style="display: none;">elit</div>
          
          <hr>
          
          <select onchange="showNode('B'+this.value);">
             <option value="0" selected="">Seleziona</option>
             <option value="1">Morbi</option>
             <option value="2">venenatis</option>
             <option value="3">nibh</option>
             <option value="4">consectetur</option>
             <option value="5">sit amet</option>
             <option value="6">mi elementum</option>
             <option value="7">semper</option>
          </select>
    
          <div id="B1" style="display: none;">Morbi</div>
          <div id="B2" style="display: none;">venenatis</div>
          <div id="B3" style="display: none;">nibh</div>
          <div id="B4" style="display: none;">consectetur</div>
          <div id="B5" style="display: none;">sit amet</div>
          <div id="B6" style="display: none;">mi elementum</div>
          <div id="B7" style="display: none;">semper</div>
          
       </body>
    </html>
    Nota come passo il valore alla funzione in modo diversificato per i due select
    Ultima modifica di KillerWorm; 02-04-2019 a 19:37
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  7. #7
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,476
    ottimo, ho capito adesso come farlo funzionare, ho adattato il tuo codice alla mia pagina ed adesso sembra funzionare perfettamente.

    Era proprio il prefisso alla funzione che non sapevo come gestire.

    Oltre ad aver risolto la situazione mi hai anche fatto capire meglio come fare questa cosa

    Grazie, grazie, grazie

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 © 2019 vBulletin Solutions, Inc. All rights reserved.