CODEWITHSUNDEEP
javascriptphphtml
wes
wes

Reputation: 389

pass var to bootstrap modal where php will use this value

I have an undefined number of images on a page and I have 1 modal. I can open with these images this 1 modal, but I want to be able to know which image was clicked so I can use this information to retrieve more information in a SQL query in the modal.

I found the following post: https://stackoverflow.com/a/25060114/7183609 but here the information is passed to an input field, not a PHP value.

this is my image code:

<?php
    for ($i=0; $i < count($products); $i++) {
    ?>
    <article class="<?php echo $products[$i]['style'];?>">
        <span class="image">
            <img src="<?php echo $images[$i]['location'];?>" alt="" data-toggle="modal" data-target="#exampleModal" />
        </span>
        <a style="pointer-events: none; cursor: default;" href="">
            <h2><?php echo $products[$i]['title']; ?></h2>
            <div class="content">
                <p>
                    1000gr €<?php echo $products[$i]['prijs1000gr'];?>
                    <br />
                    500gr €<?php echo $products[$i]['prijs500gr'];?>
                </p>
            </div>
        </a>
    </article>
    <?php
    }
    ?>

and I use the basic bootstrap modal for now:

<!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

I doubt that it is possible in 1 modal and I think that I may need multiple modals but I'm not a expert in html/php/javascript

Upvotes: 0

Views: 172

Answers (2)

cssyphus
cssyphus

Reputation: 40028

In order for HTML/javascript to pass information to PHP, you should use AJAX. Here's how it works:

html - browser-side - displays the page elements and values
javascript - browser-side - detects user events (button clicks, dropdown choices) and (once an event happens) can run bits of code to do stuff
PHP - server-side - initially sends the page content (HTML/javascript/CSS code) to the browser, and can store stuff in databases, etc)

AJAX - a method of using javascript to communicate with PHP, in order to interact with a database or do other back-end things. Via ajax, js code can send information to a back-end php file, get it to look something up (for example) and send back some data, then the js (still running) can update the page.

But you cannot just send something to PHP... as if there was a natural connection between the two. You need to write a process, usually involving ajax, to do that - and on the PHP side you must receive the data and do something with it.

Because javascript (jQuery) can detect user events (e.g. clicking on an image), you can use js to get the ID of the picture and then use AJAX to send it to a back-end PHP file - which can then do something.

Simple code example:

/*
  Example just demonstrates what jQuery looks like, and how js detects events
*/
$('img').click(function(){
  tmp = this.id;
  $('#msg').html(tmp).removeClass('hid').addClass('wow');
  /* THIS part sends the ID to the back-end PHP file */
  $.ajax({
    type:'post',
     url:'name_of_your_php_file.php',
     data: 'id:' +tmp
  });
  setTimeout(function(){
    $('#msg').html('The ID was transmitted to a non-existent back-end php file');
  },500);
});

$('#msg').click(function(){
  $(this).removeClass('wow').addClass('hid');
});
*{}
#msg{position:fixed;top:0;width:40vw;height:30vh;background:#00f;opacity:0.5;}

.hid{display:none;}
.wow{padding:30vh 30vw;color:yellow;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<img id="img_41" src="https://placeimg.com/140/80/any" />

<div id="msg" class="hid"></div>

Upvotes: 1

blupointmedia
blupointmedia

Reputation: 604

wes,

You an create a JS function and on click of each image get the src and pass it to the body of the modal.

<img src="..." class="setImage">

$('.setImage').click(function(event){
    event.preventDefault();
    var e = $(this);
    var title = 'set modal title here';
    var body = 'set modal body here';
    var modal = $('#exampleModal');

    modal.find('.modal-title').html(title);
    modal.find('.modal-body').html(body);
    modal.modal("show");
});

Upvotes: 0

Related Questions