[Javascript] select list concatenate - passare valore dalla prima alla seconda

fideria

Nuovo Utente
25 Feb 2018
4
0
1
Salve
ebbene si forse dal titolo del post si capisce già che sono alle prime armi.
Ho due select in un form di inserimento, rispettivamente "Sezioni" e "Categie".
Ovviamente dalla selezione della sezione dipende la lista di categorie mostrata (le due liste le leggo da apposite tabelle mysql).
Il seguente è il codice delle due option value:

HTML:
<div class="GruppoCampi">
                <span class="CampoObb">Sezioni</span>
                <span class="CampoVal">
                    <select name="IDSezioneAlbo" id="IDSezioneAlbo">
                        <option value="">Seleziona...</option>
                        <?php foreach ($Cls->getSezioniAlbo(1) as $item) { ?>
                            <option value="<?php echo $item->ID ?>"><?php echo $item->Titolo ?></option>
                        <?php } ?>
                    </select>
                </span>
                <span class="CampoObb">Categorie</span>
                <span class="CampoVal">
                    <select name="IDCategoriaAlbo">
                        <option value="">Seleziona...</option>
                        <?php foreach ($Cls->getCategorieAlbo(1) as $item) { ?>
                            <option value="<?php echo $item->ID ?>"><?php echo $item->Titolo ?></option>
                        <?php } ?>
                    </select>
                </span>
             </div>
Immagino serva jQuery per passare il valore selezionato dalla select "Sezioni" alla funzione "getCategorieAlbo()" di "Categorie".

Ho aggiunto nel file common.js il seguente script:

Codice:
   jQuery('#IDSezioneAlbo').change(function () {
                    //Selected value
                    var inputValue = jQuery(this).val();
                    alert("value: " + inputValue);
                });
...ed effettivamente nell'alert mi mostra l'id della sezione selezionata, ma come restituisco al file php (e nello specifico alla funzione getCategorieAlbo) tale valore?

Perdonate la mia impreparazione e grazie in anticipo!
 

marino51

Utente Attivo
28 Feb 2013
2.602
132
63
Lombardia
ho preparato un unico script che gestisce la pagina e risponde alla chiamata Ajax,
penso ti sia facile riconoscere le funzionalità
PHP:
<?php
require_once 'myUtils/ClassTheBestDB.php';
$db = new TheBestDB('sqlsrv:Server=NomeServer;Database=NomeDatabase','utente','password');
$db->fetch_mode("assoc");

if ( !empty($_POST) )
{
    if ( !empty($_POST['type']) and $_POST['type'] == "car" )
    {
        $res = "<select name='IDCategoriaAlbo' id='IDCategoriaAlbo'>"
             . "<option value=''>Seleziona...</option>";

$sql = "
select ma.co_nr, co.co_cod from matrice ma
inner join componenti co on ma.co_nr = co.co_nr
where ma.ca_nr = " . $_POST['cod'] . " order by ma.co_nr
";
        $sth = $db->query( $sql );
        while( $item = $sth->fetch() )
          $res .= "<option value='" . $item['co_nr'] . "'>" . $item['co_cod'] . "</option>";
    }
    $res .= "</select>";
    echo $res;
    die;
}

?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>jQuery AJAX test</title>

        <script type='text/javascript' src='http://localhost/test_site/php/jquery.min.js'></script>

        <script type="text/javascript">

$(document).ready(function()
{
    $('#IDSezioneAlbo').change(function ()
    {
        var inputValue = $('#IDSezioneAlbo').val();

        alert('value : ' + inputValue);

        matrice(inputValue);
    });

    function matrice(car)
    {
        $.ajax
        ({
            type:    'post',
            cache:   false,
            url:     'Ajax.php',
            data:
            {
                type : 'car',
                cod  : car,
            },
            success: function(response)
            {
                $('#IDCategoriaAlbo').html(response);
            },
            error: function(request, status, error)
            {
                alert('errore esecuzione Ajax.php '+request.responseText);
            }
        });
    }
});
        </script>
    </head>
    <body>

<div class="GruppoCampi">

  <span class="CampoObb">Sezioni</span>
    <span class="CampoVal">
      <select name="IDSezioneAlbo" id="IDSezioneAlbo">
        <option value="">Seleziona...</option>
<?php
        $sql = "select ca_nr, ca_cod from caratteristiche where ca_nr < 20 order by ca_nr";
        $sth = $db->query( $sql );
        while( $item = $sth->fetch() )
          echo "<option value='" . $item['ca_nr'] . "'>" . $item['ca_cod'] . "</option>";
?>
      </select>
    </span>
  </span>

  <br /><br />

  <span class="CampoObb">Categorie</span>
    <span class="CampoVal">
      <select name='IDCategoriaAlbo' id='IDCategoriaAlbo'>
        <option value="">Seleziona...</option>
      </select>
    </span>
  </span>
</div>

    </body>
</html>
risultato

upload_2018-2-26_13-47-13.png


ps, la seconda select puoi gestirla come non operativa fino al momento in cui non viene "riempita" ma penso che te la puoi cavare da solo
 

fideria

Nuovo Utente
25 Feb 2018
4
0
1
Ciao Marino51
grazie infinite per la risposta...

Ho provato a replicare il tuo suggerimento... qualcosa però continuo a sbagliare :(

Posso postarti il mio codice?
Ho il file FileUploadEdit.php in cui ho le select:
Codice:
 <div class="GruppoCampi">
                <span class="CampoObb">Sezioni</span>
                <span class="CampoVal">
                    <select name="IDSezioneAlbo" id="IDSezioneAlbo">
                        <option value="">Seleziona...</option>
                        <?php foreach ($Cls->getSezioniAlbo(1) as $item) { ?>
                            <option value="<?php echo $item->ID ?>"><?php echo $item->Titolo ?></option>
                        <?php } ?>
                    </select>
                </span>
                <span class="CampoObb">Categorie</span>
                <span class="CampoVal">
                    <select name="IDCategoriaAlbo">
                        <option value="">Seleziona...</option>
                        <?php foreach ($Cls->getCategorieAlbo($_POST['cod']) as $item) { ?>
                            <option value="<?php echo $item->ID ?>"><?php echo $item->Titolo ?></option>
                        <?php } ?>
                    </select>
                </span>
             </div>
Poi nel file common.js (che includo nell'head) ho scritto:
Codice:
jQuery(document).ready(function()
    jQuery('#IDSezioneAlbo').change(function () {
        jQuery('#IDSezioneAlbo').change(function ()
        {
            var inputValue = jQuery('#IDSezioneAlbo').val();
            alert('value : ' + inputValue);
            matrice(inputValue);
        });

        function matrice(car)
        {
            jQuery.ajax
                    ({
                        type: 'post',
                        cache: false,
                        url: 'FileUploadEdit.php',
                        data:
                                {
                                    type: 'IDSezioneAlbo',
                                    cod: IDSezioneAlbo,
                                },
                        success: function (response)
                        {
                            jQuery('#IDCategoriaAlbo').html(response);
                        },
                        error: function (request, status, error)
                        {
                            alert('errore esecuzione Ajax.php ' + request.responseText);
                        }
                    });
        }

    });
});
:( Cosa sbaglio?

Grazie in anticipo...
 

marino51

Utente Attivo
28 Feb 2013
2.602
132
63
Lombardia
'#IDCategoriaAlbo' presuppone esista l'ID, infatti io ho scritto
<select name='IDCategoriaAlbo' id='IDCategoriaAlbo'>
che nel tuo codice non c'è,
senza l'ID non viene trovata la select da riempire ...
prova a capire la differenza sia formale sia logica tra i due script, tralasciando le letture al db che sono specifiche
 

fideria

Nuovo Utente
25 Feb 2018
4
0
1
Marino51 grazie per la pazienza
Il file che tu chiami Ajax.php cosa dovrebbe contenere?
 

marino51

Utente Attivo
28 Feb 2013
2.602
132
63
Lombardia
Il file che tu chiami Ajax.php cosa dovrebbe contenere?
dovrebbe contenere solo il codice che risponde alla chiamata Ajax, ovvero
PHP:
<?php
// connessione al db
require_once 'myUtils/ClassTheBestDB.php';
$db = new TheBestDB('sqlsrv:Server=NomeServer;Database=NomeDatabase','utente','password');
$db->fetch_mode("assoc");

// controlla che ci siano valori provenienti dal form
if ( !empty($_POST) )
{
    // verifica che sia stata fatta una specifica richiesta
    if ( !empty($_POST['type']) and $_POST['type'] == "car" )
    {
        $res = "<select name='IDCategoriaAlbo' id='IDCategoriaAlbo'>"
             . "<option value=''>Seleziona...</option>";

// soddisfa la richiesta
$sql = "
select ma.co_nr, co.co_cod from matrice ma
inner join componenti co on ma.co_nr = co.co_nr
where ma.ca_nr = " . $_POST['cod'] . " order by ma.co_nr
";
        $sth = $db->query( $sql );
        while( $item = $sth->fetch() )
          $res .= "<option value='" . $item['co_nr'] . "'>" . $item['co_cod'] . "</option>";
    }
    $res .= "</select>";
    // restituisce il risultato
    echo $res;
    die;
}
?>
lo script può essere ampliato aggiungendo altre "richieste" modificando il parametro che arriva dal form
$_POST['type'] == "car"
e gestendo la nuova richiesta

come vedi è la prima parte dello script che ho postato,
l'ho organizzato in questo modo per gestire con un solo file sia il form che la risposta ad Ajax
 

fideria

Nuovo Utente
25 Feb 2018
4
0
1
Ciao Marino51... io sono andata nel pallone... purtroppo in breve tempo devo riuscire a studiare tutto ciò che mi serve per la programmazione web e completare un banale progettino...
Ciò che per te è una ovvietà per me in questo momento non lo è ancora.
Ti posso gentilmente chiedere un ultimo sforzo? Mi aiuti ad applicare i tuoi suggerimenti al mio codice?
Io ho il seguente php per la costruzione delle select che al momento leggono due tabelle SEZIONI e CATEGORIE non colleate fra loro. E leggono da db rispettivamente tramite le funzioni getSezioniAlbo(1) e getCategorieAlbo(1).
Codice:
             <div class="GruppoCampi">
                <span class="CampoObb">Sezioni</span>
                <span class="CampoVal">
                    <select name="IDSezioneAlbo" id="IDSezioneAlbo">
                        <option value="">Seleziona...</option>
                        <?php foreach ($Cls->getSezioniAlbo(1) as $item) { ?>
                            <option value="<?php echo $item->ID ?>"><?php echo $item->Titolo ?></option>
                        <?php } ?>
                    </select>
                </span>
                <span class="CampoObb">Categorie</span>
                <span class="CampoVal">
                    <select name="IDCategoriaAlbo" id="IDCategoriaAlbo">
                        <option value="">Seleziona...</option>
                        <?php foreach ($Cls->getCategorieAlbo(1) as $item) { ?>
                            <option value="<?php echo $item->ID ?>"><?php echo $item->Titolo ?></option>
                        <?php } ?>
                    </select>
                </span>
             </div>
Nel file common.js ho aggiunto:
Codice:
jQuery(document).ready(function() {
 jQuery('#IDSezioneAlbo').change(function ()
        {
            var inputValue = jQuery('#IDSezioneAlbo').val();
            alert('valore : ' + inputValue);
            matrice(inputValue);
        });

        function matrice(car)
        {
            jQuery.ajax
                    ({
                        type: 'post',
                        cache: false,
                        url: 'ajax/prova.php',
                        data:
                                {
                                    type: 'car',
                                    cod: car,
                                },
                        success: function (response)
                        {
                            alert('ok');
                            jQuery('#IDCategoriaAlbo').html(response);
                        },
                        error: function (request, status, error)
                        {
                            alert('ko');
                            alert('errore esecuzione prova.php ' + request.responseText);
                        }
                    });
        };
});
Come devo adeguare questo codice? Le due funzioni getSezioniAlbo(1) e getCategorieAlbo(1) le ho messe in una classe, devo spostare getCategorieAlbo(1) nel file prova.php? Come?

Grazie per la pazienza e spero mi aiuterai!
 

marino51

Utente Attivo
28 Feb 2013
2.602
132
63
Lombardia
mi piace poco fare i ... compiti, perchè la conseguenza è una mancata preparazione ...
oggi strappo alla regola, ma ... un solo script che gestisce domanda e risposta

fatta la scelta sulle "Sezioni",

upload_2018-3-14_15-14-18.png

proseguendo, visualizza le "Categorie" e ne permette la selezione

upload_2018-3-14_15-15-48.png


questo lo script che ho chiamato albo.php

PHP:
<?php
/*
 * connessione al db
 */

........

/*
 * sezione AJAX, risponde alla chiamata da javascript
 * (può essere messa in un file a parte e richiamata con il nome del file assegnato
 */

if ( !empty($_POST) )
{
    if ( !empty($_POST['cod']) )
    {
        $res = "<select name='IDCategoriaAlbo' id='IDCategoriaAlbo'>"
             . "<option value=''>Seleziona...</option>";

        foreach ($Cls->getCategorieAlbo(1) as $item)
           $res .= "<option value='" . $item->ID . "'>" . $item->Titolo . "</option>";
    }
    $res .= "</select>";

    echo $res;
    die;
}


/*
 * form che visualizza IDSezioneAlbo
 * e dopo la scelta, visualizza anche IDCategoriaAlbo
 */

?>
<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <script type='text/javascript' src='../../jquery.min.js'></script>

  <script type='text/javascript'>

$(document).ready(function()
{
    $('#IDSezioneAlbo').change(function ()
    {
        var inputValue = $('#IDSezioneAlbo').val();

        alert('ho selezionato IDSezioneAlbo : '+inputValue);

        $.ajax
        ({
            type:    'post',
            cache:   false,
            url:     'Albo.php',
            data:
            {
                cod  : inputValue,
            },
            success: function(response)
            {
                $('#IDCategoriaAlbo').html(response);
            },
            error: function(request, status, error)
            {
                alert('errore esecuzione Albo.php '+request.responseText);
            }
        });

        visualizza('DivCategorie')
    });

    function visualizza(id)
    {
        e = document.getElementById(id);
        if (e) { e.style.display = 'block'; }
    }
});

  </script>
</head>
<body>
<form id='myForm' method='POST' action='Albo.php'>
             <div class="GruppoCampi">
                <span class="CampoObb">Sezioni</span>
                <span class="CampoVal">
                    <select name="IDSezioneAlbo" id="IDSezioneAlbo">
                        <option value=''>Seleziona...</option>
<?php
    foreach ($Cls->getSezioniAlbo(1) as $item)
        echo "<option value='" . $item->ID . "'>" . $item->Titolo . "</option>";
?>
                    </select>
                </span>
                <br /><br />
                <div id='DivCategorie' style='display: none;'>
                <span class="CampoObb">Categorie</span>
                <span class="CampoVal">
                    <select name="IDCategoriaAlbo" id="IDCategoriaAlbo">
                        <option value=''>Seleziona...</option>
                    </select>
                </span>
                </div>
             </div>
</form>
</body>
</html>