Rajarshi Sarkar Rajarshi Sarkar - 6 months ago 8
Javascript Question

How to pass data of a JavaScript variable to another php page?

I have two pages: test.php and backend.php.

test.php has three images which when clicked takes the user to backend.php. I want the src of the image clicked to be displayed on backend.php. I am trying to achieve this task via JavaScript and Ajax but the src of the image doesn't appear on backend.php. Code for the same are given below:

test.php:

<?php
session_start();
?>

<html>
<head>
<script src="jquery-1.9.1.js">
</script>

<script>
function clickIt(data){
$.ajax({
url: 'backend.php',
data: {"imgsrc":data},
type: 'post',
success:function(res){
alert(res.message);
}
});
}
</script>
</head>

<body>
<a href="backend.php">
<img onclick="clickIt(this.src)" src="img1.jpg"/>
</a>
<a href="backend.php">
<img onclick="changeIt(this.src)" src="img2.jpg"/>
</a>
<a href="backend.php">
<img onclick="changeIt(this.src)" src="img3.jpg"/>
</a>
</body>
</html>


backend.php:

<?php
session_start();
?>

<?php
echo $_POST['imgsrc'];
echo '<a href="test.php">Back</a>';
?>


What am I possibly doing wrong?

Answer

Try this;

HTML:

<body>
    <a href="javascript:void(0);">
        <img onclick="clickIt(this.src)" src="img1.jpg"/>
    </a>
    <a href="javascript:void(0);">
        <img onclick="changeIt(this.src)" src="img2.jpg"/>
    </a>
    <a href="javascript:void(0);">
        <img onclick="changeIt(this.src)" src="img3.jpg"/>
    </a>
</body>

Jquery:

function clickIt(data){
    window.location.href = 'backend.php?imgsrc='+data; // redirect to backend.php
}

In backend.php

<?php
    echo $_GET['imgsrc']; // use $_GET
    echo '<a href="test.php">Back</a>';
?>