Cambiare valore Select senza ricaricare la pagina

[danielebarisano]

Salve a tutti, ben risentiti.
Dovrei cambiare il valore di una select al modificarsi di un altra senza ricaricare la pagina.
https://app.danielebarisano.it/risik...gni-tavolo.php Questo è il link della pagina, praticamente il valore del nome dovrebbe cambiare alla variazione dell utente sul cognome.
Serve Ajax?
Ridatemi un suggerimento e se possibile postatemi il codice, non penso sia un sacco di codice.

Saluti

[cavicchiandrea]

Dipende se i dati che devi caricare sono sul server e sono tanti usi Ajax, altrimenti puoi caricarli direttamente quando generi la pagina e li mostri al bisogno.

[danielebarisano]

Ci sono quasi.

<select id="nome" name="nome"> <option value="0"> Selezionare Nome </option>  
                                            <script type="text/javascript"> 
                                             $("#cognome").on("change", function() {    
                                             $.ajax({       
                                                type: "GET",
                                                url : "return-nome.php",
                                                data :  "cognome="+$("#cognome").val() ,  
                                                dataType: "json",
                                                success : function(risultato) {
                                                    risultato.forEach(function(data) {                              
                                                    <option value = "data">data</option>        
                                                   });
                                                },
                                                error: function() {
                                                 alert('Errore');
                                              }
                                              });              
                                              });
                                              </script>
</select>

Nel codice soprastante la variabile cognome viene passata correttamente al file return-nome.php http://app.danielebarisano.it/risiko...gnome=barisano Funziona correttamente , restituisce
il nome giusto. Ora non riesco a stampare quei valori sulla select nome. cosa c'è di errato in quel codice JQuery?

[KillerWorm]

cosa c'è di errato in quel codice JQuery?

                                                success : function(risultato) {
                                                    risultato.forEach(function(data) {                              
                                                    <option value = "data">data</option>        
                                                   });
                                                },

Ciao, l'errore è che stai scrivendo la parte HTML in chiaro all'interno del JavaScript; devi invece usare gli opportuni ed eventuali metodi JavaScript/jQuery per poter inserire/modificare l'HTML della pagina.

Una possibile impostazione potrebbe essere questa:

<select id="nome" name="nome"> <option value="0"> Selezionare Nome </option>

<script type="text/javascript">
    $("#cognome").on("change", function() {
        $.ajax({
            type: "GET",
            url : "return-nome.php",
            data :  "cognome="+$("#cognome").val() ,
            dataType: "json",
            success : function(risultato) {
                var strHtml = '<option value="0"> Selezionare Nome </option>';
                risultato.forEach(function(data) {
                    strHtml += '<option value="' + data + '">' + data + '</option>';
                });
                $('#nome').html(strHtml);
            },
            error: function() {
                alert('Errore');
            }
        });
    });
</script>

Non l'ho testato ma l'importante è che tu capisca il modo corretto di procedere.

[danielebarisano]

Non li conosco molto JQuery e Javascript.
Cmq

success : function(risultato) {
                                                    var strHtml = '<option value="0"> Selezionare Nome </option>';
                                                    risultato.forEach(function(data) {
                                                      strHtml += '<option value="' + data + '">' + data + '</option>';
                                                    });
                                                    $('#nome').html($strhtml);
                                                },

in $('nome').html(strhtml); anche se sostituisco strhtml con una stringa Es. 'Seleziona' non mi stampa niente. Ho anche aggiunto <scriptsrc="https://code.jquery.com/jquery-3.4.0.min.js"type="text/javascript"></script> la libreria jquery
Dove può essere il problema?

[KillerWorm]

Le cause possono essere svariate, una inclusione scorretta della libreria, una comunicazione errata col server, degli errori di sintassi nello script.

Per capire dove sta la causa, o le cause, del problema, dovresti fare un debug e andare per step.

Inizierei col verificare se in console si ricevono errori di script.

Premi F12 sul tuo browser per aprire gli strumenti di sviluppo web, quindi vai sulla scheda console.
Da qualche parte c'è un filtro dei messaggi, seleziona giusto "Errori" quindi aggiorna la tua pagina e verifica se ti salta fuori qualche messaggio di errore.

Da qui possiamo iniziare a capire come procedere.


EDIT: aspetta, che cappero ci fa quel $ che hai aggiunto in .html($strhtml);???
Inoltre ricorda che JavaScript è case-sensitive. Controlla bene il mio esempio, non mi pare che io te lo abbia indicato così.

[danielebarisano]

Le cause possono essere svariate, una inclusione scorretta della libreria, una comunicazione errata col server, degli errori di sintassi nello script.

Per capire dove sta la causa, o le cause, del problema, dovresti fare un debug e andare per step.

Inizierei col verificare se in console si ricevono errori di script.

Premi F12 sul tuo browser per aprire gli strumenti di sviluppo web, quindi vai sulla scheda console.
Da qualche parte c'è un filtro dei messaggi, seleziona giusto "Errori" quindi aggiorna la tua pagina e verifica se ti salta fuori qualche messaggio di errore.

Da qui possiamo iniziare a capire come procedere.


EDIT: aspetta, che cappero ci fa quel $ che hai aggiunto in .html($strhtml);???
Inoltre ricorda che JavaScript è case-sensitive. Controlla bene il mio esempio, non mi pare che io te lo abbia indicato così.

Ho tolto quel $ chemi era sfuggito. cmq questo è l indirizzo: da chrome non vedo errori su Console https://app.danielebarisano.it/risik...gni-tavolo.php

[KillerWorm]

Mi spiace ma in quella pagina non vedo il form vedo giusto questo testo:

Non puoi gestire questa pagina dato il livello di utenza

[danielebarisano]

Mi spiace ma in quella pagina non vedo il form vedo giusto questo testo:

Il form non lo vedevi perchè nella pagina possono fare l accesso gli admin.
ora posto il codice corretto, giorni fa ho risolto il problema

<div id="idstam" class="form-group has-placeholder">
                                            Nome
                                            <select id="nome" name="nome"> 
                                            <!--option value="Daniele">Daniele</option>
                                            <option value="Francesco">Francesco</option-->
                                            <script type="text/javascript">
                                                $("#cognome").on("change", function() { 
                                                    $.ajax({        
                                                        type: "GET",
                                                        url : "return-nome.php",
                                                        data :  "cognome="+$("#cognome").val() ,  
                                                        dataType: "json",
                                                        success : function(risultato) {
                                                            //console.log(risultato);

                                                            var selectorHtml = "";
                                                            risultato.forEach(function(item) {
                                                                selectorHtml += '<option value="' + item.nome + '">' + item.nome + '</option>';
                                                            })
                                                            $('#nome').html(selectorHtml);
                                                        },
                                                        error: function(xhr, status, error) {
                                                            console.log(status)
                                                            console.log(error)
                                                        }
                                                    });              
                                                });
                                              </script>
                                              </select>                                            
                                            </div>

Saluti

[KillerWorm]

giorni fa ho risolto il problema

Perfetto, mi fa piacere si sia risolto
Buon proseguimento