Mr_Andrew Mr_Andrew - 3 years ago 61
Javascript Question

Click the image and display in another page about it

I need to click the image and link to another page based on the product that is clicked, my page always display the same product even when i click other products. Below is the code for the main page

<?php
$query = "SELECT * FROM tbl_product ORDER BY id ASC"; //order by ID ascending order
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
?>
<div id="products" class="productsContainer">
<div class="responsive"> <!-- OUTER BOX OF PRODUCT -->
<div class="gallery"> <!-- INNER BOX FOR PRODUCT -->
<a href="box.php?id=".$row['id']><img src="images/<?php echo $row["image"]; ?>" class="img-responsive" /></a><br /> <!-- IMAGE OF PRODUCTS -->
<h4 class="text-info"><?php echo $row["name"]; ?></h4> <!-- NAME OF PRODUCT -->
<h4 class="text-danger">$ <?php echo $row["price"]; ?></h4> <!-- PRODUCT PRICE -->
<input type="text" name="quantity" id="quantity<?php echo $row["id"]; ?>" class="form-control" value="1" /> <!-- QUANTITY PRODUCT -->
<input type="hidden" name="hidden_name" id="name<?php echo $row["id"]; ?>" value="<?php echo $row["name"]; ?>" /> <!-- NOT SHOWN -->
<input type="hidden" name="hidden_price" id="price<?php echo $row["id"]; ?>" value="<?php echo $row["price"]; ?>" /> <!-- NOT SHOWN -->
<input type="button" name="add_to_cart" id="<?php echo $row["id"]; ?>" style="margin-top:5px;" class="btn btn-warning form-control add_to_cart" value="Add to Cart" /> <!-- ADD TO CART BUTTON -->

</div>
</div>
</div>
<?php
}
?>


Here is another page code(when clicked into the product)

<div class="containertype1">
<div>
<img id="mainImage" style="border:3px solid grey"
src=" images/005.jpg" height="500px" width="540x"/>
<br />

<div id="divId" onclick="changeImageOnClick(event)">
<?php

echo "<img class='imgStyle' src='images/001.jpg' />";
echo "<img class='imgStyle' src='images/002.jpg' />";
echo "<img class='imgStyle' src='images/003.jpg' />";
echo "<img class='imgStyle' src='images/004.jpg' />";
echo "<img class='imgStyle' src='images/005.jpg' />";
?>
</div>
<script type="text/javascript">

var images = document.getElementById("divId")
.getElementsByTagName("img");

for (var i = 0; i < images.length; i++)
{
images[i].onmouseover = function ()
{
this.style.cursor = 'hand';
this.style.borderColor = 'red';
}
images[i].onmouseout = function ()
{
this.style.cursor = 'pointer';
this.style.borderColor = 'grey';
}
}


function changeImageOnClick(event)
{
event = event || window.event;
var targetElement = event.target || event.srcElement;

if (targetElement.tagName == "IMG")
{
mainImage.src = targetElement.getAttribute("src");
}
}

</script>
</div>
</div>

Answer Source

The problem is that you forgot to use your opening PHP tag before attempting to write a PHP variable ($row['id']).

Consider the following:

<a href="box.php?id=".$row['id']>
    <img src="images/<?php echo $row["image"]; ?>" class="img-responsive" />
</a>

In the above, your link points to box.php?id=. You never actually open your PHP tag to reference $row['id']. When your HTML reaches the dot, it gets confused, as it is expecting an attribute for the <a> tag (like href).

To correct this, simply make sure to open (and close) the PHP tags, and echo out the $row['id'] in the following format:

<a href="box.php?id=<?php echo $row['id']; ?>">
    <img src="images/<?php echo $row["image"]; ?>" class="img-responsive" />
</a>

Hope this helps! :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download