CODEWITHSUNDEEP
javascriptphphtmlcssajax
peter
peter

Reputation: 169

trying to change content on a page based on click

im trying to change the photo content of a page. at the top of the page i have a horizontal photo strip, which uses GET to find PHOTOTYPE so the website knows which photo strip to load. all of the photos on the lower page are related to which photo in the strip is selected. i want to be able to change the lower content of the page based on which photo in the upper strip is clicked.

here is some code i have so far

    <?php
include_once("resources/init.php");
include_once("db_conx.php");
$sql = "SELECT * FROM photos WHERE id= '$idd'";
$query = mysqli_query($db_conx, $sql);
    while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
        $description = $row["description"];
        $filename = $row["filename"];
        $thumb1 = $row["thumb1"];
        $thumb2 = $row["thumb2"];
        $thumb3 = $row["thumb3"];
        $desc1 = $row["desc1"];
        $desc2 = $row["desc2"];
        $desc3 = $row["desc3"];
}
?>

$idd is supposed to change based on which image in the strip is clicked, to display all related photos below, i cant get it to work, how can i change the $idd to the $id of the clicked image without reloading the page?

    function menuclick(){
    $idd = "<?php echo $id ?>";
}

Upvotes: 1

Views: 71

Answers (1)

Ahs N
Ahs N

Reputation: 8366

This is what I came up with:

$('img').click(function(){
    $('#iid').val($(this).attr('id'));
});

Here is the JSFiddle

This is the javascript version:

var images = document.querySelectorAll('img');
for (i = 0; i < images.length; i++) {
    images[i].addEventListener("click", function(){
        iid.value = this.id;
    });
}

Here is the JSFiddle demo

Upvotes: 2

Related Questions