0

I want to create multiple drop down list in codeigniter, in my case when the user selects country the next list should provide the state options of that country and after the user selects the state the next section should provide the town options etc... I want the list or options to be provided by using some scripts, and when the user finally completes the selection the list should be updated in the database. Is it possible to provide the list of options by using scripts instead of loading the options from the database. Here is the view and model file on which I want to implement the dynamic drop down list

form_model.php

function r_ins()
{

    $session_user=$this->session->userdata('logged_in');
    $sysdat = date("Y-m-j H:i:s");      

    $data= array(
        'id'        => $this->input->post('id'),
        'name'      => $this->input->post('name'),          
        'country'   => $this->input->post('country'),
        'state'     => $this->input->post('state'),
        'town'      => $this->input->post('town'),
        'village'   => $this->input->post('village'),           
        'c_name'    => $session_user['username'],
        'c_date'    => $sysdat
        );

    $this->db->insert('r_info',$data);

    return $this->input->post('id');
    //echo "<pre>";
    // print_r($_POST);

}

view.php

 <label> ID:<span id="r_id" style="font-size:12px;float:right;"></span></label>
     <input type="text" name="id" id="r_id" placeholder="ID" required/>    

     <label >Name:</label>
     <input type="text" name="name"  placeholder="Name" required/>

     <label >Country:</label>
     <select name="country" >
         <option>Select Country</option>
         <option value="USA">USA</option>
         <option value="AUS">Austrailia</option>
         <option value="Jap">Japan</option>
         <option value="Korea">Korea</option>
     </select><br/><br/>                                

     <label >State:</label>
     <input type="text" name="state" placeholder="State" required/>

     <label >City:</label>
     <input type="text" name="city" placeholder="City" required/>
     <label >Town:</label>
     <input type="text" name="town" placeholder="Town" required/>         

     <input type="submit" value="Save" id="re_submit" class="button"><br/>

 </form>
5
  • You have to use ajax. there are many tutorials available on internet for this topic. Commented Mar 14, 2015 at 14:41
  • Thanks @siddhesh, ill google it out Commented Mar 14, 2015 at 14:43
  • Is there any advantage over loading the dropdown list from a database and using ajax scripts, one I have seen that ajax will need to have javascript enabled in the client browser (redirecting the user to a page how to enable java script) .. Commented Mar 14, 2015 at 14:55
  • You can't manage client's browser in any way. It would be security issue if you could. Most (if not all) nowadays browsers have enabled JavaScript by default. reasons why people disable JS: can be read here. Commented Mar 14, 2015 at 15:37
  • Got your point @Tpojka. Thanks Commented Mar 14, 2015 at 15:50

1 Answer 1

0
  1. If you want the content of your dropdowns to be dynamic then I believe you can't achieve this without accessing your database by specifying your queries.
  2. From what I understood in your question, you want a dynamic dropdown in which its content is filtered by its preceding dropdown. Then your best bet would be to use AJAX, as PHP is only able to run server accessing functions without POST and GET which needs refreshing the page.

here's an ajax demo

<script type="text/javascript"> 




function getXMLHTTP() { //function to return the xml http object
var xmlhttp=false;  
try{
    xmlhttp=new XMLHttpRequest();
}
catch(e)    {       
    try{            
        xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e){
        try{
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e1){
            xmlhttp=false;
        }
    }
}

return xmlhttp;
}



function getDoc(strURL) {       

var req = getXMLHTTP();

if (req) {

    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            // only if "OK"
            if (req.status == 200) {                        
                document.getElementById('my_div').innerHTML=req.responseText;                       
            } else {
                alert("There was a problem while using XMLHTTP:\n" + req.statusText);
            }
        }               
    }           
    req.open("GET", strURL, true);
    req.send(null);
}

}
                                </script>

Here's where the magic happens. In my first dropdown I placed an onChange attribute. This calls my getDoc javascript function which has a PHP FUNCTION as parameter.

    <select name="docSpec" id="docSpec" onChange="getDoc('getSpec.php?spec='+this.value)">

            <option>pick a specialization</option>
            <option value="General">General</option>
            <option value="pediatrics">pediatrics</option>
            <option value="Physician">Physician</option>
            <option value="Cardiologist">Cardiologist</option>
            <option value="Pulmonary">Pulmonary</option>

    </select>
    <div id="my_div" style="display:inline;">       
                <!--content from getSpec.php goes here--->                              
    </div>

Now you need a DIV in your HTML which takes the data from another page then returns it in your current page as a DOM. This way your original page doesn't refresh but still gets data from the server.


getSpec.php to show what happens under the php sheets

require_once('dbcon.php');
$query="select doctorName from doctors where specialty= '$spec'";
$result=mysqli_query($conn,$query);

?>
<select name="docName">

<?php 

    while( $row = mysqli_fetch_row($result)) { 

echo "<option type='hidden' value='$row[0]'>$row[0]</option>";
} ?>

 </select> 

I hope this code helps. You can tweak this to your needs.

Sign up to request clarification or add additional context in comments.

3 Comments

wow! thanks @gokigooooks, will I be able to implement your suggestion in my phpcodeigniter project?
yes you can. This is a procedural approach so its safe to say yes.
Thanks again @Gokigooooks... Ill figure it out and give it a try... thank u

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.