title: Retrieving PHP variables to Bootstrap Modal
body: <p>Okay, so i am developing a class project and I'm building a website with basic functionality. I'm new to php and javascript. </p>
  
  <p>So here is the problem. I have created a database in phpMyAdmin called 'itemdb'. I am able to add items to it through html+php and also delete them. Now what i want to do is to edit the data in the database and that is where I can't find a fix for it. </p>
  
  <p>This is what my idea is. 
  1. clicks on edit button. 
  2. Opens Bootstrap Modal.
  3. Displays the item information.
  4. Hits save changes. Database updated.</p>
  
  <p>My problem is If I set the button/input type to "submit"  surrounded with a form tag the modal will crash.
  However, the current code below does not have a form tag and the button is set as type"button" and when I click the button, it only displays one item's information even if I click another button(same data).</p>
  
  <p>Here is my code. </p>
  
  <p><em>for  testing purpose, I have created a table displaying "hello" in the first row and a button in the second row, and when I click the button, it shall display the info in the modal.</em></p>
  
  <pre><code> &lt;div class = "row col-xs-10 col-sm-10 col-md-10 col-lg-10 "&gt;
  &lt;?php
  include 'connectDB.php';
  $query = "SELECT * FROM `itemdb`;";
  $result = mysqli_query($dbconnect, $query);
  if(mysqli_num_rows($result) &gt; 0)
  {
      while($row = mysqli_fetch_assoc($result))
      {?&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;Hellow&lt;/td&gt;
              &lt;td&gt;
                  &lt;?php
                  echo "
                  &lt;button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#exampleModal\" 
                  data-whatever=\"editDB[" .  $row['itemID'] . "]\" onclick=\"window.Socation.href = 'adminItems3.php?value=" .  $row['itemID'] . "'\";&gt;Edit&lt;/button&gt;
                  ";?&gt;
                  &lt;div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"&gt;
                      &lt;div class="modal-dialog" role="document"&gt;
                          &lt;div class="modal-content"&gt;
                              &lt;div class="modal-header"&gt;
                                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                                  &lt;h4 class="modal-title" id="exampleModalLabel"&gt;New message&lt;/h4&gt;
                              &lt;/div&gt;
                              &lt;div class="modal-body"&gt;
                                  &lt;?php 
                                  if(!empty($row['itemID'])){
                                  $ID = $row['itemID'];
                                  echo $ID;
  
                                  $query1 = "SELECT * FROM `trademe`.`itemdb` WHERE `itemdb`.`itemID` = $ID;";
                                  $result1 = mysqli_query($dbconnect, $query1);
                                  if(mysqli_num_rows($result1) &gt; 0){
                                  $row1 = mysqli_fetch_assoc($result1);
  
                                  echo "
                                  &lt;table class=\"table-striped\"&gt;
                                  &lt;tr&gt;
                                  &lt;td class = \"imgBoxCol\"&gt;
                                  &lt;img class=\"imgBox img-rounded imgBox\"src=\"" . $row1['img_path'] . "\"&gt;&lt;/img&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                  &lt;p &gt;Ad Title: &lt;input name=\"editadTitle\" value=\"" . $row1['adTitle'] . "\"/&gt;&lt;/p&gt; 
                                  &lt;p&gt;Item Name:&lt;input name=\"edititemName\" value=\" " . $row1['itemName'] . "\"/&gt; &lt;/p&gt;
                                  &lt;p&gt;Condition:&lt;textarea name=\"editcond\" type=\"text\" &gt;" . $row1['cond'] . "&lt;/textarea&gt;&lt;/p&gt;
                                  &lt;p&gt;Description:&lt;textarea name=\"editdescription\"  type=\"text\" &gt; " . $row1['description'] . " &lt;/textarea&gt;&lt;/p&gt;
                                  &lt;p&gt;Method:&lt;input name=\"editmethod\" value=\"" . $row1['method'] . " \"/&gt;&lt;/p&gt;
                                  &lt;p&gt;Category:&lt;input name=\"editcategory\" value=\"" . $row1['category'] . " \"/&gt;&lt;/p&gt;
                                  &lt;/td&gt;
                                  &lt;/tr&gt;
  
                                  &lt;/table&gt;
                                  ";
                                  }}?&gt;
                              &lt;/div&gt;
                              &lt;div class="modal-footer"&gt;
                                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                                  &lt;button type="button" class="btn btn-primary"&gt;Send message&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;?php//opening php// ending html code.  
      }
  }
  ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>script</strong></p>
  
  <p></p>
  
  <pre><code>$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var Eid = button.data('whatever') // Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text('New message to ' + Eid)
     modal.find('.modal-body input').val(Eid)
    // document.location="adminItems3.php?idSelected=" + Eid
  })
  </code></pre>
  
  <p>I have been trying to fix this for days. If you guys have better ideas of passing at least the item ID somehow, so that my modal will be able to retrieve it, then that would be really great!</p>
  
  <p>Is there any way to pass the variable, so that i can retrieve it through my modal without crashing?</p>
  
  <p>[Image of the 3rd button when clicked][2]</p>
  
  <p><em>it displays the information of the first buton</em>
  Thanks again !! </p>
  
  <p><a href="http://i.stack.imgur.com/QE0Z3.jpg" rel="nofollow">enter image description here</a></p>