I'm trying to extract data from my database to drop_down_list1 through ajax. and display it to the next drop_down_list2. I follow almost exact same thing like in this youtube tutorial but it seems not working.
Here's the code:
test.php
<?php
include("connection.php");
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/JavaScript">
function State(){
$('#stateddl').empty();
$('#stateddl').append("<option>Loading...</option>");
$('#districtddl').append("<option value='0'> - </option>");
$.ajax({
type:"POST",
url:"custom2.php",
contentType:"application/json; charset=utf-8",
dataType:"json",
success: function(data){
$('#stateddl').empty();
$('#stateddl').append("<option value='0'>-</option>");
$.each(data,function(i,item){
$('#stateddl').append('<option value="'+ data[i].roomName +'">'+ data[i].roomName+'</option>');
});
},
complete: function(){
}
});
}
function District(sid){
$('#districtddl').empty();
$('#districtddl').append("<option>Loading...</option>");
$.ajax({
type:"POST",
url:"custom.php?sid="+sid,
contentType:"application/json; charset=utf-8",
dataType="json",
success: function(data){
$('#districtddl').empty();
$('#districtddl').append("<option value='0'> - </option>");
$.each(data,function(i,item){
$('#districtddl').append('<option value="'+ data[i].roomPrice +'">'+ data[i].roomPrice +'</option>');
});
},
complete: function(){
}
});
}
$(document).ready(function(){
State();
$("#stateddl").change(function(){
var roomName = $("#stateddl").val();
District(roomName);
});
});
</script>
</head>
<body>
<select name="stateddl" id="stateddl"></select> <select name="districtddl" id="districtddl"></select>
</body>
</html>
custom2.php
<?php
include("connection.php");
$sql=mysql_query("SELECT * FROM roomtype");
if(mysql_num_rows($sql))
{
$data=array();
while($row=mysql_fetch_array($sql))
{
$data[] = array
(
'roomName' => $row['roomName']
);
}
header('Content-type: application/json');
echo json_encode($data);
}
?>
custom.php
<?php
include("connection.php");
$sql=mysql_query("SELECT * FROM roomtype WHERE roomName='".$_GET["sid"]."'");
if(mysql_num_rows($sql))
{
$data=array();
while($row=mysql_fetch_array($sql))
{
$data[] = array
(
'sid' => $row['roomName'],
'roomPrice' => $row['roomPrice']
);
}
header('Content-type: application/json');
echo json_encode($data);
}
?>
The problem is because of following function block,
function District(sid){
...
$.ajax({
...
dataType="json",
...
});
}
See the dataType setting of the AJAX request, wrong = sign. It should be dataType:"json"
Related
I am trying to get a HTML element to update from an ajax quire to a PHP file but it's not working.
My code is below
<html>
<head>
<script src="jquery-3.1.0.min.js"></script>
</head>
<body>
<script>
var json = (function () {
var json = null;
$.ajax({
url: "test.php",
dataType: "json", //the return type data is jsonn
success: function(data){ // <--- (data) is in json format
json = data.test;
$('#demo').text(json.test1);
}
});
return json;
})();
</script>
<p id="demo"></p>
</body>
</html>
PHP code
<?php
header("Content-Type: application/json");
$test = array();
$test['test1'] = '1';
$test['test2'] = '2';
$test['test3'] = '3';
echo json_encode($test);
//echo nothing after this //not even html
?>
can someone please help, thank you
Your php script sending a JSON object and you can access its property like this:
$.ajax({
url: "test.php",
dataType: "json", //the return type data is jsonn
success: function(data){ // <--- (data) is in json format
$('#demo').text(data.test1);
}
});
the Javascript is the problem. You should bind the function that makes the AJAX query to a DOM event, such as a button click.
<script>
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
$.ajax({type: "POST",
url: "test.php",
dataType: "json",
data: { name: $("#name").val()},
success:function(data){
$("#demo").text(data.test1);
}
});
});
});
</script>
<input type="text" id="name" placeholder="Enter your name">
<button id="submit">Submit</button>
<p id="demo"></p>
On PHP side, you can read the input:
<?php
header("Content-Type: application/json");
$test = [
'test1'=>1, 'test2'=>2, 'test3'=>3, 'name'=>$_POST['name']
];
echo json_encode($test);
exit;
I am getting records from database in WordPress then creating and adding value in select tag(HTML) dynamically.
<?php
global $wpdb;
$registeredUsers = $wpdb->get_results('SELECT * FROM wp_users where user_login != "Admin"',ARRAY_A);
$select='<select name="users" class="form-control" id="users">';
$select.= '<option value="Select User"> Select User</option>';
foreach($registeredUsers as $user)
{
$select.='<option value="'.$user['user_email'].'">'.$user['user_login'].'</option>';
}
$select.='</select>';
?>
I am using $select variable in Html and drop down is being displayed properly.
<form id="a" action="" method="post">
<div style="margin: 0 auto;width:500px;">
<?php echo $select ?>
</div>
</form>
I have written code to get selected drop down onchange event in jquery. It return success but I am not able to get selected value of dropdown.
<script type="text/javascript">
$(document).ready(function(){
$("select[name='users']").change(function () {
jQuery.ajax({
type: "POST",
data: $("form#a").serialize(),
success: function(data){
alert("SUCCESS");
}
});
});
});
</script>
Below code return nothing
if(isset($_POST['users'])) {
echo $_POST['users'];
}
Set url option to your page in your ajax function:)
<script type="text/javascript">
$(document).ready(function(){
$("select[name='users']").change(function () {
jQuery.ajax({
type: "POST",
url:"yourpage.php"
data: $("form#a").serialize(),
success: function(data){
alert("SUCCESS");
}
});
});
});
</script>
replace yourpage.php
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;
}
}
I have edited my code and it goes something like this and it is not working.. Please help me..
<?php
$variable = "krishna";
?>
<script>
$.ajax({
type:"POST",
url:"ajax.php",
data:{
variable:<?php echo $variable; ?>
},
success:function(msg){
$("#val").html(msg);
}
});
</script>
<div id="val"></div>
ajax.php
<?php
echo $_POST['variable'];
?>
thank you all
Try this
<script type="text/javascript">
$.ajax({
type: "POST",
url: "",
data: 'var=<?php echo $variable;?>',
success: function(){
}
});
</script>
<script>
$.ajax({
type:"POST",
url:"",
data:{data:'<?php echo $data; ?>',data1:'<?php echo $data1; ?>'}
success: function(data)
{ }
});
</script>
You can add any number of varibles using data{data1:data1, data2:data2, data3:data3} and it's stand like {variablename:value}
Use an echo statement inline with the javascript. Because PHP executes on the server all the PHP processing will be done by the time the javascript runs.
<?php
$variable = "php";
?>
<script>
$.ajax({
type:"POST",
url:"",
data:{
variable:"<?php echo $variable; ?>"
},
success:
});
</script>
I have an ajax call that passes data to another php file, createTest2.php, as below.
But the createTest2.php file throws error
"Notice: Undefined index: aaa in C:\xampp\htdocs\TestProj\Test\createTest2.php on line 2
I have no clue how to fix it.
caller.php
$(document).ready(function(){
$("#button_submit").click(function()
{
$.ajax({
type:"POST",
url:"createTest2.php",
data:{aaa : "UNIT_TEST"},
success:function()
{
alert("success");
}
});
});
});
createTest2.php
$test_name = $_POST['aaa'];
if you are using
$test_name = $_POST['aaa'];
you have to call ajax like this
$(document).ready(function(){
$("#button_submit").click(function()
{
$.ajax({
type:"POST",
url:"createTest2.php",
data:"aaa=UNIT_TEST",
success:function()
{
alert("success");
}
});
});
});
the main thing is that " data:"aaa=UNIT_TEST", "
Try this:
//sample.php
<?php
if(isset($_POST) && isset($_POST['aaa'])){
echo json_encode("hello world! Your data was: " . $_POST['aaa']);
}
?>
//your client side page
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function send(){
$.ajax({
type:"POST",
url: 'sample.php',
data:{aaa:"UNIT_TEST"},
dataType: 'json'
}).done(function(data){
alert(data);
});
}
</script>
</head>
<body>
Send
</body>
</html>
Try this in your, for example, index.html:
<script>
$(document).ready(function(){
$("#button_submit").click(function()
{
$.ajax({
global: false,
type:"post",
dataType: "html",
cache: false,
url: "createTest2.php",
data: {aaa:'test'},
success:function(html) { alert(html); },
error: function(e) {alert(e);}
});
});
});
</script>
And in your createTest2.php just put this to see if ajax calls are received:
<?php
echo $_POST['aaa'];
?>