在codeigniter中使用javascript在編輯表單中使用「id」加載數據

Question

我試圖從表格中傳遞數據以使用JavaScript編輯表單。問題是我是一個JavaScript的完全新手。可以通過給我一個代碼應該是什麼的例子，至少能幫助我嗎？

我沒有做AJAX，只是簡單的負載數據用JavaScript

我的模型：

function edit($a) 
     { 
     $d = $this->db->get_where('crud', array('idcrud' => $a))->row(); 
     return $d; 
    } 

我的控制器：

function edit() 
    { 
     $kd = $this->uri->segment(3); 
     if ($kd == NULL) { 
      redirect('Chome'); 
     } 
     $dt = $this->Mcrud->edit($kd); 
     $data['fn'] = $dt->firstname; 
     $data['ln'] = $dt->lastname; 
     $data['ag'] = $dt->age; 
     $data['ad'] = $dt->address; 
     $data['id'] = $kd; 

     $this->load->view('Vhome', $data); 
    } 

而且這是在按鈕作爲編輯按鈕的視圖「Vhome」：

<button class="btn btn-warning btn-xs" onclick="edit(<?php echo $row->idcrud; ?>)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button> 

該按鈕將調用，應該由「idcrud」調用數據的JavaScript編輯功能：

function edit(idcrud) 
    { 
     $('#form')[0].reset(); // reset form on modals 
     $('#modal_form').modal('show'); // show bootstrap modal 
     $('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title 

     // I dont know what must i do here to call my data in table crud by "idcrud" 


    } 

而這正是數據被傳遞到窗體：

<div class="modal fade" id="modal_form" role="dialog"> 
    <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> 
     <h3 class="modal-title">Surat Keluar</h3> 
     </div> 
     <div class="modal-body form"> 
     <form action="Chome/edit" method="post" id="form" class="form-horizontal"> 
      <input type="hidden" value="" name="id"/> 
      <div class="form-body"> 
      <div class="form-group"> 
       <label for="fn" class="control-label col-md-3">First Name</label> 
       <div class="col-md-9"> 
       <input type="text" class="form-control" id="fn" name="fn" placeholder="First Name"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="ln" class="control-label col-md-3">Last Name</label> 
       <div class="col-md-9"> 
       <input type="text" class="form-control" id="ln" name="ln" placeholder="Last Name"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="ag" class="control-label col-md-3">Age</label> 
       <div class="col-md-9"> 
       <input type="text" class="form-control" id="ag" name="ag" placeholder="age"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="ad" class="control-label col-md-3">Address</label> 
       <div class="col-md-9"> 
       <input type="text" class="form-control" id="ad" name="ad" placeholder="Address"> 
       </div> 
      </div> 
      </div> 
      <div class="modal-footer"> 
      <input type="submit" name="mit" class="btn btn-primary" value="Submit"> 
      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
      </div> 
     </form> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 

燦有人給我舉例說明了我必須在JavaScript函數編輯中寫些什麼？

編輯：

這是我的視圖的全碼Vhome.php

Answer 1

好吧，這是很容易的。首先把一些標識符在本節：

foreach(...){ 
... 
<tr id="idcrud<?php echo $row->idcrud;?>"> 
    <td class="idcrud"><?php echo $row->idcrud; ?></td> 
    <td class="fn"><?php echo $row->firstname; ?></td> 
    <td class="ln"><?php echo $row->lastname; ?></td> 
    <td class="age"><?php echo $row->age; ?></td> 
    <td class="addr"><?php echo $row->address; ?></td> 
    ... 
</tr> 

而在你edit()功能：

function edit(idcrud) 
    { 
     $('#form')[0].reset(); // reset form on modals 
     $('#modal_form').modal('show'); // show bootstrap modal 
     $('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title 
     // MY EDIT: 
     $("input #fn").val($("td #idcrud"+idcrud + " .fn").html()); 
     $("input #ln").val($("td #idcrud"+idcrud + " .ln").html()); 
     //and so on 
    } 

一些觀察：內部表單<input type="hidden" value="" name="id"/>還需要一個id屬性：<input id="id" type="hidden" value="" name="id"/>。然後，您可以使用edit()函數中的$("input #id").val(idcrud);來更新它的值。