2016-04-03 2 views
0

Я набрал строки из MySQL и зациклировал его с помощью Bootstrap modal, и я создал форму в модальном формате, с которой данные отправляются на PHP-скрипт (update.php) с помощью ajax. Но взамен я получаю вывод только последней строки. Мне нужно получить запись конкретного студента с его уникальным идентификатором.Как передать значение из таблицы в bootstrap modal на PHP?

HTML:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
<table class="table table-responsive"> 
         <thead> 
         <tr> 
          <th>NAME</th> 
          <th>ROLL NUMBER</th> 
          <th>CONTACT NO</th> 
          <th>ADDRESS</th> 
          <th>EDIT</th> 
         </tr> 
         </thead> 
         <tbody> 

           <?php 


      $query = "SELECT * FROM students ORDER BY id DESC"; 
      $query_run = mysqli_query($connection, $query); 
      if($query_run){ 

       while($row = mysqli_fetch_assoc($query_run)){ 
        $id = $row['id']; 
        $name = $row['name']; 
        $rollno = $row['rollno']; 
        $contact = $row['contact']; 
        $address = $row['address']; 
        echo "<tr>"; 
        echo '<td>' . $name . '</td>'; 
        echo '<td>' . $rollno . '</td>'; 
        echo '<td>' . $contact . '</td>'; 
        echo '<td>' . $address . '</td>'; 
        echo "<td><button class='btn btn-link btn-custom dis' data-toggle='modal' data-target='#myModal$id'> 
    EDIT</button> </td>"; 
        echo '</tr>'; 
        ?> 

                <div class="modal fade" id="myModal<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
            <div class="modal-dialog" role="document"> 
             <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="myModalLabel">EDIT RECORD</h4> 
              </div> 
              <div class="modal-body"> 

               <form id="updateValues" action="update.php" method="POST" class="form"> 
                <div class="form-group"> 
                 <label for="name">NAME</label> 
                 <input type="text" class="form-control" name="name" id="name" value="<?php echo $name; ?>"> 
                </div> 
                <div class="form-group"> 
                 <label for="rollno">ROLL NO</label> 
                 <input type="text" class="form-control" name="rollno" id="rollno" value="<?php echo $rollno; ?>"> 
                </div> 
                <div class="form-group"> 
                 <label for="contact">CONTACT</label> 
                 <input type="text" class="form-control" name="contact" id="contact" value="<?php echo $contact; ?>"> 
                </div> 
                <div class="form-group"> 
                 <label for="address">ADDRESS</label> 
                 <textarea class="form-control" rows="3" name="address" id="address"><?php echo $address; ?></textarea> 
                </div> 
                <input type="hidden" name="id" value="<?php echo $id; ?>"> 
                <input type="submit" class="btn btn-primary btn-custom" value="Save changes"> 
               </form> 

              </div> 
              <div class="modal-footer"> 
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
               <div id="results"></div> 
              </div> 

             </div> 
            </div> 
           </div> 
        <?php } 
      }?> 
         </tbody> 
        </table> 
</body> 
</html> 




JS: 



       $(document).ready(function(){ 

        var values, url; 


         $('#updateValues').submit(function(e){ 

          e.preventDefault(); 
          values = $(this).serialize(); 
          url = $(this).attr('action'); 


          $.post(url, values, function(data){ 
          $('#results').html(data); 
          }); 
         }); 
       }); 

Update.php: 

<?php 


if(isset($_POST['name'])&&isset($_POST['rollno'])&&isset($_POST['contact'])&&isset($_POST['address'])){ 
    $id = $_POST['id']; 
    $name = $_POST['name']; 
    $rollno = $_POST['rollno']; 
    $contact = $_POST['contact']; 
    $address = $_POST['address']; 

    echo "$id $name $rollno $contact $address"; 
}else{ 
    echo 'ERROR!'; 
} 

?> 
+1

Иды должны быть уникальными, 'updateValues' не – kero

ответ

2

Это не тестируется/отлажена, но реорганизовать код, подобный этому:

<?php 
    $query = "SELECT * FROM students ORDER BY id DESC"; 
    $query_run = mysqli_query($connection, $query); 
    if($query_run){ 

    $out = ' 
     <table class="table table-responsive"> 
      <thead> 
      <tr> 
       <th>NAME</th> 
       <th>ROLL NUMBER</th> 
       <th>CONTACT NO</th> 
       <th>ADDRESS</th> 
       <th>EDIT</th> 
      </tr> 
      </thead> 
      <tbody> 
    '; 

     while($row = mysqli_fetch_assoc($query_run)){ 
      $out .= '<tr class="trID_' .$row['id']. '">'; 
      $out .= '<td class="td_name">' . $row['name'] . '</td>'; 
      $out .= '<td class="td_rollno">' . $row['rollno'] . '</td>'; 
      $out .= '<td class="td_contact">' . $row['contact'] . '</td>'; 
      $out .= '<td class="td_address">' . $row['address'] . '</td>'; 
      $out .= "<td><button class='td_btn btn btn-link btn-custom dis'>EDIT</button> </td>"; 
      $out .= '</tr>'; 
     } 
     $out .= '</tbody></table> 
     echo $out; 
?> 

<script> 
    $(document).ready(){ 
     $('.td_btn').click(function(){ 
      var $row = $(this).closest('tr'); 
      var rowID = $row.attr('class').split('_')[1]; 
      var name = $row.find('.td_name').val(); 
      var rollno = $row.find('.td_rollno').val(); 
      var contact = $row.find('.td_contact').val(); 
      var address = $row.find('.td_address').val(); 
      $('#frm_id').val(rowID); 
      $('#frm_name').text(name); 
      $('#frm_rollno').text(rollno); 
      $('#frm_contact').text(contact); 
      $('#frm_address').text(address); 
      $('#myModal').modal('show'); 
     }); 
    });//END document.ready 
</script> 

     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
      <div class="modal-dialog" role="document"> 
       <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="myModalLabel">EDIT RECORD</h4> 
        </div> 
        <div class="modal-body"> 

         <form id="updateValues" action="update.php" method="POST" class="form"> 
          <div class="form-group"> 
           <label for="name">NAME</label> 
           <input type="text" class="form-control" name="name" id="frm_name"> 
          </div> 
          <div class="form-group"> 
           <label for="rollno">ROLL NO</label> 
           <input type="text" class="form-control" name="rollno" id="frm_rollno"> 
          </div> 
          <div class="form-group"> 
           <label for="contact">CONTACT</label> 
           <input type="text" class="form-control" name="contact" id="frm_contact"> 
          </div> 
          <div class="form-group"> 
           <label for="address">ADDRESS</label> 
           <textarea class="form-control" rows="3" name="address" id="frm_address"></textarea> 
          </div> 
          <input type="hidden" name="frm_id"> 
          <input type="submit" class="btn btn-primary btn-custom" value="Save changes"> 
         </form> 

        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <div id="results"></div> 
        </div> 

       </div> 
      </div> 
     </div> 
<?php 
     } 
    } 
?> 

Примечания:

(1) Создайте целую таблицу в переменной, затем выведите переменную сразу.

(2) Вам нужен только один модальный, не один модальный для каждой строки таблицы. Поэтому удалите модальное создание изнутри цикла while.

(3) Использование JQuery для:
      (а) обнаружения нажатия кнопок в строке
      (б) получить данные таблицы для этой строки
      (с) заполнение полей в модальных
      (d) display modal
Вы используете Bootstrap, в котором используется jQuery, поэтому имеет смысл использовать jQuery для этого.

(4) С помощью JQuery для получения значений из ячеек таблицы по сравнению с полями ввода:
      (а) .text() - из ячеек таблицы
      (б) .val() - от <input> или <textarea>


Here is a jsFiddle Demo вы можете играть с этим, демонстрируя, как вы можете использовать jQuery для заполнения модального в зависимости от строки, которая была нажата.

+0

значения не отображаются в edit modal –

+0

@UmairKhan Исправлено. Спасибо, что поймали это. – gibberish

+0

сейчас хорошо выглядит –

Смежные вопросы