Load data by “id” for edit form using javascript in codeigniter

Question

I am trying to pass data from a table to edit a form, using JavaScript. The problem is that I am a complete newbie at JavaScript. Can someone at least help me by giving me an example of what the code should be?

I am not doing AJAX, just simple load data with JavaScript

my model :

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

my controller :

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);
    }

And this is the button in the view, "Vhome", that I use as edit button :

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

That button will call JavaScript edit function that should call the data by "idcrud" :

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"


    }

And this is the form where the data gets passed to :

<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 -->

Can someone give me an example of what must I write in the JavaScript function edit?

edit :

This is full code of my view Vhome.php

Answer 1

Ok, it's quite easy. First put some identifiers on this section:

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>

And in your edit() function:

 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
    }

Some observation: Inside your form <input type="hidden" value="" name="id"/> will also need an id attribute : <input id="id" type="hidden" value="" name="id"/> . Then you can update it's value with: $("input #id").val(idcrud); in the edit() function.