Can't pass a javascript variable to php variable - javascript

I tried all the stackoverflow posts about this, I spend two days and still no success 😔, I am trying to pass a JavaScript variable to a PHP variable, I tried this for example and still not succeed, it does not print noting on the screen, here is a full code:
here cc.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//treehouse code
var $my_variable = "something";
$.ajax({
url: 'cc.php',
data: {x: $my_variable},
type: 'POST'
});
});
</script>
</body>
</html>
and here cc.php:
<?php
if(isset($_POST['x'])){
echo $_POST['x'];
}
?>
What should I do?

You don't do anything with the result of the AJAX call. Add a callback function:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//treehouse code
var $my_variable = "something";
$.ajax({
url: 'cc.php',
data: {x: $my_variable},
type: 'POST'
}).done(function (result) {
alert(result); // <--- do something with the result
});
});
</script>
</body>
</html>
And your PHP code remains unchanged:
<?php
if(isset($_POST['x'])){
echo $_POST['x'];
}
?>
What you do in that callback function is up to you. You can alert() the value, log it to the console, write it somewhere on the page, etc.

If you want to print it on the screen you should use success: function(data)$('#result').html(data)} here is code example:
$(document).ready(function() {
$('#sub').click(function() {
var $my_variable = "something";
$.ajax({
url: 'cc.php',
type: 'POST',
data: { x: $my_variable },
success: function(data) {
$('#result').html(data)
}
});
});
});

You can try $.post too
$.post( "cc.php", { x: $my_variable} );

Related

AJAX data variable not posting to PHP script, yet $_POST is set

This is driving me crazy. I'm trying to post a variable to a PHP script using AJAX but while I can verify that $_POST is set, the varibale remains undefined.
I've used almost identical code elsewhere and it works fine - I just cant see what the problem is here.
Here is a very stripped down version of the code -
The JS
$(function(){
$('#load_more_comments').click(function(){
var newLimit = 40;
$.ajax({
url: "scripts/load_comments.php",
data: { limit: newLimit },
type: "post",
success: function(result){
// execute script
},
error: function(data, status, errorString)
{
alert('error');
}
});
return false;
});
});
The PHP
if (isset($_POST)) {
echo "POST is set";
if (isset($_POST['limit'])) {
$newLimit = $_POST['limit'];
echo $newLimit;
}
}
UPDATE
var_dump($_POST) returns array(0) { } so I know that AJAX is definitely is not posting any values
Using slightly modified version of the above I am unable to reproduce your error - it appears to work fine.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
ob_clean();
if( isset( $_POST['limit'] ) ){
echo $_POST['limit'];
}
exit();
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<script src='//code.jquery.com/jquery-latest.js'></script>
<script>
$(function(){
$('#load_more_comments').click(function(){
var newLimit = 40;
$.ajax({
url: location.href, //"scripts/load_comments.php",
data: { limit: newLimit },
type: "post",
success: function(result){
alert( result )
},
error: function(data, status, errorString){
alert('error');
}
});
return false;
});
});
</script>
</head>
<body>
<!-- content -->
<div id='load_more_comments'>Load more...</div>
</body>
</html>
Try :
if (count($_POST)) {
Instead of
if (isset($_POST)) {

How to trigger a method by triggering the return of a second page?

Page1.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<input type="hidden" value="valuetest" id="idinput">
<div onclick="myfunction()" style="height: 30px;width: 30px;background: gray;">
<div id="receive"></div>
</div>
<script type="text/javascript">
function myfunction() {
$.ajax({
type: "POST",
url: "page2.php",
data: {
sendpost: $('#idinput').val()
},
success: function(data) {
$('#receive').html(data);
}
});
function myfunction2(){
}
}
</script>
</body>
</html>
Page2.php
<?php
$var = $_POST['sendpost']; //This line is not in use
echo "return";
?>
This code is working perfectly! Page1 sends the value valuetest to page2 without the need to refresh the page. The echo of page2 returns the value return to page1 inserting this into div="receive". So far so good. I want instead of having a div="receive" receive a value, it triggers the function myfunction2 or any other method that allows me to style the page1 (css).
In short: the return of page2 should only serve to call a method of page1.
You can just pass your function as a success callback.
<script type="text/javascript">
function myfunction() {
$.ajax({
type: "POST",
url: "page2.php",
data: {
sendpost: $('#idinput').val()
},
success: myfunction2
});
function myfunction2(){
}
}
</script>
And if you want to return a string that trigger a function, you can return the name of the function and pass it to the eval() function which evaluate a string.
// In your php
<?php
$var = $_POST['sendpost']; //This line is not in use
echo "myfunction2()";
// In your js
success: function(data) {
eval(data); // Call the function returned by your PHP
}

Getting information form json encode

main.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="jsfile.js"></script>
</head>
<body>
<button onclick="cart(0)"> hi </button>
<p id="disp"></p>
</body>
</html>
jsfile.js
function cart(id1)
{
var id=id1;
//alert("enterd "+id);
document.getElementById("disp").innerHTML ="hi";
if (window.jQuery) {
// jQuery is available.
// Print the jQuery version, e.g. "1.0.0":
//alert(window.jQuery.fn.jquery);
}
$.ajax({
url:"add.php ",
type:"POST",
data:{
item_id: id,
},
success:function(response) {
document.getElementById("disp").innerHTML =response.value1;
},
error:function(){
alert("error");
}
});
}
add.php
<?php
if(isset($_POST['item_id'])){
//if(count($_POST)>0)
echo json_encode(array("value1" => "hello", "value2" => "hi"));
}
?>
am collection the informaton from add.php to jsfile.js ... I am not able to get information from the json array.. I am trying to get information by respnse.value1. But it returns me undefined.. what might be the error??
You'll have to parse the JSON before using it. Change your success function to this -
success:function(response) {
var res = JSON.parse(response);
document.getElementById("disp").innerHTML = res.value1;
},

What is wrong with my ajax call to php file in data section?

So I am able to get my php value into javascript variable but I don't think my script.js is finding it. There of course are alot of files missing for the sake of keeping this question clean but my problem is that script.js get schoolId as undefined instead of the actual value but when I console.log schoolId i get a value of "1"(first page has id 1 so that works).
Header.php :
<?php
//gets current page id
$schoolOfficialId = $specificSchool[0]["id"];
?>
<head>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<input type="hidden" id='schoolOfficialId' value="<?php echo $schoolOfficialId;?>"/>
<script type="text/javascript">
var schoolId = $('#schoolOfficialId').val();
</script>
</body>
script.js: ajax call here NOTE: in the ajax i know the data is having trouble finding schoolId from the header.php to send to php file.
// execute an ajax query to push id of page to load_more.php
$.ajax({
url: 'load_more.php',
type: 'POST',
data: {schoolId:schoolId},
success:function(data){
console.log("working");
}
});
my load_more.php:
if (isset($_POST['schoolId'])) {
echo "yes";
}else {
echo "nope";
}//keeps echoing nope because the schoolId is not received
The problem is that you have the script running before the declaration.
<script type="text/javascript" src="js/script.js"></script> is in head, but var schoolId = $('#schoolOfficialId').val(); is at the bottom of the page.
Include the script after declaring schoolId.
<head>
</head>
<body>
<input type="hidden" id='schoolOfficialId' value="<?php echo $schoolOfficialId;?>"/>
<script type="text/javascript">
var schoolId = $('#schoolOfficialId').val();
</script>
<script type="text/javascript" src="js/script.js"></script>
</body>
P.S. despite other answers, data: {schoolId:schoolId}, is perfectly fine unless the keyname conflicts with a reserved word.
Load ajax code after defining var schoolId and also check source code whether php printing value for schoolId correctly or not and also do not forget to use $(document).ready()
<script type="text/javascript">
$(document).ready(function(){
var schoolId = $('#schoolOfficialId').val();
$.ajax({
url: 'load_more.php',
type: 'POST',
data: {schoolId:schoolId},
success:function(data){
alert(data);
}
});
})
</script>
PHP:
if (isset($_POST['schoolId'])) {
echo $_POST['schoolId'];
}else {
echo "nope";
}
By running the following i can see yes in alert ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>stackoverflow</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(document).ready(function () {
var schoolId = $("#schoolOfficialId").val();
$.ajax({
url: 'ajax.php',
type: 'POST',
data: {schoolId: schoolId},
success: function (data) {
alert(data);
}
});
});
</script>
</body>
</html>
Ajax file (ajax.php) :
if (isset($_POST['schoolId'])) {
echo "yes";
} else {
echo "nope";
}

javascript - animate numbers with json data

I have a problem with animated number effect when grabbing data from json.
Animated number effect works correctly if it loads from html, but if I load it from json it doesn't work.
html code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.animateNumbers.js" type="text/javascript"></script>
</head>
<body>
Time from html (<span class="animate-number" data-value="2" data-animation-duration="600"></span>:<span class="animate-number" data-value="33" data-animation-duration="600"></span>h)
<div id="display_time"></div>
<script>
$('.animate-number').each(function(){
$(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-animation-duration")));
})
</script>
<script>
$(function time(){
$.ajax({
type: "POST",
url: "data_time.php",
data: "get_time=true",
dataType:'json',
success: function(data){
$("#display_time").html(data.time);
}
});
});
</script>
</body>
</html>
data_time.php code:
<?php
if(isset($_POST['get_time']))
{
$time[] = 'Time from json (<span class="animate-number" data-value="2" data-animation-duration="600"></span>:<span class="animate-number" data-value="33" data-animation-duration="600"></span>h)';
echo json_encode(array('time' => $time ));
}
;?>
preview: click
I think the problem is with callback. Try this,
<script>
function runCallback(){
$('.animate-number').each(function(){
$(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-animation-duration")));
})
}
</script>
<script>
$(function time(){
$.ajax({
type: "POST",
url: "data_time.php",
data: "get_time=true",
dataType:'json',
success: function(data){
$("#display_time").html(data.time);
runCallback();
}
});
});
</script>
Use $time instead of $time[]. There's no need for it to be an array.
Take out dataType:'json'. You are not SENDING json.

Categories