how to get values from mysql db to dropdownbox using php ajax?
what i need is
when i select anyone value from dropdownbox then the corresponding row values(get from db) will be displayed to another dropdownboxes/textboxes?
Thanks
Siva
you will have to use both javascript and php to achieve this
<select id="month" onchange="change()">
<option value="1">January</option value="2">
<option value="1">January</option value="2">
</select>
<div id="result"></div>
<script>
function change(){
var sel_month = $('#month').val();
$.post("url_to_your_php_file", {month:sel_month})
.done(function(data) {
$('#result').html(data);
});
}
on php side...
<?php
$month = $_POST['month'];
//run your query here
//result should be an array...
//populate a select box with the array...
echo '<select>';
foreach($result as $data){
echo '<option value="'.$data['id'].'">'.$data['name/title'].'</option>';
}
echo '</select>';
Suppose this is my select drop down , i want to display data corresponding to a month ,
Is that your question ?
<select name="monthview" onchange="showUser(this.value)">
<option><b>Change Month</b>
<option value="1">January
<option value="2">February
<option value="3">March
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">August
<option value="9">September
<option value="10">October
<option value="11">November
<option value="12">December
</select></td>
<div id="txtHint">YOUR NEW DROP DOWN WITH ROWS FROM DB WILL BE HERE </div >
*** AJAX CALL ***:
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
var x=document.myForm.eid.value;
xmlhttp.open("GET","databasefetch.php?q="+str,true);
xmlhttp.send();
}
</script>
PHP SIDE YOU NEED TO RECEIVE THE MONTH VALUE AND THEN SEND IN THE CORRESPONDING ROWS IN A DROP DOWN AS A RESPONSE TO AJAX CALL , LIKE THIS .
$month_selected = $_GET['q'];
//connect to database
$result ="your sql query"
//create a drop down now
echo "<select>";
echo "<select name='projectassignedto'>";
echo "<option>";
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row['employeeid'] ."'>" . $row['employeeid'] ."</option>";
}
echo "</select>";
echo "";
u can goto w3 and get the code for php-ajax-sql , Your work shall be done if you have little knowledge with php and sql .
Related
I've a drop-down list for selecting an Id on a php page, the values of which is getting fetched from the database(1st Column).
There's a text-field next to the drop-down in which I want to display the name of the member (2nd Column) from the database.
The code is below -
<?php
include ('connection.php');
$query = "SELECT Member_id FROM member_db ORDER BY Member_id ASC";
$result = mysqli_query($conn, $query) or die(mysqli_error($conn)."[".$query."]");
?>
<Select id="st_id" placeholder="Enter Member id" name="ist_id" required class="styled-select green semi-square onChange="showMember(this.value)"">
<option selected ="true" disabled="disabled">Select Member Id</option>
<?php while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){?>
<option value=" <?php $row['Member_id']; ?> ">
<?php echo $row['Member_id'];?>
</option>
<?php }?>
</Select>
<input style="min-height:30px" type="text" id="st_name" placeholder="Member name" name="ist_name" disabled/>
The JavaScript code I'm calling is this -
function showMember(str) {
if (str == "")
{
document.getElementById("txtHint").innerHTML = "";
return;
}
else {
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getMember.php?q="+str,true);
xmlhttp.send();
}
}
The getMember.php is another php file in which I'm firing a query to get the Member_name based on the value of Member_id.
But the problem is that somehow, that onChange, the page doesn't call the showMember() function.
1) Missing echo in value attribute <option value="<?php $row['Member_id']; ?> "> <?php echo $row['Member_id'];?>
2) onchange should be outside the class attribute .<Select id="st_id" placeholder="Enter Member id" name="ist_id" required class="styled-select green semi-square" onChange="showMember(this.value)">
simple use jquery ajax
function showMember(str)
{
$.ajax({
url:'getMember.php',
type:'post',
data:{q:str},
success:function(data)
{
$('#st_name').val(data);
}
});
}
Note :don't forgot to include jquery
I would like to display one column of data, [pin], based on the [plan] and [order_id] values. plan=9 and order_id=0. Would like to load data without reloading page, using ajax.
Here is my HTML/Script:
<script>
function showPins(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","getPins.php?q="+str,true);
xmlhttp.send();
}
}
</script>
HTML:
<div align="center">
<h3>View PIN's</h3>
<form>
<select name="users" onchange="showPins(this.value)">
<option value="">Select Plan Type:</option>
<option value="1">Plan1</option>
<option value="2">Plan2</option>
<option value="3">Plan3</option>
</select>
</form>
<br/>
<div id="txtHint"></div>
</div>
This is my PHP file (getPins.php):
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('myHost','myUsername','myPw','my_db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"my_db");
$sql="SELECT * FROM attPins WHERE (order_id=0, plan=9 and id = '".$q."')";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>PIN's</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['pin'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
This is based off the tutorial shown here: http://www.w3schools.com/php/php_ajax_database.asp
Trying to make it work for showing the correct pins for plan type chosen.
your query would be wrong read manual where
$sql="SELECT * FROM attPins WHERE (order_id=0, plan=9 and id = '".$q."')";
It would be
WHERE (order_id=0 and plan=9 and id = '".$q."')
Or
WHERE (order_id=0 OR plan=9 and id = '".$q."')
according to your requirment
I have to select sub-category according to the category checked. i am stuck with selecting multiple checkboxes and displaying its value using ajax.
i want to use pure ajax and not jquery. i am fetching values of 1 checkbox from database table and now i need to display other checkbox with the values fetched with select query depending upon the multiple checkboxes user checks. i have an idea foreach loop is to be used but cant understand how and where to frame it..Please Help. Thank u.
this is the form:
<?php
while($f1=mysql_fetch_row($res)) {
?>
<input type="checkbox" name="chkcat[]" id="chkcat" onChange="showUser(this.value)" value='<?php echo $f1[1]; ?>'> <?php echo $f1[0]; ?>
<? } ?>
<div> id="txtHint"> </div>
Ajax code that has showUser function
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_chkbox.php?q="+str,true);
xmlhttp.send();
}
</script>
and the file that has to fetch sub category according to the category selected and url i.e:ajax_chkbox.php is:
while($row = mysql_fetch_array($result))
{
echo "<input type=checkbox name=chksubcat[] id=chsubkcat value= $row[0]> $row[2]";
echo "<br>";
}
You can change Dropdown to checkbox
select_cat.php
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".category").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "select_subcat.php",
data: dataString,
cache: false,
success: function(html)
{
$(".subcat").html(html);
}
});
});
});
</script>
Category :
<select name="category" class="category">
<option selected="selected">--Select Category--</option>
<?php
include('databasefile');
mysql_connect($server,$username,$password)or die(mysql_error());
mysql_select_db($database)or die(mysql_error());
$sql=mysql_query("select cat_name from category order by cat_name");
while($row=mysql_fetch_array($sql))
{
$cname=$row['cat_name'];
echo '<option value="'.$cname.'">'.$cname.'</option>';
} ?>
</select> <br/><br/>
SubCategory :
<select name="subcat" class="subcat">
<option selected="selected">--Select SubCat--</option>
</select>
2.select_subcat.php
<?php
include('databasefile);
mysql_connect($server,$username,$password)or die(mysql_error());
mysql_select_db($database)or die(mysql_error());
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysql_query("select s_name from subcat_l1 where cat_name='$id'");
while($row=mysql_fetch_array($sql))
{
$sname=$row['s_name'];
echo '<option value="'.$sname.'">'.$sname.'</option>';
}
}
?>
SubCategory :
<select name="subcat" class="subcat">
<option selected="selected">--Select SubCat--</option>
</select>
<html>
<head>
<script>
function showUser()
{
//var s=document.getElementById('uni'); //this also not working
//var str=s.options[s.selectedIndex].value;
var str=document.form.formList.value;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name="form">
<select name="formList" id="uni" >
<option value="">Select a person:</option>
<option value="1">University 1</option>
<option value="2">University 2</option>
<option value="3">University 3</option>
<option value="4">University 4</option>
</select>
<input type="submit" value="Search" onsubmit="showUser()" >
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
Want to get value from Select Tag by Submit button.....
By using javascript and then send to AJAX to forward that data to userget.php file to fetch data from SQL DATABASE and
then show to on web.
please i'm stuck here anybody tell me what i'm doing wrong... ???
I want to to store value from drop down list by submit button...
/////////////////Server side code///////////////////////////
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','root','','degree');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM uni WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table border='1'>
<tr>
<th>Id</th>
<th>Univeristy</th>
<th>Degree</th>
<th>Location</th>
<th>Rank</th>
<th>Fees</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Id'] . "</td>";
echo "<td>" . $row['Univeristy'] . "</td>";
echo "<td>" . $row['Degree'] . "</td>";
echo "<td>" . $row['Location'] . "</td>";
echo "<td>" . $row['Rank'] . "</td>";
echo "<td>" . $row['Fees'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
If you use JQuery, you may do something like:
$(document).ready(function(){
$('#searchButton').click(function(){
if ($('#uni').val()) {
$.post(
'getuser.php',
{
q: $('#uni').val()
},
function(personInfo){
if (personInfo) {
$('#txtHint').text(personInfo)
}
}
);
} else {
alert('Please select an option first.');
}
});
});
Just change the input type in your form from submit to button and add the id as "searchButton".
In your server side script, use POST instead of GET:
$q = intval($_POST['q']);
First of all more reliable method of getting xmlhttp
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
Second is that correct form to do what you want is that:
<form name="form" onsubmit="showUser(); return false;">
<select name="formList" id="uni" >
<option value="">Select a person:</option>
<option value="1">University 1</option>
<option value="2">University 2</option>
<option value="3">University 3</option>
<option value="4">University 4</option>
</select>
<input type="submit" value="Search" />
</form>
And showUser function like that:
function showUser()
{
//var s=document.getElementById('uni'); //this also not working
//var str=s.options[s.selectedIndex].value;
var str=document.form.formList.value;
if (str=="")
{
document.getElementById("txtHint").innerHTML = "";
return;
}
var xmlhttp = getXmlHttp();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4)
{
if(xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
} else {
// add error handler here
}
}
};
xmlhttp.open("GET","/getuser.php?q="+str,true);
xmlhttp.send();
}
No need to bother with submit at all. This will do the trick :)
<input type="button" onclick="showUser();" value="Search" />
Good day ,
I have 3 PHP pages ('test1.php' , 'res.php' , 'desc.php') ,So I want to make 3 dependent drop down. all drop down dependent to previous drop down. So when I select an item from first drop down , all data fetch from database by 'res.php' and add to second drop down as item . But when I select second drop down , page will refresh and back to first step and all drop down item selected gone .
test1.php
<script>
function load_sub_cat(str){
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("get","res.php?q="+str,false);
xmlhttp.send();
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
</script>
<select name="users" onChange="load_sub_cat(this.value)">
<option value="0">Select a restaurant</option>
<?php
$db->setQuery("SELECT id, name FROM yh5lw_rest_dropdown where active=1");
$results = $db->loadObjectList();
foreach ($results as $result) {
echo "<option value=".$result->id.">". $result->name."</option>";
}
?>
</select>
<div id="txtHint"></div>
res.php
<script>
function load_sub_cat(str){
var xmlhttp1;
xmlhttp1=new XMLHttpRequest();
xmlhttp1.open("get","desc.php?desc="+str,false);
xmlhttp1.send();
document.getElementById("txt23").innerHTML=xmlhttp1.responseText;
}
</script>
<select name="users1" onChange="load_sub_cat(this.value)">
<option value="">Select a main course</option>
<?php
$q = intval($_GET['q']);
$db->setQuery("SELECT price,id, nameEN , nameFA FROM yh5lw_food_dropdown where active=1 AND res_id ='".$q."'");
$results = $db->loadObjectList();
foreach ($results as $result) {
echo "<option value=".$result->id.">". $result->nameEN." (".$result->price"</option>";
}
$count++ ;
}
?>
</select>
<div id="txt23"></div>
desc.php
<?php echo $_GET['desc'] ?>
Although you can write your own code for this, you don't need to reinvent the wheel for this functionality - try the jQuery Cascading Dropdown Plugin, it's free and does precisely what you want to do. It's easy to setup, it supports AJAX, and and you'll only need to use your server-side code for the AJAX calls.