Passing js variables to php using jquery

Question

I'm trying to do a realllly simple post of a javascript variable to a php file.

Jquery bit in keyinput.php:

<script type="text/javascript">

var imgArray = [<?php echo implode(',', getImages($cat, $site)) ?>];
$(document).ready(function() {      

    var img = document.getElementById("showimg");
    img.src = imgArray[<?php echo $imgid ?>];
    var imgIndex = <?php echo $imgid ?>;

    $(document).keydown(function (e) {
        var key = e.which;
        int rightarrow = 39;
        int leftarrow = 37;
        int random = 82;

        if (key != rightarrow && key != leftarrow && key != random) {
            return;
        }
        else {
            //next image: right arrow
            if (key == rightarrow) 
            {
                imgIndex++;
                if (imgIndex > imgArray.length-1) 
                {
                    imgIndex = 0;
                }
                img.src = imgArray[imgIndex];
            }
            //last image: left arrow
            if (key == leftarrow) 
            {
                if (imgIndex == 0) 
                {
                    imgIndex = imgArray.length;
                }
                img.src = imgArray[--imgIndex];
            }
            //random: r
            if (key == random) 
            {
                imgIndex = Math.floor((Math.random()*(imgArray.length-1))+1);
                img.src = imgArray[imgIndex];
            }   
        }
        $.post('./templates/viewcomic.php', {variable: imgIndex});
    });
});

</script>
<?php
function  getImages($catParam, $siteParam) {
include './scripts/dbconnect.php';

if ($siteParam == 'artwork') { 
    $table = "artwork"; 
}       
else { 
    $table = "comics"; 
}   

if ($catParam != null) {
    $catResult = $mysqli->query("SELECT id, title, path, thumb, catidFK FROM $table WHERE catidFK = $catParam");
}
else {
    $catResult = $mysqli->query("SELECT id, title, path, thumb, catidFK FROM $table");
}

$img = array();
while($row = $catResult->fetch_assoc()) 
{
    $img[] = "'" . $row['path'] . "'";
}
return $img;
}
?>

PHP bit in viewcomic.php:

include './scripts/keyinput.php'; 

$JSIndex = $_POST['variable'];
echo "Index = " . $JSIndex;
//$JSIndex should be equal to the javascript variable imgIndex... but it outputs nothing

Any thoughts would be extremely helpful! I'm trying to get my comics website to go live.

Thanks!

Where do you expect to see the output? You are doing an AJAX post, and you have no success handler in the $.post(). Look in your browser's network console to see the response. — Michael Berkowski
– Michael Berkowski, Commented Nov 14, 2012 at 1:54
Have you tried putting single quotes around your var like var imgIndex = '<?php echo $imgid ?>'; — Zak
– Zak, Commented Nov 14, 2012 at 1:54
For debugging purposes, it's better to do var_dump($_POST); and inspect the results in the network console of your browser. — Ja͢ck
– Ja͢ck, Commented Nov 14, 2012 at 1:56
Is your included keyinput.php destroying / manipulating the $_POST superglobal? Your code looks correct to me. — David Müller
– David Müller, Commented Nov 14, 2012 at 2:07

jeroen · Accepted Answer · 2012-11-14 15:20:54Z

1

Your logic is wrong: at the moment you define your key variable, e is undefined. Then you attach your event handler inside an if statement that will always evaluate to false so that will never work.

The assignment to key should be inside your event handler and the conditional needs to go, you already have that inside your event handler.

Edit: you should also only do your ajax call if one of your action keys is pressed (put it inside the event handler) and do something with the result.

Edit 2: Checkout the manual on $.post, you should add a callback function to process the return value of your php script.

For example:

$.post(
       './templates/viewcomic.php',
       { variable: imgIndex },
       function(data) {    /* data contains what you have echoed out in your php script */
           alert(data);
       }
      );

edited Nov 14, 2012 at 15:20

answered Nov 14, 2012 at 3:21

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3871 Over a year ago

oops oops I didn't mean to write it like that, lemme fix

jeroen Over a year ago

@Growler You are still not using the return value of your ajax function.

user3871 Over a year ago

can you please explain? I thought I could do a simple $.post("php file I want to call", {variable: imgIndex}) and capture that imgIndex javascript value in the php file

user3871 Over a year ago

I've tried that. "data" ends up containing all of the html for the php file. But data should contain the javascript value I want

jeroen Over a year ago

@Growler Then you should make sure that your script only outputs the javascript value you want.

|

Collectives™ on Stack Overflow

Passing js variables to php using jquery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related