Dropdown value based Autocomplete - php

I am trying to do autocomplete function based on dropdown selection value.
My index.php page:
<div>Select City</div>
<select id="city">
<option value="select">Select</option>
<option value="Chennai">Chennai</option>
<option value="Madurai">Madurai</option>
<option value="Salem">Salem</option>
<option value="Trichy">Trichy</option>
</select><br />
<input type="text" id="search" />
<script>
$(document).ready(function(){
$('#search').autocomplete({
minLength: 1,
source: function(query, process) {
var res = $('#city').val();
$.ajax({
url: 'autocomplete.php',
type: 'GET',
data: "src="+res + "&value=" + $('#search').val(),
dataType: 'JSON',
async: true,
success: function(data) {
process(data);
}
});
}
});
});
</script>
My autocomplete.php page:
<?php
if (isset($_GET['src'])) {
$city = $_GET['src'];
echo $city;
}
?>
<?php
$loc = $_GET['value'];
echo $loc;
$conn=mysql_connect('localhost', 'root', '');
if (!$conn)
{
die('Could not connect: ' . mysql_error());
}
if(!mysql_select_db("details"))
{
die('Could not connect database: ' . mysql_error());
}
$sql="SELECT localty FROM localty where localty like '%".$loc."%' and city='$city'";
echo $sql;
$result = mysql_query($sql);
if($result)
{
while($row=mysql_fetch_array($result))
{
echo $row['localty']."\n";
}
}
?>
Based on the city selection dropdown value,in search textbox localty should be displayed on entering first letter.But I'm not getting values in autocomplete.php page.
Please give any suggestions.

try this ...
<script>
$(document).ready(function(){
$('#city').change(function(){
$('#search').autocomplete({
minLength: 1,
source: function(query, process) {
var res = $('#city').val();
$.ajax({
url: 'autocomplete.php',
type: 'GET',
data: "src="+res + "&value=" + $('#search').val(),
dataType: 'JSON',
async: true,
success: function(data) {
process(data);
}
});
});
}
});
});
</script>

Related

Codeigniter Ajax Dependent Dropdown doesn't work inside foreach statement

I made 2 dependent dropdown in the same page.
One of them is inside foreach statement and it doesn't work at all. Meanwhile the other one works well. The name of id are totally different. Both of dependent dropdown lists refer to the same function in controller. I thought its the main problem and tried to make a different function, but it didn't change anything.
VIEW :
<tr>
<td><label>Category</label></td>
<td>
<div class="form-group">
<select id="edit_category" class="form-control" name="edit_category">
<option value="">Select Category</option>
<?php foreach ($categories as $cat) : ?>
<option <?php ?> value="<?php echo $cat->id; ?>"><?php echo $cat->name
</option>
<?php endforeach; ?>
</select>
</div>
</td>
</tr>
<tr>
<td><label>Product</label></td>
<td>
<div class="form-group">
<select name="edit_product" id="edit_product" class="form-control" style="width:350px">
<option value="">Select Product</option>
</select>
</div>
</td>
</tr>
SCRIPT :
<script type="text/javascript">
$(document).ready(function() {
//DEPENDENT DROPDOWN - ADD ITEM :
$('#add_category').on('change', function() {
$('#add_product').html('<option value="">Select Product</option>');
var catID = $(this).val();
$.ajax({
url: "<?php echo site_url('admin/item/dependentDL') ?>",
method: "POST",
data: {
id_p_category: catID
},
async: true,
dataType: "json",
success: function(data) {
$('#add_product').html(data);
},
error: function(error) {
alert(error);
}
});
return false;
}); //END - DROPDOWN - ADD ITEM
//DEPENDENT DROPDOWN - EDIT ITEM :
$('#edit_category').on('change', function() {
$('#edit_product').html('<option value="">Select Product</option>');
var edit_catID = $(this).val();
$.ajax({
url: "<?php echo site_url('admin/item/dependentDL') ?>",
method: "POST",
data: {
id_p_category: edit_catID
},
async: true,
dataType: "json",
success: function(data) {
$('#edit_product').html(data);
},
error: function(error) {
alert(error);
}
});
return false;
});
});
</script>
You should try with class instead of id because id is unique and your dropdown in the foreach loop so please try with class like below
$('.add_category').on('change', function() {
$('#add_product').html('<option value="">Select Product</option>');
var catID = $(this).val();
$.ajax({
url: "<?php echo site_url('admin/item/dependentDL') ?>",
method: "POST",
data: {
id_p_category: catID
},
async: true,
dataType: "json",
success: function(data) {
$('#add_product').html(data);
},
error: function(error) {
alert(error);
}
});
return false;
}); //END - DROPDOWN - ADD ITEM
//DEPENDENT DROPDOWN - EDIT ITEM :
$('.edit_category').on('change', function() {
$('#edit_product').html('<option value="">Select Product</option>');
var edit_catID = $(this).val();
$.ajax({
url: "<?php echo site_url('admin/item/dependentDL') ?>",
method: "POST",
data: {
id_p_category: edit_catID
},
async: true,
dataType: "json",
success: function(data) {
$('#edit_product').html(data);
},
error: function(error) {
alert(error);
}
});
return false;
});

can i fetch and populate different fields using function(data) jquery?

i want to populate two fields when some one fill up card no.
<input type="text" id="name" name="name" class="form-control" Value="<?php echo $grow['name']; ?>">
<input type="text" id="address" name="address" class="form-control" Value="<?php echo $grow['address']; ?>">
but this code populate field one by one. can any one suggest be better code for populating two fields from database. Thank you
jquery
<script type="text/javascript">
$(document).ready(function()
{
$("#krishi").keyup(function()
{
var k=$(this).val();
var q="name";
$.ajax
({
type: "POST",
url: "getresult.php",
data: 'k='+k+'&q='+q,
cache: false,
success: function(data)
{
if(data){
$("#name").val(data);
$.ajax
({
type: "POST",
url: "getresult.php",
data: 'k='+k+'&q=address',
cache: false,
success: function(data)
{
if(data){
$("#address").val(data);
}
}
});
}else
$("#name").val("");
$("#address").val("");
}
});
});
});
</script>
getresult.php
<?php
define('INCLUDE_CHECK',true);
include("mysql.php");
$k=$_POST['k'];
$q=$_POST['q'];
$sql=mysql_query("select * from inward where krishi='$k'");
$row=mysql_fetch_array($sql);
echo $row[$q];
?>
Try to extract both name and address from database and json them
$k=$_POST['k'];
$q=$_POST['q'];
$sql=mysql_query("select address,name from inward where krishi='$k'");
$row=mysql_fetch_array($sql);
$result = array(
'name'=>$row['name'],
'address'=>$row['address']);
echo json_encode($result);
After that parse them via jquery
$.ajax
({
type: "POST",
url: "getresult.php",
data: 'k='+k+'&q=address',
cache: false,
success: function(data)
{
if(data){
var parsedData = jQuery.parseJSON(data);
$("#name").val(parsedData.name);
$("#address").val(parsedData.address);
}
}
});
Javascript Code:
<script type="text/javascript">
$(document).ready(function()
{
$("#krishi").keyup(function()
{
var k = $(this).val();
var q = "name";
$.ajax({
type: 'POST',
url: "getresult.php",
data: 'k='+k,
cache: false,
success: function(data)
{
var jsonArr = $.parseJSON(data);
if(typeof response =='object')
{
$("#name").val(jsonArr.name);
$("#address").val(jsonArr.address);
}
else
{
$("#name").val("");
$("#address").val("");
}
}
});
});
});
</script>
PHP Code:
<?php
define('INCLUDE_CHECK',true);
include("mysql.php");
$k = $_POST['k'];
$sql = mysql_query("select * from inward where krishi='$k'");
$row = mysql_fetch_assoc($sql);
echo json_encode(array('name' => $row['name'], 'address' => $row['address']);
?>

Ajax not posting when value based on selectbox

What I have here is ajax that's post information into textbox from database. This ajax work's in input field, but when I tried to use select box it doesn't working. Why is that?
not working
<select id="tag"><option value="">none</option><option value="crs">crs</option></select>
working
<input name="tag" id="tag" type="text" value="" />
Index.php
<select id="tag"><option value="">none</option><option value="crs">crs</option></select>
<input name="output" id="output" type="text" value="" />
<script type="text/javascript">
$(document).ready(function()
{
$('input[id="tag"]').change(function()
{
var prjt_code = $("#tag").val();
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"prjt_code="+prjt_code,
dataType:'html',
type:'POST',
success:function(data){
//alert(data);
$('#output').val(data);
}
});
return false;
});
});
</script>
autocomplete-ajax.php
<?php
if(isset($_POST['prjt_code'])) {
$prjt_code = $_POST['prjt_code'];
$sql = $mysqli1->query("SELECT * FROM project WHERE project='$prjt_code'");
while($row1 = $sql->fetch_assoc())
{
$code = $row1['project_code'];
}
echo $code;
}
?>
You are targeting input[id="tag"] when you want select[id="tag"]
http://jsfiddle.net/releaf/U28jb/
$(document).ready(function() {
$('select[id="tag"]').on('change', function() {
var prjt_code = $("#tag").val();
alert(prjt_code);
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"prjt_code="+prjt_code,
dataType:'html',
type:'POST',
success:function(data){
//alert(data);
$('#output').val(data);
}
});
return false;
});
});

how to pass dropdown selected values and insert into mysql database using ajax

The code below takes suppliers from database, I want to insert the selected supplier to another database, I tried but getting the value is undefined , can anyone guide me how to do that:
<select name="supplier" id="supplier">
<option value="">Select supplier</option>
<?php
$sqlsupplier=mysql_query("SELECT supplier_id FROM supplier");
while($row=mysql_fetch_assoc($sqlsupplier)){
echo "<option value = '{$row['supplier_id']}'";
if ($selected_supplier == $row['supplier_id'])
echo "selected = 'selected'";
echo "> {$row['supplier_id']} </option>";
}
?>
</select>
ajax
$(function() {
$(".billingadddet_button").click(function() {
var CPH_GridView1_supplier = $("#supplier option:selected").val();
var dataString = 'CPH_GridView1_supplier='+CPH_GridView1_supplier;
if(CPH_GridView1_supplier=='')
{
alert("Please Enter Some Text");
}
else
{
$.ajax({
type: "POST",
url: "insertdetailed.php",
data: dataString,
cache: false,
success: function(html){
$("#display").after(html);
window.location = '?action=billingdatainputandexportdetailedreport';
}
});
} return false;
});
});
insertdetailed.php
if(isSet($_POST['CPH_GridView1_supplier']))
{
$supplier=$_POST['CPH_GridView1_supplier'];
$sql_insert="insert into billingdetailedreport(supplier,created) values ('$supplier',".time().")";
//print "Here";
print $sql_insert;
mysql_query($sql_insert);
}
try something like this
$(function() {
$(".billingadddet_button").click(function() {
var supplier_val = $("#supplier").val();
if(supplier_val== '')
{
alert("Please Enter Some Text");
}else{
$.ajax({
type: "POST",
url: "insertdetailed.php",
data: {CPH_GridView1_supplier : supplier_val},
cache: false,
success: function(html){
$("#display").after(html);
window.location = '?action=billingdatainputandexportdetailedreport';
};
});
}
return false;
});
});
pass dataString as an object to data:{dataString}
This is the HTML and JavaScript you need:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function saveToDatabase() {
var selectValue = $('#selectBoxID').val();
// post to php script
$.ajax({
type: 'POST',
url: 'insertdetailed.php',
data: {selectValueBox: selectValue }
}
}
</script>
</head>
<body>
<select id="selectBoxID" onselect="saveToDatabase()">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</body>
</html>
Try with JSON notation:
$.ajax({
type: "POST",
url: "insertdetailed.php",
data: { supplier_id: CPH_GridView1_supplier },
success: functi..
try changing this:
if(isSet($_POST['CPH_GridView1_supplier']))
//---^-----------------------------this upper case "S"
to this:
if(isset($_POST['CPH_GridView1_supplier']))
Try this:
if(isset($_POST['CPH_GridView1_supplier'])){
$supplier=$_POST['CPH_GridView1_supplier'];
$sql_insert="insert into billingdetailedreport(supplier,created)
values ('$supplier',".time().")";
if(mysql_query($sql_insert)){
echo 'SUCCESS';
print $sql_insert;
}else{
echo 'FAILED';
print $sql_insert;
}
}

Dynamic drop down box

I am trying to create 3 drop down boxes dependent on each other. Each drop down box is getting its data from its own tables. There are 3 tables as shown:
This is the form:
<label for="tourtype">
Tour Type
</label>
<select id="tourtype" name="tourtype" required>
<option value="" selected="selected">
--Select--
</option>
<?php
$sql=mysql_query("Select tour_type_id,tour_name from tour_type");
while($row=mysql_fetch_array($sql))
{
$tour_type_id=$row['tour_type_id'];
$name=$row['tour_name'];
echo "<option value='$tour_type_id'>$name</option>";
}
?>
</select>
<label>
Country
</label>
<select id="country" name="country" class="country" required>
<option value="" selected="selected">
-- Select --
</option>
</select>
<
<label>
Destination
</label>
<select id="destination" name="destination" class="destination" required>
<option value="" selected="selected">
-- Select --
</option>
</select>
This is the javascript:
<script type="text/javascript">
$('#tour_type').change(function () {
var id = $(this).val();
$.ajax({
type: "POST",
url: "ajax.php",
data: "&id=" + id + "&get_countries=1",
success: function (html) {
$("#country").html(html);
}
});
});
$('#country').change(function () {
var id = $(this).val();
$.ajax({
type: "POST",
url: "ajax.php",
data: "&id=" + id + "&get_destination=1",
success: function (html) {
$("#destination").html(html);
}
});
});
</script>
And this is the ajax.php
<?php
include ('../config.php');
< ? php
if ($_REQUEST['get_countries']) {
$sql = mysql_query("SELECT * FROM `countries` where `tour_type_id`=" . $_REQUEST['id']);
$countries = "";
while ($row = mysql_fetch_array($sql)) {
$cid = $row['countries_id'];
$name = $row['countries_name'];
$countries.= "<option value='" . $cid . "'>" . $name . "</option>";
}
echo $countries;
}
elseif ($_REQUEST['get_destination']) {
$destination = "";
$sql = mysql_query("SELECT * FROM `destination` where `country_id` =" . $_REQUEST['id'])
while ($row = mysql_fetch_array($sql)) {
$destination_id = $row['destination_id'];
$name = $row['destination_name'];
$destination.= "<option value='" . $destination_id . "'>" . $name . "</option>";
}
echo $destination;
}
?>
The problem is the 2nd and 3rd drop down boxes are not populating anything. Can anyone help me? For example if i select culture on the 1st drop down, the 2nd drop down should show Holland and Belgium. Then if i select Holland, the 3rd drop down should show Amsterdam.
Your identifier in your Javascript is #tour_type when your id is #tourtype.
If the syntax is correct and your SQL results are correct too, it should work.
EDIT: some of your JS isn't right.
data: "&id=" + id + "&get_countries=1",
should be
data: {id: id, get_countries: 1},
You should also put a debug on your ajax call by adding
error: function () { alert("ajax failed"); }
after your success callback
full sources now:
$('#tourtype').change(function() {
var id=$(this).val();
$.ajax
({
type: "POST",
url:"jurassicbase5/admin/ajax.php",
data: {id: id, get_countries: 1},
success: function(html){
$("#country").empty();
$("#country").append(html);
},
error: function () { alert("ajax failed"); }
});
});
$('#country').change(function() {
var id=$(this).val();
$.ajax
({
type: "POST",
url: "jurassicbase5/admin/ajax.php",
data: {id: id, get_destination: 1},
success: function(html)
{
$("#destination").empty();
$("#destination").append(html);
},
error: function () { alert("ajax failed"); }
});
});

Categories