Here in this post we will learn about CodeIgniter dropdown using form helper file. There are various functions in this helper file that assist in working with forms.  To load helper within controller use below code.

Syntax:-

 $this->load->helper('form');


If you want to load the helper automatically then add the name of the helper to $autoload array config.

Syntax:-

Path: applicationconfigautoload.php

Code: $autoload[‘helper’] = array(‘form’); 

To populate form dropdown in CodeIgniter we are going to use one of the form helper function i.e. form_dropdown()  from helper file that will create drop-down field.

Also, one can use it to create multi select by passing an array of multiple items.

 


To insert and read data, we have created a database and table naming dropdown and dropdown_value respectively.

In that we have two columns one for storing single selection dropdown value and another for storing multiple selection dropdown value.

MySql Code : database.sql

CREATE DATABASE dropdown;
CREATE TABLE dropdown_value(
dropdown_single varchar(255) NOT NULL,
dropdown_multi varchar(255) NOT NULL,
)

Now to start with, we have created a view file: reg_form.php , a controller file form.php, a model file db_dropdown.php to connect with database and a CSS file style.css for designing view page.

You can copy and paste the below mention codes in their respective files or can download it through the link given.  Run the program using base path:

localhost/ci_dropdown/index.php/form/form_dropdown

 


Below is our complete code with download  and live demo option

codeigniter-dropdown

 


Tutorial Scripts in detail

Below are the details of the code used in this tutorial with proper explanation.

As we know that the CodeIgniter contains controller, model and view files. Let’s start with controller.

 Controller file : form.php

<?php
class Form extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper('form');
}
public function form_dropdown() {
$this->load->view("reg_form");
}
public function data_submitted() {
//storing the value send by submit using post method in an array
$mul_array = $this->input->post('Technical_skills');
//converting array into a string
$mul_val_string = serialize($mul_array);
$data = array(
'dropdown_single' => $this->input->post('Department'),
'dropdown_multi' => $mul_val_string
);
$this->load->model("db_dropdown");
$this->db_dropdown->insert_in_db($data);
$this->load->model("db_dropdown");
$result = $this->db_dropdown->read_from_db($data);
$data['result'] = $result[0];
$this->load->view("reg_form", $data);
}
}
?>

 

View file : reg_form.php

<html>
<head>
<title>Codeigniter Form Dropdown</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>acript/script.js"></script>
</head>
<body>
<div class="main">
<div id="content">
<h2>Form Dropdown In Codelgniter</h2><br/>
<div id="message"></div>
<hr>
<?php
echo "<h3>Single Selection Dropdown</h3>";
echo form_open('form/data_submitted');
$options = array(
'Computer Science Engineering' => 'Computer Science Engineering',
'Electronics and Comm. Engineering' => 'Electronics and Comm. Engineering',
'Mechanical Engineering' => 'Mechanical Engineering',
'Civil Engineering' => 'Civil Engineering',
);
echo "<div class='drop_pos'>";
echo form_dropdown('Department', $options, 'Computer Science Engineering', 'class="dropdown_box1"');
if (isset($result)) {
$db_value = array();

foreach ($result as $value) {
$db_value[] = $value;
}
$single_sel = $db_value[0];
//Converting string to array
$mul_selection = unserialize($db_value[1]);
}
if (isset($single_sel)) {
echo "<p><b>You have selected :</b>&nbsp;&nbsp;";
echo "<ul>";
echo "<li>" . $single_sel . "</li>";
}
echo "</p>";
echo "</ul>";
echo "</div>";
echo "<hr/>";
?>
<?php
echo "<h3>Multiple Selection Dropdown</h3>";
$options = array(
'C' => 'C',
'C++' => 'C++',
'ORACLE' => 'Oracle',
'JAVA' => 'Java',
'DATABASE' => 'Database',
'PHP' => 'Php'
);
$selected = array('C', 'ORACLE');
echo "<div class='drop_pos'>";
echo "<p><font color='red'><b>Note:</b></font>&nbsp;&nbsp;<b>To Select Multiple Options Press<br/> ctrl+left click</b></p>";
echo form_dropdown('Technical_skills[]', $options, $selected, 'class="dropdown_box2"');
if (isset($mul_selection)) {
echo "<p><b>You have selected :</b>";
echo "<ul>";
foreach ($mul_selection as $value) {
echo "<li>" . $value . "</li>";
}
}
echo "</ul>";
echo "</p>";
echo "</div>";
?>
<div id="form_button">
<?php echo form_submit('submit', 'submit', 'class="submit"'); ?>
</div>
<?php echo form_close(); ?>
</div>
</div>
</body>
</html>

 

Model file : db_dropdown.php

<?php
class Db_Dropdown extends CI_Model {
public function form_dropdown() {
$this->load->view("reg_form");
}
public function insert_in_db($data) {
$this->db->insert('dropdown_value', $data);
if ($this->db->affected_rows() > 1) {
return true;
} else {
return false;
}
}
public function read_from_db($data) {
$condition = "dropdown_single =" . "'" . $data['dropdown_single'] . "' AND " . "dropdown_multi =" . "'" . $data['dropdown_multi'] . "'";
$this->db->select('*');
$this->db->from('dropdown_value');
$this->db->where($condition);
$query = $this->db->get();
$data = $query->result();
return $data;
}
}
?>

 

CSS file:  style.css that we have used for designing the form is given below:

body {
font-family: 'Raleway', sans-serif;
}
.main
{
width: 600px;
height: 650px;
position: absolute;
top: 10%;
left: 30%;
}
h2
{
text-align: center;
background-color: #FEFFED;
height: 66px;
margin: 0 0 -29px 0;
padding-top: 14px;
border-radius: 8px 8px 0 0;
color: rgb(97, 94, 94);
}
h3{
padding-left: 78px;
color: rgb(97, 94, 94);
}
p{
color:#146092;
}
li{
color:#550000;
}
#content {
position: absolute;
width: 450px;
height: auto;
border: 2px solid gray;
border-radius: 10px;
}
#form_button{
padding: 0 21px 15px 15px;
position: absolute;
bottom: 0px;
width: 414px;
background-color: #FEFFED;
border-radius: 0px 0px 8px 8px;
border-top: 1px solid #9A9A9A;
}
.drop_pos{
padding-left:78px;
width:500px;
}
.submit{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 300px;
border-radius: 5px;
padding: 10px 0;
outline: none;
margin-top: 20px;
margin-left: 15%;
}
.submit:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
.dropdown_box1{
width:300px;
height:30px;
margin-top:-5px;
font-size: 16px;
font-family: cursive;
}
.dropdown_box2{
width:300px;
height:88px;
margin-top:-5px;
font-size: 16px;
font-family: cursive;
}

Pabbly Form Builder


Conclusion:

Thanks for reading the complete post. Hope you have got the concept. You can share your views in the space provided below and get in touch with us.