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

vannone_il_grande · 20 Set 2016

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 · 20 Set 2016

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ò:

Pagina in cui mostro il menu a tendina e il risultato
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 · 20 Set 2016

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

AdeKnite · 21 Set 2016

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 · 21 Set 2016

AdeKnite ha scritto:
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!

vannone_il_grande · 22 Set 2016

perdonami, (ho messo il code per fare prima) tutto risolto si può chiudere la discussione, grazie ancora[/code]

VAik · 22 Set 2016

mi iscrivo. Perchè immagino che la mia preparazione passi anche da questo tipo di esercizio

Cerca

Cerca

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

vannone_il_grande

Nuovo Utente

AdeKnite

Utente Attivo

vannone_il_grande

Nuovo Utente

AdeKnite

Utente Attivo

cris8380

Moderatore

vannone_il_grande

Nuovo Utente

VAik

Utente Attivo

Discussioni simili