How to pass php variable to modal window

Question

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 :)

how are you opening a modal with only `css` and no `js`? you are going to want to use `js` to do this. — cmorrissey, Dec 11 '14 at 20:05
basically the window is always there but with 0 opacity and upon clicking on a href with id of the modal windows, it fades in with z-index 9999. I used this guide: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ — Arcane, Dec 11 '14 at 20:11

T0xicCode · Accepted Answer · 2014-12-11T22:14:20.247

1

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;"

edited Dec 11 '14 at 22:14

answered Dec 11 '14 at 20:09

T0xicCode

4,583
2
37
50

this looks nice, I was almost losing hope, thank you. However when I apply this to my code, it opens the modal and in the field "Name", it fills "undefined". I need to pass the at the end of the action in the form, ie. (action = "serie/edit/$id_cviceni"). – Arcane Dec 11 '14 at 20:35
Found the problem: this.dataset.serieName. The extra "s" you had there, caused an issues, probably a typo. Alright so now I have the name of the thing I clicked in the textbox. I edited it, so give me instead an id. But how can I insert it at the end of the "action" in form? – Arcane Dec 11 '14 at 21:31
Corrected. You can modify the form action using [
.action](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.action). You might want to store a "base" form, and append the id to that base as needed. It'd store the base action in a `data-base-action` attribute in the form and retrieve it using the dataset as well.
– T0xicCode Dec 11 '14 at 22:15
Alright, so in the end the onclick looks like this: onclick="serieName=this.dataset.serieName;document.querySelector('#openModal_edit form').action = serieName;return true;" And it works, so thank you very much :) – Arcane Dec 11 '14 at 22:31

How to pass php variable to modal window

1 Answers1

Linked