Как отправить личное сообщение с помощью AJAX, PHP и MySQL?

Question

Я пытаюсь сделать сценарий, чтобы отправить PM пользователю, который выбран из MySQL.

У меня есть список пользователей:

http://i.stack.imgur.com/9fRZV.png

Когда я нажимаю кнопку PM, я получаю Javascipt Sceen:

http://i.stack.imgur.com/4bJ9A.png

Как заполнить полей Javascript экрана со значениями от пользователей список автоматически и отправлять значения в другой файл PHP (с AJAX)?

Код списка пользователей таблицы:

 <!-- Table --> 
     <table class="table table-condensed"> 
     <tr class="bg_h"> 
     <th>Username</th> 
     <th>Email</th> 
     <th>Rank</th> 
     <th>Active?</th> 
     <th>Registration date</th> 
     <th>IP</th> 
     <th>PM</th> 
     </tr> 

     <?php 
     $sql = "SELECT * FROM users ORDER BY user_id ASC"; 
     $query = $dbh->prepare($sql); 
     $query->execute(); 
     $list = $query->fetchAll(); 

     foreach ($list as $row) { 
     ?> 
     <tr class=""> 
     <td><?php echo $row['user_name']; ?></td> 
     <td><?php echo $row['user_email']; ?></td> 
     <td> 
     <?php 
     PHP code of getting user rank. 
     ?> 
     </td> 
     <td> 
     <?php 
     PHP code to chech is user active. 
     ?> 
     </td> 
     <td> 
     <?php echo $row['user_registration_datetime']; ?> 
     </td> 
     <td> 
     <?php echo $row['user_registration_ip']; ?> 
     </td>   


     <td> 
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#send-pm">@PM</button> 
     <div class="modal fade" id="send-pm" tabindex="-1" role="dialog" aria-labelledby="send-pm-label" aria-hidden="true"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="send-pm-label">Send personal message</h4> 
     </div>  
     <div class="modal-body">   
     <div class="form-group"> 
     <label for="name" class="control-label">Receiver name</label> 
     <textarea style="height:35px;" name="name" id="name" class="form-control" ></textarea> 
     </div> 
     <div class="form-group"> 
     <label for="email" class="control-label">Email</label> 
     <textarea style="height:35px;" name="email" id="email" class="form-control" ></textarea> 
     </div> 
     <div class="form-group"> 
     <label for="message" class="control-label">Message</label> 
     <textarea style="height:250px;" name="message" id="message" class="form-control" ></textarea> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
     <button type="button" id="submit" class="btn btn-primary">SEND</button> 
     </div>  
     </div> 
     </div> 
     </div> 
     </td> 
      </tr> 
      <?php 
      } 
      ?> 
     </table> 

Answer 1

Прежде всего, вам не нужен, модальный диалог для каждой строки в таблице. Выньте это из цикла for-each. Кроме того, добавьте класс для каждой кнопки @PM для упрощения выбора. Aftewards, привяжите некоторые действия к событию нажатия кнопки @PM. Вот код, убедитесь, что загружен jquery.

foreach ($list as $row) { 
     ?> 
     <tr class=""> 
      <td><?php echo $row['user_name']; ?></td> 
      <td><?php echo $row['user_email']; ?></td> 
      <td> 
      <?php 
      //PHP code of getting user rank. 
      ?> 
      </td> 
      <td> 
      <?php 
      //PHP code to chech is user active. 
      ?> 
      </td> 
      <td> 
       <?php echo $row['user_registration_datetime']; ?> 
      </td> 
      <td> 
       <?php echo $row['user_registration_ip']; ?> 
      </td> 
      <td> 
       <button type="button" class="btn btn-primary data-grab-trigger" data-toggle="modal" data-target="#send-pm">@PM</button>   
      </td> 
     </tr> 
     <?php 
     } 
     ?> 
     </table> 
     <div class="modal fade" id="send-pm" tabindex="-1" role="dialog" aria-labelledby="send-pm-label" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
         <h4 class="modal-title" id="send-pm-label">Send personal message</h4> 
         </div>  
         <div class="modal-body">   
         <div class="form-group"> 
         <label for="name" class="control-label">Receiver name</label> 
         <textarea style="height:35px;" name="name" id="name" class="form-control" ></textarea> 
         </div> 
         <div class="form-group"> 
         <label for="email" class="control-label">Email</label> 
         <textarea style="height:35px;" name="email" id="email" class="form-control" ></textarea> 
         </div> 
         <div class="form-group"> 
         <label for="message" class="control-label">Message</label> 
         <textarea style="height:250px;" name="message" id="message" class="form-control" ></textarea> 
         </div> 
         </div> 
         <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
         <button type="button" id="submit" class="btn btn-primary">SEND</button> 
        </div>  
       </div> 
      </div> 
     </div> 
     <script> 
      $(function(){ 
       $('.data-grab-trigger').on('click', function (e) { 
        _email = $(this).closest('tr').find('td').eq(0).text(); //get user email from the row where button was clicked 
        _name = $(this).closest('tr').find('td').eq(1).text(); //get user name from the row where button was clicked 

        $("#email").val(_email); 
        $("#name").val(_name); 
       }); 


      }); 
     </script>