onchange function when selecting drop down menu will populate a textbox - javascript

this is my table in the database
tbl_job_title
ID | Job_title | description |
1 | Accountant | Handle Accounts |
2 | Dev. Support | Support Centre |
when selecting the job title from the table, i'm using a drop down menu and here is my code.
<select id="job_title" >
<option value=""> </option>
<?php foreach ($job_title as $row): ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['title']; ?>
</option>
<?php endforeach?>
</select>
and I have a textbox that will populate if i select a job_title
<input type="text" id="catch_value">
How do I populate the textbox when I select example is "Accountant", the textbox value must be "Handle Accounts".

Here is the short & sweet code I have made just for you, feel free to use it!
Not required Ajax...
CODE -
<select id="job_title" >
<option value="" class="job" role=""> </option>
<?php foreach ($job_title as $row): ?>
<option value="<?php echo $row['id']; ?>" class="job<?php echo $row['id']; ?>" role="<?php echo $row['description']; ?>"><?php echo $row['title']; ?>
</option>
<?php endforeach?>
</select>
Jquery -
$('#job_title').on('change',function(){
var m = this.value;
var n = $('.job'+m).attr('role');
$('#catch_value').val(n);
return false;
});
eg - fiddle

<select id="job_title" onchange="javascript:callajaxvalue(this.value);">
<option value=""> </option>
<?php foreach ($job_title as $row): ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['title']; ?>
</option>
<?php endforeach?>
</select>
<script>
function callajaxvalue(id)
{
$.ajax({
type: "POST",
url: "some.php",
data: { id: id}
success: function(data, textStatus ){
if(data)
{ $("#catch_value").val(data);}
},
})
}
</script>
some.php
$_POST['id'];
$query = "get data from table";
execute query.
echo $row['description'];
For codeigniter
function callajaxvalue(id)
{
$.ajax({
type: "POST",
url: "my_controller/update/"+id,
data: { id: id}
success: function(data, textStatus ){
if(data)
{ $("#catch_value").val(data);}
},
})
}
my_Controller.php
public function update()
{
$id = $this->input->post('id');
$data['discription'] = call model function for get data form database
echo json_encode($data);
}

$('#job_title').change(function(){
$('#catch_value').val('Handle Accounts');
});
see fiddle:fiddle
or you can add if statments
$('#job_title').change(function(){
var jt = $('#job_title').val();
if(jt == "Something")
{
$('#catch_value').val('Handle Accounts');
}
if (jt == "SomethingElse")
{
$('#catch_value').val('somethingelse');
}
});

This is the right answer :
<select id="job_title" onchange='populate()'>
<option value=""> </option>
<?php foreach ($job_title as $row): ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['title']; ?>
</option>
<?php endforeach?>
</select>
<script>
function populate(){
var jobttl= document.getElementById('job_title').value();
if(jobttl){
document.getElementById('catch_value').value;
}
}
</script>

Related

how to Load Dependent Dropdown on Multi-Select in laravel

I want to load dependent dropdwon on multiselect in laravel.how can i load ?now i have sigle select to load dropdown .below is my code i want to load dependent dropdwon on multiselect in laravel.how can i load ?now i have sigle select to load dropdown .below is my code
<select class="form-control" id="region_country_id" name="region_country_id" >
<?php foreach ($countries as $key => $value) { ?>
<option value="<?php echo $value->id; ?>"<?php if($product->region_country_id == $value->id){ echo "selected";} ?>>
<?php echo $value->name;?>
</option>
<?php } ?>
</select>
<select class="form-control" id="region_id" name="region_id" style="margin-top: 10px;" >
<?php if(Session::get('branch_access') != 1)
{?>
<option value="">All region</option>
<?php } ?>
<?php foreach ($regions as $key => $value) { ?>
<option value="<?php echo $value->id; ?>" <?php if($value->id == $product->region_id) { echo "selected";} ?>><?php echo $value->region; ?>
</option>
<?php } ?>
</select>
below is script for above
$('body').on('change', '#region_country_id', function() {
loadOptionRegion($(this).val());
});
function loadOptionRegion(countryID) {
$.ajax({
method: "POST",
url: "/region/country",
dataType: 'json',
data: {
'country_id': countryID
},
beforeSend: function() {},
success: function(data) {
console.log(data.data.region);
var regionList = data.data.region;
var str = '<option value="0">All Region</option>';
$.each(regionList, function(index, value) {
str = str + "<option value='" + value.id + "'>" + value.region + "</option>";
console.log(str);
});
$("#region_id").html(str);
}
})
}
Very first add the multiple in the select box
<select class="form-control" id="region_country_id" name="region_country_id" multiple>
Now in your controller change the query from where to whereIn country ID
From:
->where('country_id',$countryId);
To:
->whereIn('country_id',$arrOfCountryID);

Populate a text box using a selected value in a dependent dropdown

I have this two tables in my database
1 - tbl_category
2 - tbl_shelf_place
(I want to achieve this kind of output where the selected category_name from the drop-down (book_category) with a value of category_id will show the shelf_code in a textbox instead of a DROPDOWN, based on the equivalent shelf_id).
-------------------------- -------------------------
tlb_category tbl_shelf_place
--------------------------- -------------------------
category_id | category_name shelf_id| shelf_code
--------------------------- -------------------------
1 | General Works 1 | General Works Shelf
2 | History 2 | History Shelf
Below is my current code for the dependent dropdown.
My dropdown code in HTML
<select id="book_category" name="book_category" class="selectpicker" data-style="btn btn-danger" onChange="getState(this.value);" required>
<option disabled selected value=""> Choose Category
</option>
<?php
$query = "SELECT category_id , category_name FROM tbl_category";
$stmt = $mysqlconnection->prepare($query);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($category_id , $category_name);
while($stmt->fetch())
{
$getcategoryID = $category_id;
$getcategoryname = $category_name;
echo "<option value='{$getcategoryID}'>{$getcategoryname}</option>";
}
?>
</select>
<select id="book_shelf" name="book_shelf" class="selectpicker" data-style="btn btn-danger" required>
<option disabled selected value="">
</option>
</select>
My script code
<script>
function getState(val) {
$.ajax({
type: "POST",
url: "dropdownrequest.php",
data:'category_id='+val,
success: function(data){
$("#book_shelf").html(data);
}
});
}
</script>
dropdownrequest.php
<?php
include_once ("../database/dbconnect.php");
if(!empty($_POST["category_id"])) {
$query ="SELECT * FROM tbl_shelf_place WHERE shelf_id = '" . $_POST["category_id"] . "'";
$results = $mysqlconnection->query($query);
?>
<?php
foreach($results as $shelf) {
?>
<option value="<?php echo $shelf["shelf_id"]; ?>"><?php echo $shelf["shelf_code"]; ?></option>
<?php
}
}
?>
You can use this code.
<select id="book_category" name="book_category" class="selectpicker" data-style="btn btn-danger" onChange="getState(this.value);" required>
<option disabled selected value=""> Choose Category
</option>
<?php
$query = "SELECT category_id , category_name FROM tbl_category";
$stmt = $mysqlconnection->prepare($query);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($category_id , $category_name);
while($stmt->fetch())
{
$getcategoryID = $category_id;
$getcategoryname = $category_name;
echo "<option value='{$getcategoryID}'>{$getcategoryname}</option>";
}
?>
</select>
<textarea id="book_shelf" name="book_shelf"></textarea>
In your JS.
<script>
function getState(val) {
$.ajax({
type: "POST",
url: "dropdownrequest.php",
data:'category_id='+val,
success: function(data){
$("#book_shelf").val(data);
}
});
}
</script>
In you PHP code.
<?php
include_once ("../database/dbconnect.php");
if(!empty($_POST["category_id"])) {
$query ="SELECT * FROM tbl_shelf_place WHERE shelf_id = '" . $_POST["category_id"] . "'";
$results = $mysqlconnection->query($query);
$shelf_text = '';
foreach($results as $shelf) {
$shelf_text .= $shelf["shelf_id"]." - ".$shelf["shelf_code"];
}
echo $shelf_text;
exit;
}
?>
Hope this will give you and Idea. I haven't tested this code so please pardon if there is any syntax error. Also tweak the code in PHP file so you can show the shelf_code and shelf_id as per your requirements.
You can do it like this, one way to achieve this
PHP
<?php
include_once ("../database/dbconnect.php");
if(!empty($_POST["category_id"])) {
$query ="SELECT * FROM tbl_shelf_place WHERE shelf_id = '" .
$_POST["category_id"] . "'";
$results = $mysqlconnection->query($query);
foreach($results as $shelf){
echo $shelf["shelf_code"];
}
}
?>
No need to return option now. Just read the data returned and add it to your textbox element in HTML
HTML
<select id="book_category" name="book_category" class="selectpicker" data-
style="btn btn-danger" onChange="getState(this.value);" required>
<option disabled selected value=""> Choose Category</option>
<?php
$query = "SELECT category_id , category_name FROM tbl_category";
$stmt = $mysqlconnection->prepare($query);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($category_id , $category_name);
while($stmt->fetch())
{
$getcategoryID = $category_id;
$getcategoryname = $category_name;
echo "<option value='{$getcategoryID}'>{$getcategoryname}
</option>";
}
?>
</select>
// Add HTML Textbox here
<input type="text" id="book_shelf">
Rest of the code should be same.

Content changeable Dropdownlist from database data

Am loading my user records from database to the table, Am using:
foreach ($userArray as $key => $value) {
I have isAdmin row which contains 'Y', 'N' data.I need to make dropdownlist from this row.If data in Db is 'Y' other dropdownlist option should be 'N' and v/v.
Am using <select id="<?php echo $userArray[$key]["isAdmin"]?>">
I tried something like that, but if my data is Y it gives two more options , Y and N, it should be N, how to repair that?Here is my code:
<select id="<?php echo $userArray[$key]["isAdmin"]?>">
<option value="<?php echo $userArray[$key]["isAdmin"]?>">
<?php echo $userArray[$key]["isAdmin"];
if (strcmp($userArray[$key]["isAdmin"],"Y")==0){
?></option>
<option value="N">N</option>
<option value="Y" style="display:none;">Y</option>
<?php
}
else
?>
<option value="Y">Y</option>
<option value="N" style="display:none;">N</option>
</select>
I found a solution, here is my code:
<option value="<?php echo $userArray[$key]["isAdmin"]?>">
<?php echo $userArray[$key]["isAdmin"];
if (strcmp($userArray[$key]["isAdmin"],"Y")==0){
?></option>
<option value="N">N</option>
<?php
}
if (strcmp($userArray[$key]["isAdmin"],"N")==0){
?>
<option value="Y">Y</option>
<?php
}
?>
</select>
Create a if condition in your nav bar checking isAdmin and then echo the other dropdownlist.
if($isadmin == "Y"){
echo '?>
//Put Html code here for admin
<?php ';
}else{
echo'?>
//Put Html code here for non admin
<?php';
}

javascript and ajax to update the second drop dowm and the function undefined error

This is my php file
<select name="scity" id="city_id" class="myinput" required onChange="getMalls()">
<option value="<?php echo $_POST['scity'] ;?>"><?php echo $_POST['scity'] ;? ></option>
<option value="">Please Select</option>
<?php
include 'include/allcity.php';
?>
</select>
<select name="mallname" required class="myinput" id="malls-list">
<option value="">Please Select</option>
</select>
<script>
function getMalls() {
document.getElementById("city_id").value;
alert(hi);
$.ajax({
type: "POST",
url: "include/allmall.php";
data:'city_id='+x,
success: function(data){
$("#malls-list").html(data);
}});
}
</script>
<?php
alert(hi);
include 'mydb.php';
if(!$con) {
echo 'Could not connect to the database.';
} else {
if(!empty($_POST['scity'])) {
$queryString = $con->real_escape_string($_POST['scity']);
if(strlen($queryString) > 0) {
$querys = $con->query("SELECT mallname FROM mallname WHERE cityname = '%$queryString%' order by mallname");
if($querys) {
while ($results = $querys -> fetch_object()) {
<option value="<?php echo ($results -> $results["id"]; ?>"><?php echo ($results -> $results["mallname"]; ?></option>
}
} else {
echo 'OOPS we had a problem :(';
}
} else {
// do nothing
}
} else {
echo 'There should be no direct access to this script!';
}
}
?>
There is another php file after the script tag where it is referring to.
First of all I am getting an error that function is not defined. Actually this is for activating second dropdown on the value of first dropdown. Please help me. Thanks in advance.

How to assign value returned by a function into a variable?

I need to determine the sceen width using media query then properly display the results retreived from database. For now results are shown using a function this way. This function actually to display dropdown list for a particular menu.
<?php Core::getHook('block-branches'); ?>
So tried something as below to display content according to screen width:
<?php
if (isset($_GET['width'])) {
$width = $_GET['width'];
if ($width <= 480) { //mobile devices
$list = Core::getHook('home-menu-mobile'); **//assigning function value into a variable**
} elseif ($width <= 720){ //tablets
$list = Core::getHook('home-menu-mobile'); **//assigning function value into a variable**
} else { //desktops
$list = Core::getHook('block-branches'); **//assigning function value into a variable**
}
}
?>
HTML
<select id="myselect">
<option>Go To ...</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/">Home</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/page/about-us">About Us ▾</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/page/the-centre-point-of-any-web-projects">Centre-Point of Web Projects</option>
<option>Branches ▾
<?php echo $list;?>**(display according to screen width)**
</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/news">News</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/event">Events</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/contact">Contact Us</option>
</select>
<script>
//$('#myselect').on('change', function() {
//location.href=$(this).data('url');
//});
document.getElementById("myselect").onchange = function(d){
window.location = this.value;
};
</script>
I think the function getHook('block-branches') is returning an array not a value so you must loop the $list and display the value like this
<option>Branches ▾
<?php foreach($list as $value){
echo $value;
}?>**(display according to screen width)**
</option>

Categories