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
– Carl Binalla, Commented Mar 3, 2017 at 4:30

Kaushali de Silva · Accepted Answer · 2017-03-03 04:41:34Z

0

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.

answered Mar 3, 2017 at 4:41

Kaushali de Silva

2411 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KipchirchirIan · Accepted Answer · 2017-03-09 22:23:58Z

0

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.

answered Mar 9, 2017 at 22:23

KipchirchirIan

5113 bronze badges

Collectives™ on Stack Overflow

passing php data/variable to a modal

Update

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related