[PHP] Menu a tendina con popolamento dati da un db

vannone_il_grande

Nuovo Utente
20 Set 2016
13
0
1
44
Buongiorno a tutti ho il seguente problema, spero gentilmente possiate aiutarmi

Ho un form con un menu a tendina l'elenco di tutte le regioni italiane, seguito da tre campi di testo NOME RAPPRESENTANTE, INDIRIZZO, NUMERO TELEFONICO.

Selezionando dal menu a tendina una regione ad esempio MOLISE, automaticamente i campi
NOME RAPPRESENTANTE, INDIRIZZO, NUMERO TELEFONICO, dovrebbero popolarsi con dei dati presi da un database.

Il popolamento dei campi deve avvenire senza inviare nessun dato al form, ma solo selezionando la regione dal menu a tendina.

In sostanza il database é cosi' composto i dati sono di esempio:


Regione | nome rappresentante | indirizzo | Telefono
-------------------------------------------------------------------------------
CAMPANIA | Mario Bianchi | Via Roma 12 | 033512345
FRIULI | Gino Baldi | p.zza XXIV Maggio, 3 | 033612345
SICILIA | via Garibaldi, 29 | via Garibaldi, 29 | 033612347


Mastico un po di php e mysql ma non ho esperienza con javascript (con il quale credo si realizzi il menù a tendina automatico).
 

AdeKnite

Utente Attivo
3 Ago 2016
161
35
28
26
Ciao.
Devi utilizzare le chiamate Ajax.

Ti posto un esempio abbastanza semplice, commentato.

Nel mio caso ho un elenco a tendina in cui ritrovo una lista di stati del mondo.
Quando seleziono uno stato, faccio stampare a video il continente di cui fa parte. Gli stati e i continenti sono contenuti all'interno di due diverse tabelle.

A ogni continente è associato un id univoco.
A ogni stato è associato un id univoco più un secondo id, uguale all'id del continente della tabella precedente.

Avrò bisogno di due pagine per realizzare ciò:
  1. Pagina in cui mostro il menu a tendina e il risultato
  2. Pagina a cui comunico lo stato scelto e che mi restituisce il rispettivo continente
    (stampandolo poi in pagina 1)

Pagina 1
PHP:
<?php

function load_stati() { // funzione che verrà richiamata dopo. Stampa le option prelevandole dalla tabella.
    $conn = mysqli_connect("127.0.0.1", "root", "", "test"); // connessione al db
    $cont = "SELECT * from stati order by stato"; // query di estrazione
    $res = mysqli_query($conn,$cont); // eseguo la query
    while ($row = mysqli_fetch_array($res)) {
        echo "<option value='".$row['id']."'>".$row['stato']."</option>\n"; // stampa le option della select
    }
}

?>

<!DOCTYPE html>
<html>
    <head>
        <title>Stati</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    </head>
    <body>
        <form>
            <select name="continente" id="continente" class="continente">
                <option> Scegli uno stato </option>
                <?php load_stati(); ?>
            </select>
            <br>
            <br>
            <div id="stato" class="stato"></div>
        </form>
    </body>

    <!-- CHIAMATA AJAX -->
    <script type="text/javascript">

        $(".continente").change(function() { // '.continente' è la classe associata alla select
            var country_id = $(this).val(); // 'country_id' è una variabile creata al momento che conterrà l'id della nazione (prelevato dalla tabella e salvato all'interno dell'attributo value della rispettiva <option>, ossia $row['id'])
            $.ajax({
                url: 'prova2.php', // pagina a cui inviare l'id appena prelevato
                method: 'POST', // metodo che s'intende utilizzare (nota come il form precedentemente definito non disponga di un metodo)
                data: {countryId:country_id}, // quando invierò il country_id alla pagina 'prova2.php', potrò prelevarlo attraverso $_POST['countryId']
                dataType: "text",
                success: function(res) {
                    $('.stato').html(res); // se il tutto va a buon fine inserisco all'interno del div '.stato' ciò che sputerò fuori dalla pagina 'prova2.php'
                }
            });
        });

    </script>
    <!-- FINE CHIAMATA AJAX -->

</html>

Pagina 2
PHP:
<?php

$conn = mysqli_connect("127.0.0.1", "root", "", "test"); // connetto al db

$query = "SELECT * FROM continenti where id = '".$_POST['countryId']."'"; // definisco la query
// seleziono il continente che ha come id lo stesso id della nazione che ho selezionato nel menu a tendina

$output = ""; // definisco una variabile $output vuota
$res = mysqli_query($conn,$query); // eseguo la query

while ($row = mysqli_fetch_array($res)) {
  $output = "<span>".$row['continente']."</span>"; // salvo il risultato della query in una stringa pronta da mostrare
}

echo $output; // STAMPA DEL RISULTATO (passaggio fondamentale)

?>
 

vannone_il_grande

Nuovo Utente
20 Set 2016
13
0
1
44
perfetto grazie, il tutto funziona ho aggiunto però altri due menù a tendina (Regione e provincia, presi da altri db), ma non mi vengono inseriti i valori che voglio nei campi form. Ti posto il codice:

esempio.php
-------------------------------------------------------------------------------
Codice:
<?php

function load_stati() { // funzione che verrà richiamata dopo. Stampa le option prelevandole dalla tabella.
    $conn = mysqli_connect("----------", "----------------", "--------------", "-----------"); // connessione al db
    $cont = "SELECT * from ritrovi order by id"; // query di estrazione
    $res = mysqli_query($conn,$cont); // eseguo la query
    while ($row = mysqli_fetch_array($res)) {
        echo "<option value='".$row['id']."'>".$row['NOME']."</option>\n"; // stampa le option della select
    }
}

?>

<!DOCTYPE html>
<html>
    <head>
        <title>Stati</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 
   <script type="text/javascript">
   $(document).ready(function(){

       var scegli = '<option value="0">Scegli...</option>';
       var attendere = '<option value="0">Attendere...</option>';
     
       $("select#province").html(scegli);
       $("select#province").attr("disabled", "disabled");
       $("select#comuni").html(scegli);
       $("select#comuni").attr("disabled", "disabled");
     
     
       $("select#regioni").change(function(){
           var regione = $("select#regioni option:selected").attr('value');
           $("select#province").html(attendere);
           $("select#province").attr("disabled", "disabled");
           $("select#comuni").html(scegli);
           $("select#comuni").attr("disabled", "disabled");
         
           $.post("select.php", {id_reg:regione}, function(data){
               $("select#province").removeAttr("disabled");
               $("select#province").html(data); 
           });
       }); 
     
       $("select#province").change(function(){
           $("select#comuni").attr("disabled", "disabled");
           $("select#comuni").html(attendere);
           var provincia = $("select#province option:selected").attr('value');
           $.post("select.php", {id_pro:provincia}, function(data){
               $("select#comuni").removeAttr("disabled");
               $("select#comuni").html(data); 
           });
       }); 
   });
 
   </script>
    </head>
    <?php
include_once 'select.class.php';
$opt = new SelectList();
?>
    <body>
    <div id="title"> Scegliere la regione e la provincia di destinazione tra quelle proposte </div>
   <div id="container">
         
       <form action="prenota.php"  id="myform" >
           <span class="titoli">Seleziona la regione di destinazione:</span><br />
           <select id="regioni">
               <?php echo $opt->ShowRegioni(); ?>
           </select>
           <br /><br />
     
           <span class="titoli">Seleziona la provincia di destinazione:</span><br />
           <select id="province">
           <option>Scegli...</option>
           </select>
        <form>
            <select name="continente" id="continente" class="continente">
                <option> Scegli uno stato </option>
                <?php load_stati(); ?>
            </select>
            <br>
            <br>
            <div id="stato" class="stato"></div>
        </form>
    </body>

    <!-- CHIAMATA AJAX -->
    <script type="text/javascript">

        $(".continente").change(function() { // '.continente' è la classe associata alla select
            var country_id = $(this).val(); // 'country_id' è una variabile creata al momento che conterrà l'id della nazione (prelevato dalla tabella e salvato all'interno dell'attributo value della rispettiva <option>, ossia $row['id'])
            $.ajax({
                url: 'scegli_regione.php', // pagina a cui inviare l'id appena prelevato
                method: 'POST', // metodo che s'intende utilizzare (nota come il form precedentemente definito non disponga di un metodo)
                data: {countryId:country_id}, // quando invierò il country_id alla pagina 'prova2.php', potrò prelevarlo attraverso $_POST['countryId']
                dataType: "text",
                success: function(res) {
                    $('.stato').html(res); // se il tutto va a buon fine inserisco all'interno del div '.stato' ciò che sputerò fuori dalla pagina 'prova2.php'
                }
            });
        });

    </script>
    <!-- FINE CHIAMATA AJAX -->
 
 
 

</html>
Codice:
scegli_regione.php
--------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
   <meta http-equiv="content-type" content="text/html charset=utf-8">
   <link rel="stylesheet" type="text/css" href="css/calendario.css"/>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
   <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 
 
</head>

<body>




            <input type="text" name="nome" id="nome" class="campo" value="<?PHP $nome= $_GET['nome']; echo $nome; ?>"><br>
           <?php session_start(); $_SESSION['nome'] = $_GET['nome']; ?>
           <input type="text" name="CI" id="CI" class="campo" value="<?PHP $CI= $_GET['CI']; echo $CI; ?>">
           <?php session_start(); $_SESSION['CI'] = $_GET['CI']; ?>
         
            <?php


$conn = mysqli_connect("XXXXXXXX", "XXXXXXXXX", "XXXXXXXX", "XXXXXXXX"); // connetto al db

$query = "SELECT * FROM ritrovi where id = '".$_POST['countryId']."'"; // definisco la query
// seleziono il continente che ha come id lo stesso id della nazione che ho selezionato nel menu a tendina

$output = ""; // definisco una variabile $output vuota
$res = mysqli_query($conn,$query); // eseguo la query

while ($row = mysqli_fetch_array($res)) {
  $nome = "".$row['NOME'].""; // salvo il risultato della query in una stringa pronta da mostrare
  $indirizzo = "".$row['INDIRIZZO'].""; // salvo il risultato della query in una stringa pronta da mostrare
  $cellulare = "".$row['CELLULARE'].""; // salvo il risultato della query in una stringa pronta da mostrare
  $valutazione= "".$row['VALUTAZIONI'].""; // salvo il risultato della query in una stringa pronta da mostrare
}

?>
         
           <input type="text" name="nome" id="nome" class="campo" value="<?PHP echo $nome; ?>">
           <?php session_start(); $_SESSION['nome'] = $ritrovo; ?>
            <input type="text" name="indirizzo" id="sedeauto" class="campo" value="<?PHP echo $indirizzo; ?>">
           <?php session_start(); $_SESSION['indirizzo'] = $automezzi; ?>
            <input type="text" name="cellulare" id="prenotauto" class="campo" value="<?PHP  echo $cellulare; ?>">
           <?php session_start(); $_SESSION['cellulare'] = $prenotazioni; ?>
            <input type="text" name="valutazione" id="calendario" class="campo" value="<?PHP  echo $valutazione; ?>">
           <?php session_start(); $_SESSION['valutazione'] = $calendario; ?>
           </div>
       <input name="orario" type="submit" id="orario" value="CONTINUA LA PRENOTAZIONE" class="fsSubmitButton" ><br><br>
     
        <a href="javascript:history.back()" class="btn">Torna indietro</a>
     
   </form>


</body>
</html>
Mille grazie
 
Ultima modifica:

AdeKnite

Utente Attivo
3 Ago 2016
161
35
28
26
Non ho capito. Puoi esplicitare bene la richiesta?
Hai postato una marea di codice e non si capisce cosa vuoi fare e dove vuoi farlo.

Ricorda di usare i BBCode quando posti del codice.
 

cris8380

Moderatore
Membro dello Staff
MOD
3 Giu 2016
261
14
18
36
Non ho capito. Puoi esplicitare bene la richiesta?
Hai postato una marea di codice e non si capisce cosa vuoi fare e dove vuoi farlo.

Ricorda di usare i BBCode quando posti del codice.
Ciao @vannone_il_grande sei pregato di inserire i codici nei tag appropriati dando la possibilità anche ad @AdeKnite di poter capire il codice postato, quindi utilizza se proprio non trovi nell'editor il comando, quello manuale

[ES. PHP]
QUESTO è PER IL PHP
[ES. /PHP]
------------------------------
[ES. HTML]
QUESTO è PER L'HTML
[ES. /HTML]

A presto!
 

VAik

Utente Attivo
16 Apr 2016
117
3
18
mi iscrivo. Perchè immagino che la mia preparazione passi anche da questo tipo di esercizio