I have 2 select box option, item and part number. I'm using php and ajax to get part number when I pick an item.
The issue is that, the html and php all work but for the ajax. Nothing populates in the part number select-box when an item is selected.
Here is my html and ajax side (index.php):
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function fetch_select(val)
{
$.ajax({
type: 'post',
url: 'get_state.php',
success: function (response) {
document.getElementById("partno").innerHTML=response;
}
});
}
</script>
</head>
<body>
<div id="select_box">
<form action="" method="post">
Item:
<select name="item" id="item" onchange="fetch_select(this.value);">
<option value="">select item</option>
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
</select>
<br>
Part:
<select name="partno" id="partno">
<option value="">select part</option>
</select>
</form>
</body>
</html>
Here is the php file (get_state.php):
<?php
//Connection to DB
//Select data from Table based on item selection
$query="SELECT partno FROM Table";
$params = array($_REQUEST['query']);
$results = sqlsrv_query($conn, $query, array(), array( "Scrollable" => 'static' ));
if($results===false)
{ die( FormatErrors( sqlsrv_errors() ) ); }
while($row = sqlsrv_fetch_array($results, SQLSRV_FETCH_ASSOC))
{
echo "<option>".$row['partno']."</option>";
}
exit;
?>
Help is greatly appreciated. Thank you.
Related
Goodday, recently ive tried to learn AJAX. Ive made up an example that captures the data selected from the 1st dropdown box and filter into the 2nd dropdown box. However, the AJAX request doesnt seem to run.
HTML
<?php include 'conn.php' ?>
<!DOCTYPE html>
<html>
<head>
<title>
AJAX for extensions!
</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function fetch_select(val)
{
$.ajax({
type: 'post',
url: 'fetch_data.php',
data: {
get_option:val
},
success: function (response) {
document.getElementByID("owner_id").innerHTML=response;
}
});
}
</script>
</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP for Extensions</p>
<center>
<div id="select_box">
<select name="department" id="department" onchange="fetch_select(this.value);">
<option value="">Select Option</option>
<?php
$sql="SELECT Department1 FROM PIC_Approval";
$result=odbc_exec($conn,$sql);
while($row=odbc_fetch_array($result)){
$department=$row['Department1']; ?>
<option value="<?php echo $department;?>"><?php echo $department;?></option>
<?php }
?>
</select>
<select name="ownerid" id="owner_id">
</select>
</div>
</center>
</body>
</html>
fetch_data.php
<?php
include 'conn.php';
if(isset($_POST['get_option']))
{
echo $_POST['get_option'];
$department = $_POST['get_option'];
$sql1="SELECT Owner_I_Employee_ID FROM masterlist1 WHERE Department1='$department'";
$result1=odbc_exec($conn,$sql1);
while($row=odbc_fetch_array($result1))
{
$id=$row['Owner_I_Employee_ID']; ?>
<option value="<?php echo $id;?>"><?php echo $id;?></option>
<?php
}
exit;
}
?>
I am not sure what is wrong with the Request. I followed as in the tutorials i found online. I am using odbc.
Turns out it's because
document.getElementByID("owner_id")
should be
document.getElementById("owner_id")
because JavaScript is case-sensitive. The code works fine after the error is fixed.
view code i have : file one to show data two select box second select box depand on the first select box value
<?php
$con=mysql_connect("localhost","root","root");
mysql_select_db("register",$con);
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#category").change(function(){
var value=$("#category option:selected").val();
$.ajax({
type:'post',
url:'subcat.php',
data:{ kvalue : value },
datatype:'json',
success:function(data){
alert(data);
$("#response").html(data);
}
})
})
})
</script>
<title></title>
</head>
<body>
<form method="post">
<table>
<tr>
<td>category:</td>
<td><select id="category">
<option>Select Category</option>
<?php
$query=mysql_query("select * from category");
while($row=mysql_fetch_array($query)){
?>
<option value="<?php echo $row['category'];?>"><?php echo $row['category'];?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Sub cat:</td>
<td><select >
<option >dependent dropdown</option>
<option id="response"></option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
another page for ajax call:
This page return the data in json format to first file .problem is that i have one select box there i want to get these value in my option but i m getting this value and if m going to select on then all value auto selectrd
<?php
$con=mysql_connect("localhost","root","root");
mysql_select_db("register",$con);
$val=strtolower($_POST['kvalue']);
if($val=='mobile'){
$query=mysql_query("select mobile from subcat");
while($row=mysql_fetch_array($query)){
$row[] = $r;
print json_encode($row);
echo $row['mobile']."</br>";
}
}
problem``
i want to fetch data from json in html option but i get the value but it all in selected form how can i get or select the value one which i want??
check this demo code which select option update and your your connection and query , i just set manually data for test. this is your html file
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#category").change(function () {
var value = $("#category option:selected").val();
$.ajax({
type: 'post',
url: 'subcat.php',
data: {kvalue: value},
datatype: 'json',
success: function (data) {
alert(data);
$("#response").html(data);
}
})
})
})
</script>
<title></title>
</head>
<body>
<form method="post">
<table>
<tr>
<td>category:</td>
<td><select id="category">
<option>Select Category</option>
<option value="mobile">Mobile</option>
<option value="TV">Tv</option>
<option value="Phone">Phone</option>
</select>
</td>
</tr>
<tr>
<td>Sub cat:</td>
<td>
<select id="response">
<option>dependent dropdown</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
and this is your subcat.php file .i set manually data for test. if you want to select depend your option data just update your query
<?php
//$con=mysql_connect("localhost","root","root");
//mysql_select_db("register",$con);
$val = strtolower($_POST['kvalue']);
if ($val == 'mobile') {
//$query=mysql_query("select mobile from subcat");
$data = array('Option1', 'Option2', 'Option3');
foreach ($data as $value => $key) {
echo '<option value="' . $value . '">' . $key . '</option>';
}
}
if you select second option value using ajax send option then update query like
//$query=mysql_query("select mobile from subcat where subcat = '$val'");
and this is my demo data so need to replace your sql data
On my web page I have two dropdown menus. One for a list of countries and another for a list of city's. The country menu is populated with data from a database. Once one of these countries are selected, the following dropdown is populated with corresponding cities via a php file (getdata.php) which takes the country value selected and queries it with a database and echos the city names into the dropdown. What I am struggling to work out is, when a city is selected, how would I get the text of the city selection and use this text in another php (displayCity.php) to query the database and echo values such as Population into the textbox (without reloading page) back on the web page? Would I need to make the displayCity.php similar to the getData.php? I have already created a new Ajax method for the textbox but I am not sure if I will need this. Advice would be greatly appreciated.
<?php include_once "connection.php"; ?>
<!DOCTYPE html>
<html>
<head>
<title>City displayer</title>
<h1>City displayer</h1>
<link rel="stylesheet" type="text/css" href="homepagestyle.css">
</head>
<body>
<div class = "country">
<label>Select Country: </label>
<select name="country" onchange="getId(this.value);">
<option value = "">Select Country</option>
<?php
$query = "SELECT DISTINCT(Country) from location AS Country FROM location ORDER BY Country ASC;";
$results = mysqli_query($con, $query);
foreach ($results as $country) {
?>
<option value = "<?php echo $country['Country']; ?>"><?php echo $country['Country'] ?></option>
<?php
}
?>
</select>
</div>
</br>
</br>
<div class="city">
<label>Select a City: </label>
<select name="city" id="cityList" onchange="showCity(this.value)">
<option value="">Select a city</option>
</select>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
function getId(value){
$.ajax({
type: "POST",
url: "getdata.php",
data: "Country="+value,
success: function(data){
$("#cityList").html(data);
}
});
}
</script>
</br>
<div id = "textbox">Choose a country and city to display city name here</div>
<script>
function showCity(value){
$.ajax({
type: "POST",
url: "displayCity.php",
data: "City="+value,
success: function(data){
$("#textbox").html(data);
}
});
}
</script>
</body>
</html>
getdata.php
<?php
include_once "connection.php";
if(!empty($_POST['Country'])){
$country = $_POST['Country'];
$query = "SELECT * FROM location WHERE Country= '$country'";
$results = mysqli_query($con, $query);
foreach ($results as $city) {
?>
<option value = "<?php echo $city['Country']; ?>"><?php echo
$city['City'] ?></option>
<?php
}
}
?>
Use AJAX along with a $_SESSION variable. No need to write it to the database. You just have to make sure you use session_start() everywhere you need it.
I have a table containing some fields like name,address,item status in a table. I have values like Item Picked, Item Not Picked.
I have a select box like given below :
<select name="option" class="optionn">
<option value="">All</option>
<option value="itempicked">Item Picked</option>
<option value="itemnotpicked">Item Not Picked</option>
</select>
I want to sort the table contents according to the selected value in the select box.
How to do this ? Can anyone say how to do this ?
<select name="option" class="optionn" id="items">
<option value="">All</option>
<option value="itempicked">Item Picked</option>
<option value="itemnotpicked">Item Not Picked</option>
</select>
$.ajax({
url : 'example.php',
data:{
item:$('#items').val()
},
type: 'POST',
success: function(result){
console.log(result); // result set in table
}
})
in example.php file write query to get sorting data
Ex. $query = "SELECT * FROM items WHERE items = ".$_POST['item'];
This is just the example it's not your answer i hope it's help you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="wrapper">
<div>
<select class="options" name="">
<option value="1">item_1</option>
<option value="1">item_2</option>
<option value="1">item_3</option>
</select>
</div>
</div>
<button type="button" class="addme" name="button">Add More</button>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('.addme').click(function(){
$.ajax({
url:'getData.php',
type:'GET',
success:function(result){
console.log(result);
}
})
});
});
getData.php File
$query = "select * from items";
$row = mysql_query($query);
echo "<select>";
while($data = mysql_fetch_array($row)){
echo "<option>".$data['item_name']."</option>";
}
echo "</select>";
I want to retrieve districts and state from the database, and also to populate second dropdown list based on first dropdown list. In my code below the values are inserted directly:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="C:\Program Files\BitNami WAPPStack\apache2\htdocs \Prj\Online\jquery-1.9.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var options = $('#test2 option');
$('#test1').on('change', function(e) {
$('#test2').append(options);
if ($(this).val() != 'Select') {
$('#test2 option[value!=' + $(this).val() + ']').remove();
} else {
$('#test2').val('Select');
}
});
});
</script>
<form name="form1" method="post" action="fid1.html">
<select name="test1" id="test1">
<option value="Select">Select</option>
<option value="a">TamilNadu</option>
<option value="b">Kerala</option>
<option value="c">Andhra</option>
</select>
<select id="test2" name="test2">
<option value="Select">Select</option>
<option value="a">Chennai</option>
<option value="a">Trichy</option>
<option value="a">Madurai</option>
<option value="b">Trivandram</option>
<option value="b">Cochin</option>
<option value="b">Azhapuzha</option>
<option value="c">Hyderabad</option>
</select>
</form>
</head>
</html>
for that purpose you should use Ajax call on your first drop box .
Ajax is a server side tools to fetch data from database.
Create a ajax function, for example get_country()
$(function() {
$('#test1').change( function() {
var val = $(this).val();
$.ajax({
url: 'findState.php',
dataType: 'html',
data: { country : val },
success: function(data) {
$('#state').html( data );
}
});
}
else {
$('#state').val('').hide();
$('#othstate').show();
}
});
});
now do your database query on findstate.php and use state div to show particuler state list.