Pass PHP variable from one page to another to get correct item from button

Question

I have 2 pages, content.php & pagecontent.php, and in content.php I display products info from database into table tags and inside has a grid of 2 rows and 3 columns that I echo descriptions of the products into. One of the grids row holds a button with and thumbnail image over it so that it would link or send user to pagecontent.php for that specific product info page. On pagecontent.php the user will be able to add the product/s to a cart/wishlist(not there yet, future stuff).

Ok so far on content.php I've been able to display all products from database, from the query and while loop, works, I was able to change stuff in database and changes would happen on content.php. I've had no success on passing a variable or id with $_GET, and I believe that's what I would want to use for this case. Also don't think my ajax is correct or it's missing things. I was trying to figure out how the button would get the products PartsID (1,2,3,etc...) from database, PartsID is the column name, to later be called when clicked then pass it to pagecontent.php to get correct product info from button. If there's a better way then the way I have the being used then let me know.

content.php

<?php
  $stmt = $pdo->query("SELECT * FROM Parts");    
  while ($product = $stmt->fetch(PDO::FETCH_ASSOC)) {
?> 

<td>
  <?php
    echo '<button type="button" class="testButton" onclick="test()">
      <img src="images/APA802AC.jpg">
    </button>';          
  ?>
</td>
<td class="td-manufacturer">
  <h6>MANUFACTURER</h6>
  <p>
    <?php
      echo $product["Manufacturer"];
    ?>
  </p>
</td>

<script type="text/javascript">
  function test(itemid) {
    var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200)
        {
         window.location.assign("pageContent.php").innerHTML = xhr.responseText;
         }
       }
     xhr.open("GET", "pageContent.php?id=" + itemid, true);
     xhr.send();
  }
</script>

pagecontent.php

This page has tables as well but no grids. I need to get previous page button clicked PartsID(1,2,3,etc...) here and display that products info where I echo $row.

<div class="productInfo">
  <h2 class="productTitle">
    <?php
      echo $row["PartTitle"];
    ?>
  </h2>
</div>

<td>
  <?php
    echo $row["Availability"];
  ?>
  </td>
<td>
  <?php
    echo $row["Price"]
  ?>
</td>

I would really hope for some detailed help please. I've tried all sorts of different variations of code and research, learning as I go with little time I have, new to php and javascript/ajax so go easy on me please. I hope I was clear and makes sense. Thanks!

It isn't clear from your question why you are using AJAX, except that maybe you're doing that bcs you couldn't get normal links with `$_GET` working? From what you describe you only need plain HTML links with query string parameters. Unless you're trying to do something fancy that you haven't mentioned, there is no need for AJAX - or Javascript at all - here. There are many examples here on SO on how to pass variables between pages with PHP, have you tried those? Eg https://stackoverflow.com/questions/871858/php-pass-variable-to-next-page. — Don't Panic, Oct 22 '21 at 10:11
@Don'tPanic Yea I probably don't need ajax for this, what I have is eventually there will be a lot of products on content.php, those buttons/img will need to point to the PartsID number without me having to code every single one with a separate pagecontent.php for each. I basically have the pagecontent.php as the template page and the user will choose the product on content.php which will send I believe the php to pagecontent.php and load the info where I want it to echo. — 09jesses, Oct 22 '21 at 19:58
In that case the question I linked shows exactly what you need - the accepted answer describes how to use parameters in your links, which you can access on the next page as `$_GET`. If you've tried that and had trouble, edit your question to describe what you did, and what happened. Otherwise I think this question should be closed as a duplicate. — Don't Panic, Oct 23 '21 at 10:18

score 0 · Answer 1 · answered Oct 22 '21 at 07:00

First of all, your line

window.location.assign("pageContent.php").innerHTML = xhr.responseText;

is not doing what you think it is doing. "location.assign" loads a different page. Haven't tried myself to see if that will through an error to console for the innerHTML dereferencing, but you should check the network tab in your browser, most probably you will see 2 calls to pageContent: one with parameter (your ajax call) and 2nd one without (your location.assign call).

Secondly, if you have a multipage php application, you probably dont need ajax, as the page content is generated on the server side and after that it becomes static. Ajax is more suited for a single page applications with dynamic content.

w/o changing your application code too much, try to remove the ajax call and use only window location:

<script type="text/javascript">
  function test(itemid) {
     window.location.assign(_your_base_url_ + "pageContent.php?id=" + itemid)
  }
</script>

I believe that would allow you to see the parameter on the server side in $_GET query.

P.S. I havn't been doing php lately so the above answer is more or less a concept. You may have to check php documentation for how to access the parameters. And reading some tutorials on this subject is not such a bad idea, as it seems that you do have some gaps in understanding the overall concept of doing web applications with php.

Pass PHP variable from one page to another to get correct item from button

1 Answers1