顯示值使用AJAX和PHP

Question

editModal.php

<div id="edit-modal" class="modal fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
     <div class="modal-dialog"> 
       <div class="modal-content"> 

        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
         <h4 class="modal-title"> 
          <i class="glyphicon glyphicon-edit"></i> Edit Profile 
         </h4> 
        </div> 
        <div class="modal-body"> 

         <div id="modal-loader" style="display: none; text-align: center;"> 
         </div> 

         <div id="dynamic-content"> 

         <div class="row"> 
          <div class="col-md-12"> 

          <div class="table-responsive"> 

         <table class="table table-bordered"> 
          <tr> 
          <th>First Name</th> 
          <td id="txt_first"> 
          <input id="result_table" type="text" class="form-control" name="Firstname" ng-model="name"> 
          </td> 
          </tr> 

          <tr> 
          <th>Middle Name</th> 
          <td id="txt_middle" > </td> 
          </tr> 

          <tr> 
          <th>Last Name</th> 
          <td id="txt_last"></td> 
          </tr> 

          <tr> 
          <th>Email Add</th> 
          <td id="txt_emailadd"></td> 
          </tr> 

          <tr> 
          <th>Contact Number</th> 
          <td id="txt_cnumber"></td> 
          </tr> 


          </table> 

          </div> 

          </div> 
         </div> 

         </div> 

        </div> 
        <div class="modal-footer"> 
          <button type="submit" value="send" name="submit" class="btn btn-primary">Save Changes</button> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 

      </div> 
      </div> 
    </div><!-- /.modal -->  

</div> 

    $(document).on('click', '#getUser', function(e){ 

        e.preventDefault(); 

        var uid = $(this).data('id'); // get id of clicked row 

        $('#dynamic-content').hide(); // hide dive for loader 
        $('#modal-loader').show(); // load ajax loader 

        $.ajax({ 
        url: '../model/editUser.php', 
        type: 'POST', 
        data: 'id='+uid, 
        dataType: 'json' 
        }) 
        .done(function(data){ 
        console.log(data); 
        $('#dynamic-content').hide(); // hide dynamic div 
        $('#dynamic-content').show(); // show dynamic div 
        $('#txt_first').html(data.First_Name); 
        $('#txt_middle').html(data.Middle_Name); 
        $('#txt_last').html(data.Last_Name); 
        $('#txt_emailadd').html(data.Email_Add); 
        $('#txt_cnumber').html(data.Contact_Number); 
        $('#modal-loader').hide(); // hide ajax loader 
        }) 
        .fail(function(){ 
        $('.modal-body').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...'); 
        }); 

       }); 

       }); 

       </script> 

編輯我想顯示的$（ '＃txt_first'）的值HTML（data.First_Name）。關於輸入type =「text」value =「php echo $ firstName」但是看起來我做錯了。我能否把表格和腳本放在一個列表中？分割？

Answer 1

它是輸入字段，所以你需要使用'value'而不是'html'。試試這個：

$('#txt_first').val(data.First_Name); 

Answer 2

創建演示在輸入型顯示data.First_Name = 「文本」

$('#result_table').val("test");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered"> 
 
          <tr> 
 
          <th>First Name</th> 
 
          <td id="txt_first"> 
 
          <input id="result_table" type="text" class="form-control" name="Firstname" ng-model="name"> 
 
          </td> 
 
          </tr> 
 

 
          <tr> 
 
          <th>Middle Name</th> 
 
          <td id="txt_middle" > </td> 
 
          </tr> 
 

 
          <tr> 
 
          <th>Last Name</th> 
 
          <td id="txt_last"></td> 
 
          </tr> 
 

 
          <tr> 
 
          <th>Email Add</th> 
 
          <td id="txt_emailadd"></td> 
 
          </tr> 
 

 
          <tr> 
 
          <th>Contact Number</th> 
 
          <td id="txt_cnumber"></td> 
 
          </tr> 
 

 

 
          </table>