passing php data/variable to a modal

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.

Although doing this may pose security problems, one way is to pass the ID as a GET, then let the modal check if there is a value for that GET — Carl Binalla, Mar 03 '17 at 04:30

score 0 · Answer 1 · answered Mar 03 '17 at 04:41

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.

score 0 · Answer 2 · answered Mar 09 '17 at 22:23

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.

passing php data/variable to a modal

Update

2 Answers2