Second button doesn't produce form in same div as first button

Question

I have a php page with two divs. In the first div, users click a button and it brings up a form in the second div. When they submit the form, both divs refresh. All is great. But I want to add a second button to the first div to bring up a different form in the second div. I haven't been able to get this to work, either the first button stops working or the second one doesn't work. I tried making the second button a div and calling it by its ID and that didn't work. I'm an amateur and don't understand jquery very well (I think this is jquery anyway) and this is just for a project for some friends and I, so any help would be appreciated. I may just not be understanding how this works.

<script>
  $(document).ready(function () {
    $("button").click(function () {
      var handle = "<?php echo $_SESSION['name'] ?>";
      $("#infoblock").load("createhandle.html");
    });
  });
</script>

<div id="div1">
  <button id="reservename">Reserve A Name</button>
</div>

<div id="div2"></div>

---

I found a solution here: https://stackoverflow.com/a/20074373/9157720

It ended up being an issue with syntax and using a pound symbol. This is the code that worked in case anyone else has this problem.

<script>
$(document).ready(function(){
                var handle = "<?php echo $_SESSION['name'] ?>";
                $("#reservename").click(function(){
                    $("#infoblock").load( "createhandle.html");
                });
                    $("#uploadpic").click(function(){
                    $("#infoblock").load("uploadpic.html");
                });
                
            });
    </script>

<button id="reservename">Reserve A Name</button>
<button id="uploadpic">Upload A Picture</button>

Answer 1

Consider the following.

<script>
  $(document).ready(function () {
    $("button").click(function () {
      var handle = $(this).data("ref");
      var target = $(this).data("target");
      $(target).load("createhandle.html?handle=" + handle);
    });
  });
</script>

<div id="div1">
  <button data-ref="<?php echo $_SESSION['nameA']; ?>" data-target="#infoblock">Reserve A Name</button>
  <button data-ref="<?php echo $_SESSION['nameB']; ?>" data-target="#div2">Reserve B Name</button>
</div>

<div id="div2">
</div>

Your example is sort of ambiguous, so I wasn't sure what you were trying to accomplish. It's best to not mix PHP and HTML if you can. You can have a reference point in the HTML so that when you need to load something, in relationship to that button, you can pass that into a stand alone PHP Script and get the HTML you need back with .load() .

Remember that PHP is executed before the HTML is presented to the Client. So the Session data must be present in PHP Memory when the page is initially loaded.

Reference:

• https://api.jquery.com/data/
• https://api.jquery.com/load/
• jQuery $(this) keyword