Update a Select with onchange of other Select

#1 / Nov 19, 2008 8:57pm

Nuno Simões

3 posts

I there, I’m a newbie on CI and I’m having a problem:

On my view page nammed init.php, I have two select boxes on a form and I want to update one select (modelo) with data from database after change selection on other select (fabricante). Does anyone tell me the better way to do this?

Thanks a lot!

There’s the Code:

<form name="detailsearch" action="#" method="get">
    <input name="search_statement" type="text" /><br >
        <div id="label">Fabricante: </div>
        <select name="fabricante">
            <option value="0">Indiferente</option>
            <?php
        $i=0;
                foreach($fabricantes->result() as $row) {
            echo "<option value=\"".++$i."\">".$row->NOME."</option>\n";
        }    
            ?>
        </select>

        <div id="label">Modelo: </div>
        <select name="modelo">
            <option value="0">Indiferente</option>
        </select>

</form>

#2 / Nov 20, 2008 3:29am

abmcr
254 posts

i think do you nedd use an ajax wrapper….. after select in the first select box, you call the ajax function for populate the second select
#3 / Nov 20, 2008 5:27am

Nuno Simões
3 posts

Thanks for the answer abmcr.

I’ve already worked with the SACK, but I don’t know how to integrate this with CodeIgniter. I’m searching right now for a good tutorial ‘bout jQuery and CodeIgniter, one that explains the things, not the ones that teaches you to do a thing and nothing more. If you know some, report it to me, OK?

Thanks a lot

#4 / Nov 20, 2008 6:34am

abmcr

254 posts

The php code in a view

$js = 'onChange="get_dati_gerachia()"';
echo form_dropdown('dati_gerarchia', $options, "TRUE",$js);echo "\n";
.....
    $id = 'id="master" ';
            $options = array(
                              'y'  => 'Master',
                              'n'  => 'Normale'
                            );
            echo "<span>".form_dropdown('master', $options,'',$id)."</span>";

and the js routine

function get_dati_gerachia(){
    var chosenItemText = $("select[name='dati_gerarchia']").val();
     a="data="+chosenItemText;
     $.ajax({
      type: "POST",
      url:  "<?php echo site_url("the_url_of_your_ajax_controller")?>",
      data: a,
      success: function(msg){
        $("#ajax_target").html(msg);
        }
    });
}

and your ajax controller

function the_url_of_your_ajax_controller(){
        $var=$this->input->post("data");
..... some operations and build your select dependency
$html="<select…...."
echo $html;
}

Into this the_url_of_your_ajax_controller you build the second select and echo to the ajax_target div

#5 / Nov 20, 2008 9:58am
Nuno Simões
3 posts
Thanks, I had some problems getting the selected value, but is solved now.

I have another question, what do I need to load to make the next piece of code to work:
```
$.ajax({
      type: "POST",
      url:  "<?php echo site_url("the_url_of_your_ajax_controller")?>",
      data: a,
      success: function(msg){
        $("#ajax_target").html(msg);
        }
    });
```
#6 / Nov 20, 2008 10:10am

abmcr
254 posts

Oooops…... i forget!
In this sample i have used jquery librarie…. only the core
download at http://www.jquery.com
Ciao!
#7 / Nov 20, 2008 1:52pm

Nuno Simões
3 posts

It worked! :D Thanks a lot.

If you come to Portugal, just let me know and I pay you a beer! 😉

Thread

Nuno Simões

abmcr

Nuno Simões

abmcr

Nuno Simões

abmcr

Nuno Simões

Username

Password

Thread