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

  • Creatore Discussione Creatore Discussione fideria
  • Data di inizio Data di inizio
F

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!
 
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
 
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...
 
'#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
 
Marino51 grazie per la pazienza
Il file che tu chiami Ajax.php cosa dovrebbe contenere?
 
fideria ha scritto:
Il file che tu chiami Ajax.php cosa dovrebbe contenere?
Clicca per allargare...
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
 
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!
 
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>
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

A
Problema: creare nuove "option" di una select-list con javascript
Risposte
1
Visite
3K
Javascript
AnubiDk
A
psicomia
Gestione funzione in javascript in tabella richiamare"textarea" valori preimpostati in "select"
Risposte
2
Visite
2K
Javascript
psicomia
psicomia
L
[Javascript] Select option in campi input
Risposte
4
Visite
2K
Javascript
lelemkop
L
max1974
[Javascript] malfunzionamento select
Risposte
0
Visite
1K
Javascript
max1974
max1974
G
[Javascript] Campo a comparsa di select
Risposte
0
Visite
2K
Javascript
ghis
G
N
[Javascript] [HTML] Scelta di una select e compilazione automatica delle restanti
Risposte
0
Visite
1K
Javascript
navajo75
N
A
[Javascript] Select concatenata php csv
Risposte
3
Visite
2K
Javascript
Adst90
A
G
[Javascript] select dinamiche
Risposte
0
Visite
2K
Javascript
greghph27
G
asevenx
[Javascript] [AngularJS] contare opzioni selezionate di una select in un elenco ng-repeat
Risposte
0
Visite
1K
Javascript
asevenx
asevenx
P
Javascript o Jquery - recupero testo (oltre al valore) di una select
Risposte
5
Visite
3K
Javascript
borgo italia
borgo italia
T
[Javascript] un form con select dinamica che funzioni da menù...
Risposte
2
Visite
3K
Javascript
theseo
T
asevenx
[Javascript] aggiungere righe con select da database e calcolo sconto in automatico
Risposte
0
Visite
2K
Javascript
asevenx
asevenx
asevenx
[Javascript] [HTML] personalizzare stili input select
Risposte
5
Visite
5K
Javascript
asevenx
asevenx
D
javascript per select condizionali
Risposte
1
Visite
1K
Javascript
criric
criric
H
problema con select dinamiche e javascript
Risposte
0
Visite
2K
Javascript
HyperX
H
L
Problema Select con Javascript e nodi Dom XML.
Risposte
0
Visite
4K
Javascript
lucaskain
L
M
Select dinamica in javascript, aiuto...
Risposte
1
Visite
2K
Javascript
criric
criric
V
select con javascript
Risposte
1
Visite
2K
Javascript
criric
criric
P
problema passaggio valore javascript a select su pagine php
Risposte
0
Visite
2K
Javascript
paridos
P
Z
Select dinamiche PHP MySQL Javascript
Risposte
1
Visite
6K
PHP
alessandro1997
alessandro1997
Alto Basso