从 slider 页面调用 PHP 文件，如何返回活动幻灯片？

Question

I have a simple home-grown slider whose input is pulled from a MySQL database using PHP that echos the HTML for the slider page to build it. I am developing functionality to "add a comment" to the slider pictures which pulls up a hidden form when you click on the "Add a Comment" button. Once filling in that form and doing a Submit, I call an "updateComment.php" file that pulls the form posted values and does a CONCAT_WS to the Comments field for that picture in the slider sequence in the database.

I use a header('Location: '.$_SERVER['HTTP_REFERER']); call at the end of the "updateComment.php" file to return to the slider page whose form submit called it. When it returns, it returns to the first slide page instead of the active slide page. It makes sense to me why that happens using that redirect method, but I am at a loss to figure out how to get it to return to the active slide page. I've been reading up on PHP redirects, but can't find anything that will work. Any sage words of advice or a clue how to do this?

Doing a Page Source of the slider page and stripping out all the detailed database field info built on that page, here is the code around the form's call to "updateComment.php".

<div style="text-align: center;">
   <button class="commentbutton" onclick="showForm('formElementTimothyTopp')">Add a memory or story of Tim</button> 
</div>
<div>
  <form id="formElementTimothyTopp" style="display: none;" action="updateComment.php" method="post" autocomplete="off">
     <input type="hidden" value="Timothy" id="fname" name="fname">
     <input type="hidden" value="Topp" id="lname" name="lname">
     <div class="formitemname">Name:</div>
     <input class="formitem shortentry" type="text" maxlength="40" value="" id="commentor" name="commentor" placeholder="Your Name">
     <div class="formitemnamelonger">Your Memory or Story of Tim:</div>
     <textarea class="formitem longentry" type="text" maxlength="2000" value="" id="memory-story" name="memory-story" placeholder="Add your memory or story here" rows="5"></textarea>
     <button style="text-align: center; margin: 10px 0 10px 240px;" type="submit" name="submit" id="submit">Submit</button>
  </form>
<div>

Here is the actual "updateComments.php" code

<?php
   $conn = mysqli_connect("localhost", "root", "", "classmateinfo");
   if ($conn-> connect_error) {
      die("Connection failed:". $conn-> connect_error);
   }
   $firstname = $_POST['fname'];
   $lastname = $_POST['lname'];
   $memory = !empty($_POST['memory-story'])?$_POST['memory-story']:'';
   $name = !empty($_POST['commentor'])?$_POST['commentor']:'';
   $toappend = $memory . "<br>-- " . $name . "<br><div><img src=images/spacer10.gif></div>";
   $sql = "UPDATE rip SET Comments = CONCAT_WS('',Comments,'$toappend') WHERE (ClassmateNameFirst = '$firstname' AND ClassmateNameLast = '$lastname')";
   $result = $conn-> query($sql);
   header('Location: ' .$_SERVER['HTTP_REFERER']);
?>

Slider functional code is:

<script>
function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides"); 
  if (n > slides.length) {slideIndex = 1};
  if (n < 1) {slideIndex = slides.length};
  for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none";
  }
  slides[slideIndex-1].style.display = "block";
}
</script>

The rest of the info on the slider page besides the active image displayed includes the Comments field and that page is built using an HTML table. Each slider page is its own table, dozens of images with a table entry for each, all built by the database pulls using PHP code to render the page.

Answer 1

My idea is to submit current_slide along with the form. Then server knows to redirect back to page with extra param "$page?current_slide=". $current_slide; "$page?current_slide=". $current_slide; . This param would then be analyzed when initializing the slider, to start from the correct slide.

Some code:

 function update_current() { var current_slide = 12; // get from slider document.getElementById("current_slide").value = current_slide; }

 <form id="formElementTimothyTopp" style="display: none;" onsubmit="update_current()" action="updateComment.php" method="post" autocomplete="off"> <input type="hidden" value="Timothy" id="fname" name="fname"> <input type="hidden" value="Topp" id="lname" name="lname"> <input type="hidden" value="" id="current_slide" name="current_slide"> <div class="formitemname">Name:</div> <input class="formitem shortentry" type="text" maxlength="40" value="" id="commentor" name="commentor" placeholder="Your Name"> <div class="formitemnamelonger">Your Memory or Story of Tim:</div> <textarea class="formitem longentry" type="text" maxlength="2000" value="" id="memory-story" name="memory-story" placeholder="Add your memory or story here" rows="5"></textarea> <button style="text-align: center; margin: 10px 0 10px 240px;" type="submit" name="submit" id="submit">Submit</button> </form>

Then on server:

// TODO: append query string parameter in a better way
header('Location: ' .$_SERVER['HTTP_REFERER'] . "?current_slide=" . $_POST["current_slide"]);

Then back on load of client:

const urlParams = new URLSearchParams(window.location.search);
const current_slide = urlParams.get('current_slide');

// TODO: goto slide current_slide