I am using given below code in HTML page to change the value of dropdown list which must less than or equal to the entered value in text box.
Javascript-
function abc(){
var dp = document.getElementById("oildate1");
document.getElementById("ocb3").text = dp;
}
HTML and PHP Code
<input type="text" name="oildate1" id="oildate1" onChange="abc()">
<select name="ocb3" id="ocb3">
<?php
include 'connection.php';
$sql = mysqli_query($con,"select Sno,dateoil, replace(dateoil,'-','') as trimmed_date from dieselrates WHERE Transname='$Transname' order by dateoil ASC");
while ($row = mysqli_fetch_array($sql)){
echo "<option value=$row[Sno]>$row[trimmed_date]</option>";
}
?>
</select>
I'm trying to create dynamic dropdown from 1 table in different column but I couldn't find any tutorial which fit my needs
It has orang_tua table which has n_ibu and n_ayah but I don't know how to create dynamic dropdown
This is orang_tua table
CREATE TABLE `orang_tua` (
`id` INT(3) NOT NULL AUTO_INCREMENT,
`n_ibu` VARCHAR(100) NOT NULL,
`n_ayah` VARCHAR(100) NOT NULL,
`email` VARCHAR(100) NOT NULL,
`no_tlp` VARCHAR(20) NOT NULL,
`alamat` VARCHAR(100) NOT NULL,
PRIMARY KEY (`id`)
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB
AUTO_INCREMENT=2
;
This is my views but can only show 1 column value in dropdown which is only n_ibu
<option value="">-- Pilih dari daftar --</option>
<?php
foreach($all_orang_tua as $orang_tua)
{
$selected = ($orang_tua['id'] == $this->input->post('id_orang_tua')) ? ' selected="selected"' : "";
echo '<option value="'.$orang_tua['id'].'"'.$selected.'>'.$orang_tua['n_ibu'].'</option>';
}
?>
This is the models
<?php
class Siswa_model extends CI_Model
{
function __construct()
{
parent::__construct();
}
/*
* Get siswa by id
*/
function get_siswa($id)
{
return $this->db->get_where('siswa',array('id'=>$id))->row_array();
}
/*
* Get all siswa
*/
function get_all_siswa()
{
$this->db->order_by('id', 'desc');
return $this->db->get('siswa')->result_array();
}
/*
* function to add new siswa
*/
function add_siswa($params)
{
$this->db->insert('siswa',$params);
return $this->db->insert_id();
}
/*
* function to update siswa
*/
function update_siswa($id,$params)
{
$this->db->where('id',$id);
return $this->db->update('siswa',$params);
}
/*
* function to delete siswa
*/
function delete_siswa($id)
{
return $this->db->delete('siswa',array('id'=>$id));
}
/*
* custom function to show index siswa
*/
function get_data_siswa()
{
$this->db->select('sw.id, sw.nama, sw.j_kelamin, sw.tmp_lahir, sw.tgl_lahir, sw.agama, sw.alamat, sw.no_tlp, sw.email, ot.n_ibu, ot.n_ayah, sk.nama_sek');
$this->db->from('siswa sw');
$this->db->join('orang_tua ot', 'ot.id=sw.id_orang_tua');
$this->db->join('sekolah sk', 'sk.id=sw.id_sekolah');
$this->db->distinct('siswa');
return $this->db->get('siswa')->result_array();
}
}
This is the controllers
function add()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('email','Email','valid_email|required');
$this->form_validation->set_rules('id_orang_tua','Id Orang Tua','required');
$this->form_validation->set_rules('id_sekolah','Id Sekolah','required');
$this->form_validation->set_rules('nama','Nama','required');
$this->form_validation->set_rules('j_kelamin','J Kelamin','required');
$this->form_validation->set_rules('tmp_lahir','Tmp Lahir','required');
$this->form_validation->set_rules('tgl_lahir','Tgl Lahir','required');
$this->form_validation->set_rules('agama','Agama','required');
$this->form_validation->set_rules('alamat','Alamat','required');
$this->form_validation->set_rules('no_tlp','No Tlp','required');
if($this->form_validation->run())
{
$params = array(
'j_kelamin' => $this->input->post('j_kelamin'),
'id_orang_tua' => $this->input->post('id_orang_tua'),
'id_sekolah' => $this->input->post('id_sekolah'),
'nama' => $this->input->post('nama'),
'tmp_lahir' => $this->input->post('tmp_lahir'),
'tgl_lahir' => $this->input->post('tgl_lahir'),
'agama' => $this->input->post('agama'),
'alamat' => $this->input->post('alamat'),
'no_tlp' => $this->input->post('no_tlp'),
'email' => $this->input->post('email'),
);
$siswa_id = $this->Siswa_model->add_siswa($params);
redirect('siswa/index');
}
else
{
$this->load->model('Orang_tua_model');
$data['all_orang_tua'] = $this->Orang_tua_model->get_all_orang_tua();
$this->load->model('Sekolah_model');
$data['all_sekolah'] = $this->Sekolah_model->get_all_sekolah();
$data['_view'] = 'siswa/add';
$this->load->view('layouts/main',$data);
}
}
This is orang_tua_model
<?php
class Orang_tua_model extends CI_Model
{
function __construct()
{
parent::__construct();
}
/*
* Get orang_tua by id
*/
function get_orang_tua($id)
{
return $this->db->get_where('orang_tua',array('id'=>$id))->row_array();
}
/*
* Get all orang_tua
*/
function get_all_orang_tua()
{
$this->db->order_by('id', 'desc');
return $this->db->get('orang_tua')->result_array();
}
/*
* function to add new orang_tua
*/
function add_orang_tua($params)
{
$this->db->insert('orang_tua',$params);
return $this->db->insert_id();
}
/*
* function to update orang_tua
*/
function update_orang_tua($id,$params)
{
$this->db->where('id',$id);
return $this->db->update('orang_tua',$params);
}
/*
* function to delete orang_tua
*/
function delete_orang_tua($id)
{
return $this->db->delete('orang_tua',array('id'=>$id));
}
}
I really want to make 2 dropdowns which has relation from n_ibu so I can choose dropdown data from the same row which is n_ayah when I choose n_ibu. I'm still new in codeigniter and I hope that someone can help me
As far as I know, you have to involve javascript for that functionality.
Consider you have set both select input like this :
<p>
<label for="ibu_select">Nama Ibu</label><br/>
<select name="id_orang_tua" id="ibu_select" >
<option selected>-- Pilih dari daftar --</option>
<?php
foreach($all_orang_tua as $orang_tua)
{
$selected = ($orang_tua['id'] == $this->input->post('id_orang_tua')) ? ' selected="selected"' : "";
?>
<option value="<?= $orang_tua['id'] ?>" data-ayah="<?= $orang_tua['n_ayah'] ?>" <?= $selected ?> ><?= $orang_tua['n_ibu'] ?></option>
<?php
}
?>
</select>
</p>
<p>
<label for="ayah_select">Nama Ayah</label><br/>
<select name="n_ayah" id="ayah_select">
<option id="ayah_select_val">-- Pilih dari daftar --</option>
</select>
</p>
Then you could use HTML data-* Attribute for this purpose since the n_ayah data is on the same row with n_ibu data, combined with the use of onchange event listener on the first dropdown input :
<script>
var selection = document.getElementById("ibu_select");
selection.onchange = function(event){
var n_ayah = event.target.options[event.target.selectedIndex].dataset.ayah;
if (n_ayah) {
document.getElementById("ayah_select_val").value = n_ayah;
document.getElementById("ayah_select_val").text = n_ayah;
} else {
document.getElementById("ayah_select_val").value = "";
document.getElementById("ayah_select_val").text = "-- Pilih dari daftar --";
}
};
</script>
The script will set the second dropdown value based from each of the first data- value respectively.
References :
HTML data-* Attribute
Using data attributes
Implement below HTML & PHP script inside your view page for create dynamic dropdown.
<select>
<option value="">-- Pilih dari daftar --</option>
<?php
if(!empty($all_orang_tua))
{
foreach ($all_orang_tua as $orang_tua)
{
$selectedValue="";
if($orang_tua['id'] == $this->input->post('id_orang_tua'))
{
$selectedValue="selected";
}
?>
<option <?php echo $selectedValue;?> value="<?php echo $orang_tua['id'];?>"><?php echo $orang_tua['n_ibu'];?></option>
<?php
}
}
?>
</select>
I hope using above code your problem will be resolved.
I am using laravel 5.2 and javascript. I have an update form which contain a dropdownlist which I call using ajax with function getTugasDetailUpdate . My problem is how can I set the value from the database and make the dropdownlist selected the value from the database that I have chosen before? This below is my code in the controller.
public function getTugasDetailUpdate(Request $request)
{
$update_tugas_id = $request->get("V_ID_PK");
$getDataListPengikut = DB::select("EXEC dbo.GET_KEMENPAR_LIST_PENGIKUT '".$update_tugas_id."'");
$getPengikut2 = DB::select("EXEC dbo.LOV_M_PENGIKUT");
$msg["opt"] ="";
$no=1;
foreach($getDataListPengikut as $dtListPengikut):
$msg["opt"] .= '<tr>
<td><select class="form-control" id="name_'.$dtListPengikut->KODE.'" name="nameupdate[]" data-live-search="true" style="width:100%">
<option value=""> --Silahkan Pilih-- </option>';
foreach ($getPengikut2 as $getPeng){
$msg["opt"] .= '<option value="'.$getPeng->KODE.'">'. $getPeng->DESKRIPSI .'</option>';
}
$msg["opt"] .='</select>
</td>';
$msg["opt"] .= '</tr>';
$no++;
endforeach;
echo json_encode($msg);
}
And how can I get a value from those controller and set it in my javascript? I want to make var optionS = $('#name_3').html(); has an id same like id="name_'.$dtListPengikut->KODE.'" ? those #name_3 is a hardcode, it could be name_4, name_2, etc.
var i=1;
function addMe(e){
var optionS = $('#name_3').html();
i++;
$('#dynamic_field_update').append('<tr id="row'+i+'" class="dynamic-added"><td><select class="form-control" id="name_3" name="nameupdate[]" data-live-search="true" style="width:100%">'+optionS+' </select></td></tr>');
}
You should separate your HTML from your application logic. I suggest you use Laravel Collective package, here is a minimal example:
#foreach($getDataListPengikut as $dtListPengikut) {
Form::select('XXXXXXXX_name', //Unique name for select
['key' => 'value', 'key2' => 'value2'], //Options for this select
null, //Default option (selected)
[
'placeholder' => 'Pick something', //Classes applied to select
'data-live-search' => 'true',
'style' => 'width:100%'
]
);
#endforeach
I have two dropdowns which full information from my SQL table. One dropdown consist of "Colors." The other dropdown consist of members in the specific colors. I already have them in the different optgroup based on their class value which is "color."
My goal is to have the user select "COLOR" and only the members in that class show up in the member dropdown.
Ex. I select Red on the first dropdown. Only members in "Red" will be available in the second dropdown.
Hopefully it can be down using JavaScript
SQL Table:
+-----------+--------------+
| GroupName | MemberName |
+-----------+--------------+
| Red | Joe Bob |
| Red | Catherine |
| Blue | Tommy |
| Orange | John Razks |
| Black | Trevor Smith |
+-----------+--------------+
+--------+
| Color |
+--------+
| Red |
| Blue |
| Orange |
| Black |
+--------+
PHP Code:
<?php
$conn = mysqli_connect("#Connecting");
if(!$conn){ die("Connection Failed".myslqi_connect_error()); }
else{
$color_result = mysqli_query($conn, "SELECT * from Color order by Color ASC");
$colors = array();
while ($row = mysqli_fetch_assoc($color_result)){ $colors[] = $row['Color']; }
$member_result = mysqli_query($conn, "SELECT distinct MemberName,GroupName from Members order by MemberName ASC");
$members = array();
while ($row = mysqli_fetch_assoc($member_result)){
if(!isset($members[$row['GroupName']])){ $members[$row['GroupName']] = array(); }
$members[$row['GroupName']][] = $row; }
}
?>
<form id=#blah>
Color:
<select id="committee" name="committee">
<option value="">Select Color</option>
<?php
foreach($colors as $color){
echo "<option value=\"".$color."\">".$color."</option>";
}
?>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">
Individual:
<select name="senator" id="senator">
<option value="">Select Individual</option>
<?php
foreach($members as $key => $member_group){
echo "<optgroup class=\"".$key."\">";
foreach($member_group as $val){
echo "<option value=\"".$val['MemberName']."\">".$val['MemberName']."</option>";
}
echo "</optgroup>";
}
?>
</select>
</div>
</form>
<form id=#id>
Color:
<select id="committee" name="committee">
<option value="">Select Color</option>
<?php
foreach($colors as $color){
echo "<option value=\"".$color."\">".$color."</option>";
}
?>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">
Individual:
<select name="senator" id="senator">
<option value="">Select Individual</option>
<?php
foreach($members as $key => $member_group){
echo "<optgroup class=".$key.">";
foreach($member_group as $val){
echo "<option value=\"".$val['ValueName']."\">".$val['MemberName']."</option>";
}
echo "</optgroup>";
}
?>
</select>
</form>
you can use this demo code which help you
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="firstmenu" name="City" onchange="select_other(this.value)">
<option value="Color1">Color1</option>
<option value="Color2">Color2</option>
<option value="Color3">Color3</option>
</select>
<br/>
<select id="secondmenu" name="zipCode">
<option value="Color1">Member1</option>
<option value="Color2">Member2</option>
<option value="Color3">Member3</option>
</select>
<script>
function select_other(value){
$("#secondmenu").children('option').hide();
$("#secondmenu").children("option[value^=" + value + "]").show();
$("#secondmenu").children("option[value^=" + value + "]").attr('selected',true);
}
</script>
What would work is to fill the values of an option with the members and read them out in a new select, but it's easier with an example:
HTML & PHP CODE
Of course you can still use your array, but I just like to do it with the "while($fetch = mysqli_fetch_assoc($query))" way. Also It surely doesn't look nice, but that's not part of the question ;)
// on the color select add this onchange
<select id="color" onchange="setOptions(this.value)">
<?php
$color_result = mysqli_query($conn, "SELECT * from color ");
while ($fetch_colors = mysqli_fetch_assoc($color_result)) {
$color = $fetch_colors['color'];
// This select is changed: WHERE GroupName='$color',
// so it just reads the members of the current color
$member_result = mysqli_query($conn, "SELECT distinct MemberName from Members WHERE GroupName='$color' order by MemberName ASC");
$memberstring = "";
$i=1;
$count_rows = mysqli_num_rows($member_result);
// Here just an string gets filled which will be the value of the option
while ($fetch_member = mysqli_fetch_assoc($member_result)) {
if ($count_rows==$i) {
$memberstring.=$fetch_member["MemberName"];
} else {
$memberstring.=$fetch_member["MemberName"].",";
$i++;
}
}
// This is the option with the color and with the value as members
echo "<option value=\"$memberstring\">".$color."</option>";
}
?>
</select>
<select id="members">
// In here the options will show up
</select>
JAVASCRIPT CODE
So this is a pretty much simplified version of the javascript. Meaning, it just runs on every change of the color option. If you want to have a "clear" option you will have to 1. insert it into the select (also add a special value) 2. write an if in the javascript function, to check if the option is clear.
function setOptions(val) {
val = val.split(","); // val is now an array with all the members of the color
document.getElementById('members').innerHTML = ""; // This clears all "old" members of the select
var select = document.getElementById("members");
for (var i = 0; i < val.length; i++) { // Now for each Member in the array a new Option is created
var option = document.createElement("option");
option.text = val[i];
select.add(option);
}
}
More links:
javascript add option,
removing all options
If you have any questions, feel free to ask me in the comment section.
I have the following HTML code that allows me to select two items from select dropdown options;
Now, after selecting the two items, say, I select accommodation as my form and Kampala as my district, I want the total number of available possible results, for example, "25 results were found", to be automatically displayed.
The problem I have is that only the results for one selection are displayed with the other being shown as undefined notice. Any assistance please.
<!-- here is the html script for selecting options -->
<form id="analysis_formId" method="POST">
<label>select form</label>
<select id="selectformId" name="selectform" class="select_elements">
<option value="afc">accommodation form</option>
<option value="rtt">tour and travel form</option>
</select>
<label>select district</label>
<select id="selectdistrictsId" name="selectdistricts" class="select_elements">
<option value="alldistricts">All districts</option>
<option value="kampala">kampala</option>
<option value="wakiso">wakiso</option>
</select>
</form>
<!-- displaying results from count.php -->
<p><span id="inspection_result"></span></p>
This the script that gets the class names of the select elements and runs the onChange event.
<script>
var selections = document.getElementsByClassName("select_elements");
function onchangefunction(){
var selectedstring = (this.options[this.selectedIndex].value);
$("#inspection_result").html('checking...');
$.ajax({
type:'POST',
url:'count.php',
data:$(this).serialize(),
success:function(data)
{
$("#inspection_result").html(data);
}
});
}
for (var i = 0, l = selections.length; i < l; i++) {
selections[i].onchange = onchangefunction;
}
</script>
Here is count.php for querying the results from MySQL
if($_POST)
{
$formtype = strip_tags($_POST['selectform']);
$selectdistricts = strip_tags($_POST['selectdistricts']);
$fetchallforms22 = $conn->prepare("select count(indexId) as numafcrtt2
from registered_companies where company_form_type=:formtype and company_district=:selectdistricts");
$fetchallforms22->execute(array(':formtype'=>$formtype, ':selectdistricts'=>$selectdistricts));
$display22 = $fetchallforms22->fetchObject();
if($display22){
echo $display22->numafcrtt2." "."results available";
}
else
{
echo $display22->numafcrtt2." "."results available";
}
}//POST
Maybe no results for this query, chech it:
if (!empty(display2) ){
..... // DO something
}