Visualizzazione dei risultati da 1 a 7 su 7

Visualizzazione discussione

  1. #4
    Utente di HTML.it L'avatar di U235
    Registrato dal
    Mar 2006
    Messaggi
    1,539
    Ciao
    hai almeno due strade: la prima è decisamente poco professionale, ovvero fai semplicemente un submit del form tramite javascript
    codice:
    <div id="response"></div>
        <form METHOD=GET>
            <select name="select" onchange="document.querySelector('form').submit()">
                <option value="1">a</option>
                <option value="2">b</option>
                <option value="3">c</option>
                <option value="4">d</option>
                <option value="5">e</option>
            </select>
        </form>
        <script>
            document.querySelector('form').action = window.location;
            //prova di concetto
            //recupera i parametri passati in querystring e li mette nella div response
            //questo simula la risposta lato server e dimostra il passaggio dei parametri in querystring nella richiesta  senza pagina server
            var params = new URLSearchParams(location.search);
            if (params.has('select')) {
                document.getElementById("response").innerHTML = params.get('select');
            }
        </script>
    (tutto il lavoro è svolto da questo):
    codice:
    <select name="select" onchange="document.querySelector('form').submit()">
    (il resto del codice serve solo a impostare la action e vedere il risultato senza pagina server)

    Ma questo significa che ad ogni cambio viene inviato il form con relativo cambio di pagina. Prova ad immaginare se uno sbaglia la selezione, sai che rogna...

    la seconda è decisamente migliore e presuppone che tu debba iniziare ad usare Ajax, ma l'operazione di invio non sarà visibile all'utente, a meno che non voglia avvisarlo tu.

    Il mio consiglio è di utilizzare Ajax

    codice:
    <div id="response"></div>
        <select id="select" onchange="send()">
                <option value="1">a</option>
                <option value="2">b</option>
                <option value="3">c</option>
                <option value="4">d</option>
                <option value="5">e</option>
        </select>
        <script>
            function send() {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        //prova di concetto
                        //recupera i parametri passati in querystring e li mette nella div response
                        //questo simula la risposta lato server e dimostra il passaggio dei parametri in querystring nella richiesta senza pagina server
                        var params = new URLSearchParams(new URL(this.responseURL).search);
                        if (params.has('select')) {
                            document.getElementById("response").innerHTML = params.get('select');
                        }
                    }
                };
                //accodo il valore recuperato dalla select a url da chiamare (in questo caso se stesso)
                var urlAndParams = window.location + "?select=" + document.getElementById("select").value;
                xhttp.open("GET", urlAndParams, true);
                xhttp.send();
            }
        </script>
    qui una prova funzionante
    Ultima modifica di U235; 20-10-2018 a 17:10

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