Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    Cambiare valore di un database in base ad un select option HTML

    Ciao a tutti,
    ho un problema con PHP e MySQL: non riesco ad inserire/sovrascrivere dei valori di un database in base a quello selezionato su un select option HTML.




    In pratica avrei bisogno di un menù a tendina HTML con 5 voci.
    In base alla voce selezionata nel database deve essere impostato un numero (che è associato alla voce).




    Mi servirebbe però una "funzione" che aggiorni il valore immediatamente al variare del select HTML. Senza inviare un form con un button. Subito al cambiamento dell'opzione deve cambiare il valore nel database.

    Mi hanno detto che in questo caso mi serve Javascript.
    Mi hanno sempre consigliato di associare alla select un evento onchange, questo dovrà comportare l'esecuzione di una funzione, sempre JS, che invio tramite AJAX ad uno script PHP sul server.
    PHP dovrà comportarsi esattamente come se ricevesse i dati da un form (l'invio dei dati tramite ajax equivale esattamente all'invio di un form, ma senza che l'utente debba farlo esplicitamente) ed eseguire la query per l'update.





    Come posso muovermi?
    Non ho mai utilizzato Ajax...
    Grazie mille

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Devi usare Ajax, esempi in rete ne trovi molti.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    qui hai un esempio completo, è per asp ma il ragionamento è lo stesso:
    https://www.w3schools.com/asp/asp_ajax_database.asp

  4. #4
    Utente di HTML.it L'avatar di U235
    Registrato dal
    Mar 2006
    Messaggi
    1,521
    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

  5. #5
    Ciao,
    ho optato per la prima opzione ovvero quella con JS...
    l'ho adattato alle mie esigenze quindi con i valori che mi servono...

    ora non capisco come mandare quello che seleziono al Database?
    Io voglio che appena clicco sulla voce del select HTML mi invii al DB quello che c'è in quel value.

    grazie mille

    Quote Originariamente inviata da U235 Visualizza il messaggio
    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

  6. #6
    Utente di HTML.it L'avatar di U235
    Registrato dal
    Mar 2006
    Messaggi
    1,521
    Quote Originariamente inviata da marcofilippini Visualizza il messaggio
    Ciao,
    ho optato per la prima opzione ovvero quella con JS...
    l'ho adattato alle mie esigenze quindi con i valori che mi servono...

    ora non capisco come mandare quello che seleziono al Database?
    Io voglio che appena clicco sulla voce del select HTML mi invii al DB quello che c'è in quel value.

    grazie mille
    Ciao,
    sono entrambe con js.
    La prima fa solo un submit del form che contiene la select, quindi ti basta lasciare il form come un normalissimo form con nella action l'indirizzo della pagina server preposta a inserire i campi in db. Questo avviene al cambio di selezione, fermo restando ci sia solo quel form.
    Ma ricorda che questa soluzione fa solo un submit automatico, non usa ajax.

    codice:
    <formMETHOD=GET action=tuaPaginaServer> <--!-->
            <selectname="select"onchange="document.querySelector('form').submit()">
                <optionvalue="1">a</option>
                <optionvalue="2">b</option>
                <optionvalue="3">c</option>
                <optionvalue="4">d</option>
                <optionvalue="5">e</option>
            </select>
        </form>
    L'altra fa una chiamata ajax. In entrambe i casi devi avere una pagina lato server che inserisce i valori in db
    Ultima modifica di U235; 23-10-2018 a 17:46

  7. #7
    Quote Originariamente inviata da U235 Visualizza il messaggio
    Ciao,
    sono entrambe con js.
    La prima fa solo un submit del form che contiene la select, quindi ti basta lasciare il form come un normalissimo form con nella action l'indirizzo della pagina server preposta a inserire i campi in db. Questo avviene al cambio di selezione, fermo restando ci sia solo quel form.
    Ma ricorda che questa soluzione fa solo un submit automatico, non usa ajax.

    codice:
    <formMETHOD=GET action=tuaPaginaServer> <--!-->
            <selectname="select"onchange="document.querySelector('form').submit()">
                <optionvalue="1">a</option>
                <optionvalue="2">b</option>
                <optionvalue="3">c</option>
                <optionvalue="4">d</option>
                <optionvalue="5">e</option>
            </select>
        </form>
    L'altra fa una chiamata ajax. In entrambe i casi devi avere una pagina lato server che inserisce i valori in db


    ahhhh ok! ci sono!
    io voglio utilizzare la prima con JS che usa onchange ... quella meno professionale per intenderci

    mi mancava la parte del file php che invia i dati al db... ecco cosa mancava!!!
    quindi creo ad esempio "invia_dati_database.php" e metto un form che invia i campi compilati nel mio DB e poi questo form verrà inviato automaticamente dal pezzo di JS che mi hai mandato?
    giusto?

    sembra fantastico... spero di riuscire ad integrarlo nel mio caso
    grazie mille

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