Not Getting Updated Selected Value from a Dynamically made DropDown - javascript

I'm not getting value from a City-list DropDown which is Dynamically made. I'm first making required data Jason using AJAX in a Script and then sending it to another page to create Dynamic DropDown. In this City-list is my dynamic made dropdown which depends on the selection of Provincedown Dropdown but the problem comes when I select any option from City-list dropdown which is Dynamically build using ajax than its very first value comes as a selection no matter what option you have selected. Any Suggestions.Here is my Code of provincedown and City-list Dropdown.
<input type="hidden" name="City_Name" value="<?= $City_Name; ?>" >
<input type="hidden" name="Province_Name" value="<?= $ProvinceName ?>" >
<label>Province: </label><br>
<select name="Provincedown" id="ProvinceDropDown" class="form-control" onChange="getState(this.value);">
<option value="SelectProvince" <?=$ProvinceName == 'SelectProvince' ? ' selected="selected"' : '';?> > Please Select </option>
<option value="Sindh" <?=$ProvinceName == 'Sindh' ? ' selected="selected"' : '';?>> Sindh </option>
</select>
<label>City:</label><br/>
<select name="City-list" id="City-list" >
<option value="SelectCity" >Select City</option>
</select>
making data jason using AJAX whom code is
<body onload="getState()">
<script>
function getState(val) {
//var cityName = $City_Name;
var City_Name = $("input[name='City_Name']").val();
var Province_id = $("input[name='Province_Name']").val();
$.ajax({
type: "POST",
url: "fetch_state_Edit.php",
data:{country_id : val, City_Name : City_Name,Province_id : Province_id},
success: function(data){
$("#City-list").html(data);
}
});
}
</script>
fetch_state_Edit.php
<?php
if(!empty($_POST["Province_id"])) {
$country_id =$_POST['country_id'];
if($country_id=="SelectProvince" || $country_id=="")
$country_id=$_POST['Province_id'];
$City_Name=$_POST['City_Name'];
$results = mysqli_query($con, "SELECT City_Name FROM location WHERE Province = '$country_id' ");
?>
<option value="SelectCity">Select City</option>
<?php
foreach($results as $state) {
?>
<option value="<?php $state["City_Name"]; ?>" <?=$state["City_Name"] == $City_Name ? ' selected="selected"' : '';?>><?php echo $state["City_Name"];</option>
<?php
}
}
?>

Problem is in fetch_state_Edit.php file Just put echo before $state["City_Name"];
<?php
if(!empty($_POST["Province_id"])) {
$country_id =$_POST['country_id'];
if($country_id=="SelectProvince" || $country_id=="")
$country_id=$_POST['Province_id'];
$City_Name=$_POST['City_Name'];
$results = mysqli_query($con, "SELECT City_Name FROM location WHERE Province = '$country_id' ");
?>
<option value="SelectCity">Select City</option>
<?php
foreach($results as $state) {
?>
<option value="<?php echo $state["City_Name"]; ?>" <?=$state["City_Name"] == $City_Name ? ' selected="selected"' : '';?>><?php echo $state["City_Name"]; </option>
<?php
}
}
?>

Related

How to hide select options when there is no data

I'm building a drop-down list with options containing data from a database and want to hide options which have zero data.
I have tried an if statement using continue but failing to catch the live data values from the database.
<select name='Database' title="Choose from database">
<option value="">All</option>
<?php foreach($database as $row):
if ($row['topic'] == 0) {
continue;
}
else {
?>
<option value="<?= $row['topic']; ?>"
<?php if ($row['topic'] == $_SESSION['prosess']){echo "
selected";}?>>
<?= $row['topic']; ?>
<?php }?>
</option>
<?php endforeach; ?>
</select>
Is there any clever javascript-, php-, etc. code that can deactivate/hide options from a database which are empty.
Add this in your css:
select option:empty {
display:none
}
I think you should try this.
<select name='Database' title="Choose from database">
<option value="">All</option>
<?php
if(count($database) > 0)
{
foreach($database as $row)
{
?>
<option value="<?= $row['topic']; ?>"
<?php if ($row['topic'] == $_SESSION['prosess']){echo "
selected";}?>>
<?= $row['topic']; ?>
<?php }?>
</option>
<?php
}
}
?>
</select>
Hope it helpful for you.

how to avoid repetition of values in dropdown list while updating in php

I want to update "profile of a user" in php. There is a repetition of one value for two times in dropdown list. for example i take language value='Punjabi' from database but there is also a value placed in dropdown with name of 'Punjabi'.
The issue is simply that there is a repetition of value which i don't want.
<?php $result=mysqli_query($conn, "select * from profile where id=$firstPerson");
while($queryArray=mysqli_fetch_array($result)){ ?>
<select name="language" id="language" >
<option value='<?php echo $queryArray["language"];?> '> <?php echo $queryArray["language"]; ?></option>
//for example, the value from database is "Punjabi"
<option value="Hindi">Hindi</option>
<option value="Punjabi">Punjabi</option>
<option value="Urdu">Urdu</option>
</select>
<?php } ?>
when a value='Punjabi' from database is selected in dropdown list, the dropdown should not show the value='Punjabi' that is already placed in dropdown.
Remember: i have more than 1000 values in my dropdown(html) list.
screenshot
Instead of creating a new option according to the user data, Check if existing options are equal to user data:
<select name="language" id="language" >
<option value="Punjabi" <?php if ($queryArray["language"]=="Punjabi"){echo 'selected="selected"'} ?>>Punjabi</option>
<option value="Hindi" <?php if ($queryArray["language"]=="Hindi"){echo 'selected="selected"'} ?>>Hindi</option>
<option value="Urdu" <?php if ($queryArray["language"]=="Urdu"){echo 'selected="selected"'} ?>>Urdu</option>
</select>
If there are large number of options and you don't want to hard code these conditions, you can remove the second option using javascript on DOM ready:
$(document).ready(function(){
$('option[value="<?php echo $queryArray["language"] ?>"]').eq(1).remove();
})
skip the loop when value is equal to Punjabi, Urdu and Hindi.
<?php $result=mysqli_query($conn, "select * from profile where id=$firstPerson");
while($queryArray=mysqli_fetch_array($result)){ ?>
<select name="language" id="language" >
<?php if($queryArray["language"]!="Punjabi" && $queryArray["language"]!="Urdu" &&
$queryArray["language"]!="Hindi") { ?>
<option value="Hindi">Hindi</option>
<option value="Punjabi">Punjabi</option>
<option value="Urdu">Urdu</option>
<?php } ?>
I think you are doing it wrong way the correct way would be having a table which stored all the languages along with values
using selected attribute to achieve your objective
<?php
$result=mysqli_query($conn, "select * from profile where id=$firstPerson");
$queryArray1=mysqli_fetch_array($result);
$langOfUser=$queryArray1["language"];
?>
<select name="language" id="language" >
<?php $result=mysqli_query($conn, "select * from langtab");
while($queryArray=mysqli_fetch_array($result)){ ?>
<option value='<?php echo $queryArray["languageValue"];?> ' <?php if($langOfUser== $queryArray["languageValue"]){ echo 'selected';}?>> <?php echo $queryArray["languageName"]; ?></option>
<?php } ?>
</select>
You have to use if condition to display values in select option.
<select name="language" id="language" >
<?php $result=mysqli_query($conn, "select * from profile where id=$firstPerson");
while($queryArray=mysqli_fetch_array($result)){
if($queryArray["language"]!="Punjabi") {
$opval = "<option value=" . $queryArray["language"] . ">". $queryArray["language"]. " </option> "
echo $opval;
}
?>
<option value="Punjabi">Punjabi</option>
<option value="Hindi">Hindi</option>
<option value="Urdu">Urdu</option>
</select>
So your problem is that you have html hardcoded options and database options. You need to merge them into one on that website.
So you can use some javascript
elements = [1, 2, 9, 15].join(',')
$.post('post.php', {elements: elements})
But you can fill your elements like this is you don´t want to write it by hand
$("#id select").each(function()
{
allOptionsInSelect.push($(this).val());
});
Than on php side you can do
$elements = $_POST['elements'];
$elements = explode(',', $elements);
And now you have html hardcoded select on server side. Now you need to check if it doesn´t already exist when you are printing from database
You can do that like this
if(in_array(value_from_database, $elements) {
// It is so skip
} else {
// It is not, so print it
}
You can use if elseif this way.
<select name="language" id="language" >
<option value='<?php echo $queryArray["language"];?>'><?php echo $queryArray["language"]; ?></option>
<?php if ($queryArray["language"] == "Hindi") { ?>
<option value="Punjabi">Punjabi</option>
<option value="Urdu">Urdu</option>
<?php } elseif ($queryArray["language"] == "Urdu") { ?>
<option value="Punjabi">Punjabi</option>
<option value="Hindi">Hindi</option>
<?php } elseif ($queryArray["language"] == "Punjabi") { ?>
<option value="Urdu">Urdu</option>
<option value="Hindi">Hindi</option>
<?php } ?>

how can i create 2 dynamic dropdown from one table in database?

Can someone help me on how to link up 2 dropdown list which data came from the same table in the database, is it possible to do this way because I can only find a solution which there must be 2 table in the database to link up those two. this is how should it work, 1st, the user choose the department and the 2nd dropdown will show only the people that assigned from that particular department.
database table has id,name,department.
the department works already but the 2nd dropdown didnt work to filter from the department. Can someone help me to know what is wrong with this?
index.php
<?php
$query ="SELECT DISTINCT company from hrar";
$results = $db_handle->runQuery($query);
?>
<script>
function getName(val) {
$.ajax({
type: "POST",
url: "getName.php",
data:'department='+val,
success: function(data){
$("#nameList").html(data);
}
});
}
function selectDepartment(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
<label>Department:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getName(this.value);">
<option value="">Select Department</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["id"]; ?>"><?php echo $country["company"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>Name:</label><br/>
<select name="state" id="nameList" class="demoInputBox">
<option value="">Select Name</option>
</select>
//below is the getName.php
if(!empty($_POST["company"])) {
$query ="SELECT DISTINCT name from hrar = '" . $_POST["company"] . "'";
$results = $db_handle->runQuery($query);
?>
<option value="">Select Name</option>
<?php
foreach($results as $name) {
?>
<option value="<?php echo $name["id"]; ?>"><?php echo $name["name"]; ?></option>
<?php
}
}
?>
Try this.
<select name="filter" id="filter" onchange="this.form.submit();">
<option value="name">Select Name</option>
<?php
$sql = "SELECT DISTINCT name FROM hr";
$result = mysqli_query($conn,$sql);
while ($row = mysqli_fetch_array($result))
{
echo "<option value='". $row['name'] ."'>" .$row['name'] ."</option>";
}
?>
</select>

Populate Dropdown based on another Dropdown Using Ajax, jQuery and Codeigniter on Update

I have created a dropdown that populates another dropdown.
I have created a modal for update in my application and I want the selected value of the dropdown to be the name taken from the database. It shows the name, but the problem is it doesnt show the other names which should be included.
(Note that the names show up depending on the first dropdown)
Here is my Model
function get_agents($campaign_id)
{
$campaign_id1 = mysqli_real_escape_string($this->db->conn_id,trim($campaign_id));
$query = $this->db->query("SELECT tbl_employee.emp_id, CONCAT(tbl_applicant.fname, ' ', tbl_applicant.lname) AS fullname FROM tbl_applicant INNER JOIN tbl_employee ON tbl_employee.apid=tbl_applicant.apid INNER JOIN tbl_account ON tbl_employee.acc_id=tbl_account.acc_id WHERE tbl_account.acc_id='".$campaign_id1."' ORDER BY tbl_applicant.fname ASC");
return $query->result();
}
Here is my Controller
public function getAgents()
{
$campaign_id = $this->input->post('campaign_id');
$data = $this->KudosModel->get_agents($campaign_id);
echo "<option value=''>-- Select Ambassador Name --</option>";
foreach($data as $a)
{
echo "<option value='".$a->emp_id."'>".$a->fullname."</option>";
}
}
Here is my View
<div class="form-group" style="height: auto; overflow: auto;">
<label class="col-sm-3 control-label float-left">Ambassador Name</label>
<div class="col-sm-9">
<select class="form-control" id="agentNames<?php echo $val->kudos_id; ?>" required="true" data-trigger="change" value="<?php echo $val->ambassador; ?>">
<option selected="" value="">-- Select Ambassador Name --</option>
<option selected="selected" value=""><?php echo $val->ambassador;?></option>
<?php
foreach($name2 as $row)
{
if($val->campaign==$row->acc_name)
echo '<'; if($val->ambassador==$row->fullname){
echo 'selected=selected';
}echo'option value="'.$row->emp_id.'">'.$row->fullname.'</option>';
}
?>
</select>
</div>
Here is my JQuery
$('#addCampaign<?php echo $val->kudos_id; ?>').on('change', function(){
$.ajax({
type : 'POST',
data : 'campaign_id='+ $('#addCampaign<?php echo $val->kudos_id; ?>').val(),
url : "<?php echo base_url(); ?>index.php/Kudos/getAgents/",
success : function(data){
//data returns your name, iterate through it and add the name to another select
$('#agentNames<?php echo $val->kudos_id; ?>').html(data);
}
});
});

Two dropdown with one onchange

Hi what I'm trying to do is I have 2 dropdown. I want that the ajax will only work if the two dropdown has value selected. And how do I pass the datas of the two?
Here is my code right now
SCRIPT
<script>
function getState(val) {
$.ajax({
type: "POST",
url: "get_state.php",
data:'country_id='+val,
success: function(data){
$("#state-list").val(data);
}
});
}
</script>
INDEX
<label>Group:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Group</option>
<?php
while($row = mysql_fetch_array($results)) {
?>
<option value="<?php echo $row["g_id"]; ?>"><?php echo $row["g_name"]; ?> </option>
<?php
}
?>
</select>
<label>Division:</label><br/>
<select name="division" id="div-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Division</option>
<?php
while($row = mysql_fetch_array($results2)) {
?>
<option value="<?php echo $row["d_id"]; ?>"><?php echo $row["div_name"]; ?> </option>
<?php
}
?>
</select>
getstate.php
<?php
include("dbcon2.php");
if(!empty($_POST["country_id"])) {
$query ="SELECT * FROM personnel_gdd WHERE pg_group = '" . $_POST["country_id"] . "' ";
$results = mysql_query($query) or die(mysql_error());
?>
<?php
$row = mysql_num_rows($results)
?>
<?php echo $row; ?>
PS: I know that mysql is deprecated. I'll change it as soon as this problem is fixed. Thanks!
change
onchange="getState()"
donot pass any value in onchange event. And change your script like this
<script>
function getState(val) {
var country = $("#country-list").val();
var div = $("#div-list").val();
if(country && div) {
$.ajax({
type: "POST",
url: "get_state.php",
data:{"country_id": country,"div":div},
success: function(data){
$("#state-list").val(data);
}
});
}
}
</script>
This answer is generic, not related to your data but you will can understand how to figure it out.
$('select').change(function() {
var group = $('#country-list').val();
var div = $('#div-list').val();
if (group == -1 || div == -1) {
alert('please select country and division');
}
else {
$.ajax({
type: "POST",
url: "get_state.php",
data:'country_id=' + country + '&=div_id' + div,
success: function(data){
$("#state-list").val(data);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Group:</label>
<select name="country" id="country-list" class="demoInputBox">
<option value="-1">Select Group</option>
<option value="1">Country 1</option>
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
</select>
<br />
<label>Division:</label>
<select name="division" id="div-list" class="demoInputBox">
<option value="-1">Select Division</option>
<option value="1">Division 1</option>
<option value="2">Division 2</option>
<option value="3">Division 3</option>
</select>
Than you get the 2 values in the server and return the data to the client. Than put this data into the third dropdown.
HTML
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Country</option>
<?php
$selq = "your query..............";
$selm = mysql_query($selq);
while($row = mysql_fetch_array($selm))
{
?>
<option value="<?php echo $row["country_id"]; ?>"><?php echo $row["name"]; ?> </option>
<?php
}
?>
</select>
<select name="state" id="state-list" >
</select>
Javascript function
function getState(val) {
$.ajax({
type: "POST",
url: "test2.php",
data:'country_id='+val,
success: function(data){
$("#state-list").append('<option value=""></option>');
$('#state-list').html(data);
}
});
}
Ajax PHP file
if(!empty($_POST["country_id"]))
{
$query ="your query............... ";
$results = mysql_query($query) or die(mysql_error());
while($fetch = mysql_fetch_array($results))
{
?>
<option value="<?php echo $fetch['id']?>" ><?php echo $fetch['name'] ?></option>
<?php
}
}
You only need to check if all values are different from -1 or "" or whatever - then build the data object and fire the Ajax:
JSnippet Demo
function runAjax() {
//Check both:
check = true;
$('select').each(function(){
console.log($(this).val())
if ($(this).val() == -1) {
$('span').text("Please select both.");
check = false
}
});
if (!check) return;
$('span').text("OK. submiting");
//Get the data:
var data = {
select1: $('#sel1').val(),
select2: $('#sel2').val()
};
//Go on with ajax....
}

Categories

Resources