pass var to bootstrap modal where php will use this value

Question

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

Answer 1

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>

Answer 2

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