CodeIgniter Forums
Combined select with dropdown lists into the form - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forum-23.html)
+--- Thread: Combined select with dropdown lists into the form (/thread-23496.html)



Combined select with dropdown lists into the form - El Forum - 10-13-2009

[eluser]phpuser[/eluser]
Hello,

I've a problem which is getting me crazy, I can't find a solution for the moment.
I need to have two drop down lists combined (one which shows for example the state or province and the other the cities of the selected state). The second drop down list must be refreshed once the state has changed. I've been able to make it work having both drop down lists in a form, but the problem is that they have to appear into a form which contain other fields like name, surname, address, etc...

Anyone could help me and show what would be the changes I have to do into the following code in order to make it work ?

Code:
<?php
// User Account

if ($data_u != null) {
echo form_open('user/Update_User');    
    
echo " <p><label for='pname'>Name </label><br/>";
$data = array('name'=>'name','id'=>'pname','size'=>50, 'value' => $data_u['name']);
echo form_input($data) ." </p>";

echo " <p><label for='psurname'>Surname </label><br/>";
$data = array('name'=>'surname','id'=>'surname','size'=>50, 'value' => $data_u['surname']);
echo form_input($data) ." </p>";

echo " <p><label for='state'>State </label><br/>";
echo form_dropdown('state', $this->Mod_Utils->getStates(), $data_u['state']) ." </p>";

echo " <p><label for='city'>City </label><br/>";
echo form_dropdown('city',$this->Mod_Utils->getCities() ,$data_u['city']) ." </p>";

echo form_hidden('user_id',$data_u['user_id']);  

echo form_submit('submit','Save Data');
echo form_close();
}
?&gt;

Now $this->Mod_Utils->getStates() returns an array of all the States and
$this->Mod_Utils->getCities() returns an array of all the Cities for all the states.

Thanks !


Combined select with dropdown lists into the form - El Forum - 10-13-2009

[eluser]rogierb[/eluser]
The only way to make this work is either refresh(post) your form when the State changes or use ajax to repopulate your form after State is changed.

I'd go for the ajax solution.

If you want to use post, make sure you catch the submit button. If no submit, then refesch the page with the correct data.


Combined select with dropdown lists into the form - El Forum - 10-13-2009

[eluser]phpuser[/eluser]
Hello rogierb,

thanks for the answer.
I'm going to try to use Ajax, although I did some tests with no luck.
Do you know where I can find a good example of this (ajax, codeigniter and combined dropdown lists into a form) ?

Many thanks !
Jo


Combined select with dropdown lists into the form - El Forum - 10-13-2009

[eluser]rogierb[/eluser]
go to jquery.com and do a google on jquery. It's easy to learn:-)


Combined select with dropdown lists into the form - El Forum - 10-13-2009

[eluser]Scal[/eluser]
Something alike
$('state drop down selector').change(function(){
$('ciites drop down selector').html = ''; // reset the options for the cities
$('ciites drop down selector').html = $.get('/controller/getCitiesFromState/' + $(this).text); // set the options for the cities
}
)

Whenever the option is changed from the States drop down menu, the select drop down menu for cities is cleaned and you assign the request value to it.
Your controller with the 'getCitiesFromState' method should return the <option> elements only as it will be 'injected' into the <select> element.
There are many ways to do this, experiment and find the best solution for your needs, also this is a rough example to get you started; it is not meant as the final script solution for your need.

Good luck Smile