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

Discussione in 'Javascript' iniziata da fideria, 25 Febbraio 2018.

  1. fideria

    fideria Nuovo Utente

    Registrato:
    25 Febbraio 2018
    Messaggi:
    4
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Femmina
    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!
     
  2. marino51

    marino51 Utente Attivo

    Registrato:
    28 Febbraio 2013
    Messaggi:
    2.138
    Mi Piace Ricevuti:
    91
    Punteggio:
    48
    Occupazione:
    free lance
    Località:
    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
     
  3. fideria

    fideria Nuovo Utente

    Registrato:
    25 Febbraio 2018
    Messaggi:
    4
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Femmina
    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...
     
  4. marino51

    marino51 Utente Attivo

    Registrato:
    28 Febbraio 2013
    Messaggi:
    2.138
    Mi Piace Ricevuti:
    91
    Punteggio:
    48
    Occupazione:
    free lance
    Località:
    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
     
  5. fideria

    fideria Nuovo Utente

    Registrato:
    25 Febbraio 2018
    Messaggi:
    4
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Femmina
    Marino51 grazie per la pazienza
    Il file che tu chiami Ajax.php cosa dovrebbe contenere?
     
  6. marino51

    marino51 Utente Attivo

    Registrato:
    28 Febbraio 2013
    Messaggi:
    2.138
    Mi Piace Ricevuti:
    91
    Punteggio:
    48
    Occupazione:
    free lance
    Località:
    Lombardia
    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
     
  7. fideria

    fideria Nuovo Utente

    Registrato:
    25 Febbraio 2018
    Messaggi:
    4
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Femmina
    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!
     
  8. marino51

    marino51 Utente Attivo

    Registrato:
    28 Febbraio 2013
    Messaggi:
    2.138
    Mi Piace Ricevuti:
    91
    Punteggio:
    48
    Occupazione:
    free lance
    Località:
    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>
     
Sto caricando...

Condividi questa Pagina