CODEWITHSUNDEEP
phpmysqlhtmlapachetemplates
Arcane
Arcane

Reputation: 699

How to pass php variable to modal window

I am making a simple page and I have found this little problem. I have this in my template:

<?php foreach ($this->vypis_serie as $value) : ?>

        <div class="serie">
          <div id="serie_header">
            <a href="cviceni/cislo/<?= $value['id_serie'] ?>"><?= $value['nazev_cviceni'] ?></a> 
          </div>

          <div id="serie_info">
            <p>Number of excercises: TODO</p> 
            <p>Sport type: <?= $value['typ'] ?></p>
            <p>KCal summary: <?= $value['kcal'] ?></p>
          </div>

            <div class="button_upravit"><a href="#openModal_edit">Edit</a></div>
            <div class="button_smazat"><a href="serie/smazat/<?= $value['id_serie'] ?>" onclick="return confirm('Are you sure you want to delete it?');">Delete</a></div>            
        </div>
      <?php endforeach; ?>

basically it is a block that fills in information about particular exercise (it is a sport app). SO If I have 3 entries in DB, it will print this code three times with corresponding info.

The problem I have is with the edit button, which upon clicking opens modal window. It is made purely with CSS, so no Javascript.

When I click the button, it jumps to this code:

<div id="openModal_edit" class="modalDialog">
          <div>
            <a href="#close" title="Zavřít" class="close">X</a>
            <div id="editace">

                <form id="platba" action="serie/edit/" method="post" enctype="multipart/form-data">   

              <fieldset>
                <legend>Edit serie</legend>
                <ol>
                    <li>
                      <label for="name">Name of the series</label>
                      <input id="name" name="nazev_cviceni" type="text" required autofocus>
                  </li>
                  <li>
                      <label for="typ">Sport type</label>
                      <select name="typ">
                          <option value="Kolo">Bike</option>
                          <option value="Běhání" selected="selected">Running</option>
                      </select>
                  </li>
              </ol>
              </fieldset>

              <fieldset>
                <button type="submit">Save</button>
              </fieldset>
              </form>
              </div>     
          </div>
        </div>

But since I jump to div id and I am not using a new page where I could choose a controller and pass a variable, I need somehow to pass the variable (id of the exercise) to the modal window, so I can know which of the possible buttons I have clicked. Is there any way to do it, without the need to rewrite all other pages where I have used this modal window?

I can't use another foreach like in the first part, because the modal window is always a single object that appears, unlike all the entries on the page that are there as many times as there are entries in the DB.

Hope that it is understandable, sorry for my English :)

Upvotes: 0

Views: 4582

Answers (1)

T0xicCode
T0xicCode

Reputation: 4931

The simplest way to do this using a single modal window involves adding some javascript code to your page.

First, add the relevant information to the edit link, with a new data-serie-<name> for each piece of data you want to pass: 

<a href="#openModal_edit" data-serie-name="<?= $value['nazev_cviceni'] ?>" ...>

Next, add an onclick event handler to that same link. This handler will extract the embedded data from the <a> element and inject it in the modal window. The dataset element provides access to the data-* attributes from javascript

// Example
onclick="serieName=this.dataset.serieName;document.querySelector('#openModal_edit input#name').value = serieName;return true;"

Upvotes: 1

Related Questions