• N
    User Attivo •

    Come realizzare delle select concatenate con PHP e jQuery?

    In questo articolo: wwwPUNTOyourinspirationwebPUNTOcom/2010/09/09/come-realizzare-delle-select-concatenate-con-php-e-jquery/
    viene spiegato come concatenare vari select. Vengono forniti due esempi diversi: il secondo è il codice per ottenere regioni-provincie-comuni -e funziona tranquillamente-; il primo "categorie - tipi" purtroppo no. Tuttavia questo primo esempio è diverso e molto utile.
    Qui riporto il codice, potete dirmi cos'è che non va?

    Innanzitutto ci sono due tabelle: **categorie **con "id_cat" e "nome" e **tipo **"id_tipo", "id_cat", "nome"

    C'è db_config.php:

    [PHP]<?php
    $host = "62.149.xxx.xxx";
    $user = "Sqlxxxxx";
    $password = "xxxxxxxx";
    $db = "Sqlxxxxx_1";
    ?>[/PHP]

    Un file **jquery-1.3.2.js

    **La pagina principale **select.php: (dove sono quasi sicuro ci sia l'errore)
    **
    [PHP]<html><head>
    <script type="text/javascript" src="jquery-1.3.2.js">
    </script><script type="text/javascript">
    $(document).ready(function()
    {
    $("select#categorie").change(function(){
    var categorie = $("select#categorie option:selected").attr('value');
    $("select#tipo").html("<option>attendere...</option>");
    $("select#tipo").attr("disabled","disabled");
    $("select#tipo").attr("disabled","disabled");

    $.post("select_type.php", {id_cat:categorie}, function(data){
    $("select#tipo").removeAttr("disabled");
    $("select#tipo").html(data);
    });
    });

    $("form#select_form").submit(function(){
    var cat = $("select#categorie option:selected").attr('value');
    var type = $("select#tipo option:selected").attr('value');
    if(cat>0 && type>0){
    var result = $("select#tipo option:selected").html();
    $("#result").html('Hai scelto: '+result);
    }
    else
    {
    $("#result").html("Devi segliere le due opzioni!");}
    return false;});
    });
    </script>
    </head>
    <?php include "select.class.php"; ?>
    <body>
    </pre>
    <form id="select_form">Scegli una categoria:
    <select id="categorie"> <?php echo $opt->ShowCategory(); ?></select>
    Scegli un tipo:
    <select>
    <option value="0">scegli...</option>
    </select>
    <input type="submit" value="conferma" />
    </form>
    <pre>
    </body></html>[/PHP]

    La classe **select.class.php:
    **[PHP]<?php
    class SelectList
    {
    protected $conn;
    public function __construct()
    {$this->DbConnect();
    }
    protected function DbConnect()
    {
    include "db_config.php";
    $this->conn = mysql_connect($host,$user,$password) OR die("Impossibile connettersi al database");
    mysql_select_db($db,$this->conn) OR die("Impossibile selezionare il database $db");
    return TRUE;
    }

    public function ShowCategory()
    {
    $sql = "SELECT * FROM categorie";
    $res = mysql_query($sql,$this->conn);
    $category = 'scegli...';
    while($row = mysql_fetch_array($res))
    {
    $category .= '<option value="' . $row['id_cat'] . '">' . $row['nome'] . '</option>';
    }
    return $category;
    }

    public function ShowType()
    {
    $sql = "SELECT * FROM tipo WHERE id_cat=$_POST[id_cat]";
    $res = mysql_query($sql,$this->conn);
    $type = 'scegli...';
    while($row = mysql_fetch_array($res))
    {
    $type .= '<option value="' . $row['id_tipo'] . '">' . $row['nome'] . '</option>';
    }
    return $type;
    }

    }
    $opt = new SelectList();
    ?>[/PHP]

    Infine select_type.php:

    [PHP]<?php include "select.class.php"; echo $opt->ShowType(); ?>[/PHP]

    0
  • C
    User •

    Ci sono passato anche io in quella strada a suo tempo.

    DOMANDA VELOCE:
    ti interessa che durante la compliazione del form la pagina NON venga ricaricata di volta in volta? Se NON VUOI che la pagina venga ricaricata, allora hai bisogno di mettere le mani su AJAX e dintorni, altrimenti basta fare delle semplici SQL filtrate in base alle scelte effettuate (ma in questo caso la pagina HTML viene ricaricata di volta in volta).

    0
  • N
    User Attivo •

    Problema risolto (@criccroc: serviva Ajax!).
    Bisognava modificare soltanto la **select.php:
    **Tra i tags <head> va inserito:

    <script type="text/javascript" src="jquery-1.3.2.js"></script><script type="text/javascript">
        $(document).ready(function(){
        
        $("select#categorie").change(function(){
            $("select#tipo").attr("disabled","disabled");
            $("select#tipo").html("<option>attendere...</option>");


            var id = $("select#categorie option:selected").attr('value');
                                                       
            $.post("select_type.php", {id_cat:id}, function(data){
                $("select#tipo").removeAttr("disabled");
                   $("select#tipo").html(data);
              });
              });


             $("form#select_form").submit(function(){
                var cat = $("select#categorie option:selected").attr('value');    
                var type = $("select#tipo option:selected").attr('value');
                if(cat>0 && type>0)
                {
                    var result = $("select#tipo option:selected").html();
                    $("#result").html('Hai scelto: '+result);


                }
                else
                {
                    $("#result").html("Devi segliere le due opzioni!");
                }


                return false;
        });
    });


</script>

    Prima del tag <body> bisogna inserire: [PHP]<?php include "select.class.php"; ?>[/PHP]

    Infine nel <body> il codice html:
    [HTML]<table width="950" border="0">
    <tr>
    <td width="381"><h2>Prova</h2></td>
    </tr>
    <tr><td><form id="select_form">

    <table width="100%">
    <tr><td width="40%">Scegli una categoria:<br />
    <select name="categorie" size="8" id="categorie">
    <option value="0">Seleziona Categoria...</option>
    <?php echo $opt->ShowCategory(); ?></select></td>
    <td width="40%">Scegli un tipo:<br />
    <select name="tipo" size="8" id="tipo"></select></td>
    <td width="20%"><input type="submit" value="conferma" /></td></tr>
    <tr>
    <td colspan="3"><p> </p>
    <table width="100%" id="risultato">
    <tr>
    <td align="center">
    <div id="result"></div></td></tr></table>
    <p> </p></td></tr></table></form></td>
    </tr></table>[/HTML]

    0
Effettua l'accesso per rispondere