We Keep Coding

Type feature is not available in select dropdown

I have a select dropdown with search option that displays dynamic data,its working fine,but i need to add one more feature like if the user types anything and it is not available in the option then he should be allowed to simply type and provide an input. it should not be like this that if the user's desired value is not in dropdown then he is not able to type also
The link that i am following for dropdown is this
Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" />
<select name="ddlCountry" id="Select1" class="selectpicker" data-live-search-style="begins" data-live-search="true">
<?php foreach($location as $loc): ?>
<option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?></option>
<?php endforeach; ?>
</select>
Can anyone please give me any suggestions,
Thanks in advance.

You can use the html5 datalist feature to achieve this functionality,
<input name="ddlCountry" id="Select1" class="selectpicker" data-live-search-style="begins" data-live-search="true" >
<datalist id="Select1">
<?php foreach($location as $loc): ?>
<option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?></option>
<?php endforeach; ?>
</datalist>

The solution requires you to capture the input as the user is typing, the other issue with the above solution, it is tricky to use select and options, instead, use input type text as in the below code.
The below code needs a bit of tweaking.
Html and PHP
<input list="select1" name="ddlCountry" class="selectpicker" data-live-search-style="begins" data-live-search="true" /><
<datalist id="select1">
<?php foreach($location as $loc): ?>
<option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?>
<?php endforeach; ?>
</datalist>
Every time the user enters the data, we need a way to capture the new entry
AJAX and Javascript
$(document).ready(function() {
$(document).on('keyup', 'input[name="ddlCountry"]', function() {
alert($('input[name="ddlCountry"]').val());
$.ajax({
url: "{PHP url}",
method: "GET",
data: {
search: $('#Select1 option:selected').val()
},
})
.done(function(data) {
//assuming the data is returned as an array
var tmp_variable = '';
data.foreach(function(item) {
tmp_variable = tmp_variable + '<option value="' + item + '">';
})
$('#select1').html(tmp_variable);
});
});
})

Dependent Dropdown is not loading on selection of first dropdown

I have two dropdown. I am using Jquery to load second dropdown. without jqyery My php code is working fine. but when I use with jquery second dropdown becomes empty on selection of first drop down.
First Dropdown ( Education )
$sqleducation = "select * from education order by education_id asc ";
$reseducation = mysqli_query($conn,$sqleducation);
<select name="education" id="education">
<option value="-1">Please Select</option>
<?php while($roweducation=mysqli_fetch_array($reseducation)){ ?>
<option value="<?php echo $roweducation['education_id']?>">
<?php echo $roweducation['education_name']?>
</option>
<?php }?>
</select>
Second Drop Down ( Degree)
<select name="degree" id="degree" >
<option value="-1">Please Select</option>
<?php if(isset($_POST["education_id"]) && !empty($_POST["education_id"])){
$sqldegree = "SELECT * FROM degree WHERE education_id = ".$_POST['education_id']." ";
$resdegree = mysqli_query($conn,$sqldegree);
while($rowdegree=mysqli_fetch_array($resdegree))
{ ?>
<option value="<?php echo $rowdegree['degree_id']?>">
<?php echo $rowdegree['degree_name']?>
</option>
<?php } }?>
</select>
Second dropdown is using juery to load on selection of first dropdown Education.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#education').on('change',function(){
var educationID = $(this).val();
if(educationID){
$.ajax({
type:'POST',
url:'education-career.php',
data:'education_id='+educationID,
success:function(html){
$('#degree').html(html);
}
});
}else{
$('#degree').html('<option value="">Select Education first</option>');
}
});});</script>

Try change below line
data:'education_id='+educationID,
to
data:{education_id : educationID},

Try this.(second select tag have to place in first page in order to use $('#degree').html(...))
First Dropdown
$sqleducation = "select * from education order by education_id asc ";
$reseducation = mysqli_query($conn,$sqleducation);
<select name="education" id="education">
<option value="-1">Please Select</option>
<?php while($roweducation=mysqli_fetch_array($reseducation)){ ?>
<option value="<?php echo $roweducation['education_id']?>">
<?php echo $roweducation['education_name']?>
</option>
<?php }?>
</select>
<select name="degree" id="degree" >
<option value="-1">Please Select</option>
</select>
Second Dropdown
<option value="-1">Please Select</option>
<?php if(isset($_POST["education_id"]) && !empty($_POST["education_id"])){
$sqldegree = "SELECT * FROM degree WHERE education_id = ".$_POST['education_id']." ";
$resdegree = mysqli_query($conn,$sqldegree);
while($rowdegree=mysqli_fetch_array($resdegree))
{ ?>
<option value="<?php echo $rowdegree['degree_id']?>">
<?php echo $rowdegree['degree_name']?>
</option>
<?php } }?>

Here in ajax, you are using the
data:'education_id='+educationID,
Which is used to post the data. and the variable name will be here education_id.
And in your second page you are trying to get:
isset($_POST["education"])
this only. So on second page you have to replace education with education_id.

change:
$('#education').on('change',function(){
To:
$('select#education').change(function(){

Hide parent div if text string length is more than 3 characters in a php while loop

I have a php loop that outputs a box with a form in it. At the moment if you click on the button or change one of the select boxes then the top layer is hidden and it shows another layer with a rest button on it. I want it to automatically hide the top layer if the 'todo' div has a text string longer than 3. I have tried to program this using similar programming to when the buttons are clicked/options selected. Can anybody see what is wrong with my programming? Below is the code I have used for todo.
<script>
$(document).ready(function() {
if ($(".todo").text().length > 3) {
$(this).parentsUntil(".submitted").addClass("hidediv");
$(this).parentsUntil(".submitted").removeClass("showdiv");
}
});
</script>
Here is the full code
<!DOCTYPE html>
<html>
<head>
<?php include 'dbconnection.php'; ?>
<link href="hidphptest.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".cars").change(function(){
$(this).parentsUntil(".submitted").addClass("hidediv");
$(this).parentsUntil(".submitted").removeClass("showdiv");
});
});
</script>
<script>
$(document).ready(function(){
$(".go45").click(function(){
$(this).siblings().addClass("showdiv");
$(this).siblings().removeClass("hidediv");
});
});
</script>
<script>
$(document).ready(function(){
$(".go1").click(function()
{$(this).parent().addClass("hidediv");
$(this).parent().removeClass("showdiv"); });});
</script>
<script>
$(document).ready(function() {
if ($(".todo").text().length > 3) {
$(this).parentsUntil(".submitted").addClass("hidediv");
$(this).parentsUntil(".submitted").removeClass("showdiv");
}
});
</script>
<body>
</br>
<form method="post" action="testplace2.php">
<select name="classu" >
<option disabled="disabled" selected="selected">Select Class</option>
<?php
$selectclass=$connect->query("SELECT DISTINCT class FROM `firstnametest` ");
while($rows=$selectclass->fetch_array())
{
?>
<option value="<?php echo $rows['class']; ?>"><?php echo $rows['class']; ?>
</option>
<?php
}
?>
<input type="submit" value="Add Group" style="width: 317px; height: 45px"/>
</form>
</select>
<?php
include 'dbconnection.php';
$groupder = $_POST['classu'];
?>
<h1><?php echo $groupder ?></h1></br>
<?php
$query=mysqli_query($connect,"SELECT * from firstnametest where class =
'$groupder'" );
// Initiate a counter variable
$i = 1;
while ($row=mysqli_fetch_array($query))
{
?>
<div class="submitted ">
<button id="butest<?= $i ?>" type="button" class="go45 btn btn-info "
value="<?php echo$row["id"]; ?>">Go Back</button>
<div class="todo "></br><?php echo$row["surname"]; ?></br>
<button type="button" onclick="return buter('<?= $i ?>')" class="go1 btn
btn-info " value="<?php echo$row["id"]; ?>">Button test</button>
<select class="cars" >
<option disabled="disabled" selected="selected">Group </option>
<option value="Group 1">Group 1</option>
<option value="Group 2">Group 2</option>
<option value="Group 3">Group 3</option>
<option value="Group 4">Group 4</option>
</select>
<select onchange="return chka('<?= $i ?>')" id="names<?= $i ?>" class="cars
changetest" >
<option disabled="disabled" selected="selected">Activity</option>
<?php
$classdrop=$connect->query("SELECT * from clubs ");
while($rows=$classdrop->fetch_array())
{
?>
<option class="changetest" value="<?php echo $rows['Club']; ?>"><?php echo
$rows['Club']; ?></option>
<?php
}
?>
</select>
<br/>
<div >
</div>
</div>
</div>
<?php
// Increment the counter
$i++;
}
?>
</body>
Thanks in advance for your help

Q: Can anybody see what is wrong with my programming?
Answer:
first thing that you should do before you debug is to fix you html document and follow the correct guidelines of calling external scripts. I also notice that you are implementing a bad habit of executing sql queries inside of your display page which is actually a common mistake that developers should avoid.
Include files such as dbcon are always located at the beginning of the code.
include 'dbconnection.php'
There is also a standard structure of html document.
example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Most of the time, Javascripts which is embedded internally are located at the bottom part of the html document if it is not from external js file.

How to sum the select box value inside loop in jquery in php

Here is my html, I need to sum the value of select fields on change
<for i=0;i<3,i++) {
<select id="options_<?php echo $i ?>">
<option value="25">RS 25</option>
<option value="30">Rs 30</option>
<option value="45">Rs 45</option>
<option value="95">Rs 95</option>
</select>
}
<p id=""sum_of_select> </p>
For example if i value is 2 means i want to sum the value selected in 2 select fields (45 is selected in select 1 and 95 selected in select 2 the output should be 140 ) . How to get in jquery

PHP is server-side. JS is client side. You can't use PHP to find the sum at runtime. Here is an example of how you can do this with jQuery-
<for i=0;i<3,i++) {
<select class="sum-selector" id="options_<?php echo $i ?>">
<option value="25">RS 25</option>
<option value="30">Rs 30</option>
<option value="45">Rs 45</option>
<option value="95">Rs 95</option>
</select>
}
<p id=""sum_of_select> </p>
<script>
$('.sum-selector').change(getSum);
function getSum() {
var sum = 0;
$('.sum-selector').each(function(select) {
if(select.value) {
sum += parseInt(select.value);
}
});
alert('sum is: ' + sum);
}
</script>

first off, I recommend before asking a question on here, make sure you debug and check before submitting a question.
What your code looks like:
for i=0;i<3,i++) {
<select id="options_<?php echo $i ?>">
<option value="25">RS 25</option>
<option value="30">Rs 30</option>
<option value="45">Rs 45</option>
<option value="95">Rs 95</option>
</select>
}
<p id=""sum_of_select> </p>
Now to be honest, your code is a bit confusing. But I'll see if I can sum up something for you.
What your code should look like:
<?php
// start the loop
for i=0;i<3,i++) {
?>
<select id="options_<?php echo $i ?>">
<option value="25">RS 25</option>
<option value="30">Rs 30</option>
<option value="45">Rs 45</option>
<option value="95">Rs 95</option>
</select>
<?php
} // end the loop
?>
<!-- here will go your summary -->
<p id="sum_of_select"></p>
<script>
// and to use your PHP variable in Jquery or Javascript:
var yourVarName = <?php echo $i; ?>;
</script>
NOTE: Your file must be a PHP file to do this, else this won't work.
Hoped this helped.

jQuery change the value of a variable on dropdown select from database

I am working on a project where I am stuck at a point right now. I need to change the value of a DIV live on select of the dropdown using jQuery.
Example:
I want this:-
<select name="">
<option value="10">10 clicks</option>
<option value="20">20 clicks</option>
<option value="30">30 clicks</option>
<option value="40">40 clicks</option>
</select>
<div id="chpln">Clicks: 0 clicks</div>
When I will select option 1 the value will be displayed in place of 0 in DIV live. The problem is that as this select value fetches data from the database I am not understanding how to do it.
Example:
<select name="" id="pln" class="select-box" style="margin-top: -40px;" />
<?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
<option value="<?php echo $ac_fetch['adclk_clicks']; ?>"><?php echo $ac_fetch['adclk_clicks']; ?> clicks</option>
<?php } ?>
</select>
jQuery that I used currently:-
$(document).ready(function(){
$("#pln").click(function(){
$("#chpln").text("Plan: <?php echo $ac_fetch['adclk_clicks']; ?> secs");
});
});
This jquery is changing the value currently but I am getting only the first value of the database i.e., 10. When I choose different option it still displays the first value from the database i.e., 10 while it should actually display the second value that is 20. Please help me. FIDDLE will be appreciated.

click is a wrong event for selection box
you can utilize change event for your result.
$(document).ready(function(){
$("#pln").change(function(){
$("#chpln").text("Plan: "+$(this).val()+" secs");
});
});

For Dropdown, click(function() is not applicable. Use change(function().
I gave you 2 way. Use any one.
I) Method - 1 (Using Ajax)
<select name="" id="pln" class="select-box" style="margin-top: -40px;" />
<?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
<option value="<?php echo $ac_fetch['adclk_clicks']; ?>">
<?php echo $ac_fetch['adclk_clicks']; ?> clicks
</option>
<?php } ?>
</select>
<div id="chpln">Clicks: 0 clicks</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.select-box').change(function(){
var selectBoxClicks = $('.select-box').val();
$.ajax({url:"AjaxShowClickValue.php?selectBoxClicks="+selectBoxClicks,cache:false,success:function(result){
$('#chpln').html(result);
}});
});
</script>
Create a new page, namely AjaxShowClickValue.php.
AjaxShowClickValue.php (Make Sure, if you changing page name here. Then, change in <script></script> tag too. Both are related.)
<?
echo "Clicks: ".$_GET['selectBoxClicks']." clicks";
?>
II) Method - 2
<select name="" class='select-box'>
<option value="10">10 clicks</option>
<option value="20">20 clicks</option>
<option value="30">30 clicks</option>
<option value="40">40 clicks</option>
</select>
<div id="chpln">Clicks: 0 clicks</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.select-box').change(function(){
$("#chpln").text("Clicks: "+$(this).val()+" clicks");
});
</script>

use jQuery Ajax for making request to the php file..
and use on .change() rather than .click() for changing the dropdown value..
the code will be placed in JS file which make ajax call to the php file on your server..
The php file will takes some params (if any) and perform select query to the databases and return result in response.. in php use json_encode(data) for that..
These examples may also help:
http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php
http://www.plus2net.com/php_tutorial/php_drop_down_list.php
You will find many other examples - Just Google It and understand the key concept!
Hope this helps.