将php数据/变量传递给模式

Question

I have some data being created(generated from database) using a while loop. Each set of data carries some form of id and its corresponding button is added to it. Now, when I click a button, I'd like to pass the id(single php variable) of the data related to this button to a modal window(that has a form) that pops and also make it the value of an input field. Here's my code so far:

The data from database:

<?php while ($data = mysqli_fetch_assoc($data_set)) { ?>
<div class="w3-section w3-row w3-card-2">
  <div class="w3-half">
    <div class="apartment-image w3-card-4">
      <header class="w3-container">
        <h4><?php echo $data['data_name']; ?></h4>
      </header>
      <div class="w3-container">
        <img src="<?php echo "images/".$data['Image1']; ?>" class="w3-image" alt="<?php echo $data['dataimgname']; ?>">
      </div>
      <footer class="w3-contanier w3-border-top">
        <div class="w3-border-right">
          <button class="w3-btn w3-btn-block" type="button" name="btnBook" id="modalOpener" onclick="document.getElementById('book').style.display='block';">
            Book or Request Tour
          </button>
        </div>

The Modal:

<div id="book" class="w3-modal">
<div class="w3-modal-content">
  <header class="w3-container">
    <span onclick="document.getElementById('book').style.display='none'" class="w3-closebtn">
      &times;
    </span>
    <h2>Book or Request Tour</h2>
  </header>
  <div class="w3-container">
    <form class="w3-form" action="bookntour-handler.php" method="post">
      <div class="w3-group">
        <label class="w3-label" for="fullname">Full Name:</label>
        <input class="w3-input" type="text" name="fullname" value="">
      </div>
      <label class="w3-label" for="email">E-mail:</label>
      <input class="w3-input" type="email" name="email" value="">
      <label class="w3-label" for="telephone">Telephone:</label>
      <input class="w3-input" type="text" name="telephone" value="">
      <label class="w3-label" for="dataname">Data Name:</label>
      <input class="w3-input" type="text" name="dataname" value="">
      <div class="w3-group">
        <input class="w3-btn" type="submit" name="btnSubmit" value="Submit">
      </div>
    </form>
  </div>
  <footer>
  </footer>
</div>

Like I said earlier, I want to pass the id associated with the button but from my code there is nothing that mentions about "id" so let's use.

<?php echo $data["data_name"]; ?>

When I open the modal window, I'd like this variable to be made as the value for input:

 <label class="w3-label" for="dataname">Data Name:</label> <input class="w3-input" type="text" name="dataname" value=""> 

I have looked at a couple of options so far but most of them seem unnecessary in my case or I simply don't understand them. Like this and this and this . This seems like a workable solution but it requires me to fetch the whole data again, from the database(using AJAX) which I do not want. I just want that one value.

I am using W3CSS for my layouts and creating the modal. A solution in jQuery/JavaScript or PHP(or both) will be appreciated. Thank you!

---

Update

So, I somehow managed to solve part of the problem. I added this function to my external JavaScript file:

 function showModal() { document.forms["bookntourForm"]["apartmentno"].value = document.getElementsByClassName("modalOpener")[0].getAttribute("value"); document.getElementById('book').style.display='block'; } 

Then the code for the button that calls the above function looks like this:

 <button class="w3-btn w3-btn-block modalOpener" type="button" name="btnBook" onclick="showModal()" value="<?php echo $data['data_name']; ?>"> Book or Request Tour </button> 

This brings up a new problem. Whenever I open the modal, the value for <input class="w3-input" type="text" name="dataname" value=""> on the modal is the same for all modals although they are different when each button is generated.

Answer 1

You can pass your id through ajax to the backend and retrieve necessary data regarding that ID by using a query, Then set values to the necessary place inside the success method. As you say, I don't think as a good suggestion to use data_name instead of id. you can set your id in hidden field and use it. because "data_name" will not be good solution to retrieve data by unique field.

Answer 2

I don't know if I have done this in a proper manner, but it was as simple as this. I changed the value of onclick attribute of the button to:

  <button class="w3-btn w3-btn-block modalOpener" type="button" name="btnBook" onclick="showModal('<?php echo $apartment["ApartmentNo"]; ?>')"> Book or Request Tour </button> 

The showModal() function in the external JS now looks like this:

 var aptNo; function showModal(aptNo) { document.forms["bookntourForm"]["apartmentno"].value = aptNo; document.getElementById('book').style.display='block'; } 

It now works the way I wanted.