[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
3.203
207
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
3.203
207
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
3.203
207
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
3.203
207
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>
 
Discussioni simili
Autore Titolo Forum Risposte Data
A Problema: creare nuove "option" di una select-list con javascript Javascript 1
psicomia Gestione funzione in javascript in tabella richiamare"textarea" valori preimpostati in "select" Javascript 2
L [Javascript] Select option in campi input Javascript 4
max1974 [Javascript] malfunzionamento select Javascript 0
G [Javascript] Campo a comparsa di select Javascript 0
N [Javascript] [HTML] Scelta di una select e compilazione automatica delle restanti Javascript 0
A [Javascript] Select concatenata php csv Javascript 3
G [Javascript] select dinamiche Javascript 0
asevenx [Javascript] [AngularJS] contare opzioni selezionate di una select in un elenco ng-repeat Javascript 0
P Javascript o Jquery - recupero testo (oltre al valore) di una select Javascript 5
T [Javascript] un form con select dinamica che funzioni da menù... Javascript 2
asevenx [Javascript] aggiungere righe con select da database e calcolo sconto in automatico Javascript 0
asevenx [Javascript] [HTML] personalizzare stili input select Javascript 5
D javascript per select condizionali Javascript 1
H problema con select dinamiche e javascript Javascript 0
L Problema Select con Javascript e nodi Dom XML. Javascript 0
M Select dinamica in javascript, aiuto... Javascript 1
V select con javascript Javascript 1
P problema passaggio valore javascript a select su pagine php Javascript 0
Z Select dinamiche PHP MySQL Javascript PHP 1
A form / select e javascript Javascript 1
I Passaggio variabile da javascript a SQL select Javascript 3
I [javascript] memorizzare selezioni di un campo select di un modulo Javascript 1
I Creare un banner temporaneo JavaScript Javascript 0
S Impossibile scorrere un oggetto in JavaScript Javascript 0
N Passare array da php a javascript PHP 5
L Quiz javascript funzionante da migliorare Javascript 0
P errore 404 con javascript Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 3
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
R Confrontare il dominio di una mail con una stringa contenente un dominio personalizzato, tutto ciò in php o javascript PHP 0
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0

Discussioni simili