使用ajax，jquery和codeigniter处理表上的输入数据

Question

I have a json like this based query on my database :

[{
"NAMA_ITEM": "Certificate",
"NAMA_DAMAGE": "Broken",
"NAMA_REPAIR": "Blast&Paint",
"REMARKS": "AAAAAA",
"MANHOUR": "10.00",
"MATERIAL": null,
"AC": null,
"NAMA_TYPE": "Cleaning"
}, {
"NAMA_ITEM": "Exterior",
"NAMA_DAMAGE": "Modified",
"NAMA_REPAIR": "Replace",
"REMARKS": "BBBBB",
"MANHOUR": "10.00",
"MATERIAL": null,
"AC": null,
"NAMA_TYPE": "Cleaning"
}]

This json, I will be interprated on html like this :

<div class="box-footer">
   <button class="btn btn-block btn-info" type="button" id="klikBiaya">Klik Isi Biaya</button>
</div>

Those json I will be displayed on a html table based .click jquery,

$(document).on("click", "#klikBiaya", function () {

    $(this).attr("disabled", true);
    $.ajax({
        url: "<?php echo base_url('admin/c_admin/get_one_eir_to_cost'); ?>",
        type: "POST",
        data: {
            SELECTED: $(this).val()
        },
        dataType: 'json',
        success: function (obj) {
            console.log(obj);
            $.each(obj, function (i, elem) {
                $("#tableReport").find('tbody').append(
                        "<tr><td>" + "<input type='text' class='form-control' name='name_type' disabled placeholder='" + elem.NAMA_TYPE + "'value='" + elem.NAMA_TYPE + "'>" +
                        "<td>" + "<input type='text' class='form-control' name='name_item' disabled placeholder='" + elem.NAMA_ITEM + "'value='" + elem.NAMA_ITEM + "'>" +
                        "<td>" + "<input type='text' class='form-control' name='name_damage' disabled placeholder='" + elem.NAMA_DAMAGE + "'value='" + elem.NAMA_DAMAGE + "'>" +
                        "<td>" + "<input type='text' class='form-control' name='name_repair' disabled placeholder='" + elem.NAMA_REPAIR + "'value='" + elem.NAMA_REPAIR + "'>" +
                        "<td>" + "<input type='text' class='form-control' name='name_remarks' disabled placeholder='" + elem.REMARKS + "'value='" + elem.REMARKS + "'>" +
                        "<td>" + "<input type='text' class='form-control' name='name_damage' disabled placeholder='" + elem.MANHOUR + "'value='" + elem.MANHOUR + "'>" +
                        "<td>" + "<input type='text' class='form-control' id='material'>" +
                        "<td>" + "<input type='text' class='form-control' id='A/C'>" +
                        "</td></tr>");
            });
        }
    });

});

See, my table now have two row but on each row, but there are have two input text that the user must to fill it, there is MATERIAL AND A/C.

How to handle on those two input on submit ? I want to update some data on my database. this is the html :

<form id="upload" action="">
<div class="box-body">
    <div class="row">
        <div class="col-xs-12">
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover" id="tableReport">
                    <thead>
                    <th>TYPE</th>
                    <th>ITEM</th>
                    <th>DAMAGE</th>
                    <th>REPAIR</th>
                    <th>REMARKS</th>
                    <th>MANHOUR</th>
                    <th>MATERIAL</th>
                    <th>A / C</th>

                    </thead>

                    <tbody>
                        <!--GENERATED BY JQUERY-->
                    </tbody>
                </table>
            </div><!-- /.box-body -->
        </div>
    </div>
</div><!-- /.box-body -->

<div class="box-footer">
    <button class="btn btn-primary" id="submitCost">Submit</button>
</div>

What I am supposed to do in jquery ajax. What the data I am supposes to passed it into controller. I want to update my database based the json above. JQUERY ON VIEW :

$(document).on("submit", "#upload", function () {
    // ARRAY OR JSON THAT INPUT FROM USER

    $.ajax({
        url: "<?php echo base_url('surveyor/c_admin/update_json_detail'); ?>",
        type: "POST",
        data: {
            POST_ARRAY: // ARRAY OR JSON THAT INPUT FROM USER
        },
        dataType: 'json',
        success: function (obj) {
            console.log("UPDATE IS SUCCESS");
        }
    });
    return false;
});

CONTROLLER

public function update_json_detail(){
   $this->input->post("ARRAY_POST");
   $query =  $this->m_admin->update_eir_to_cost(element, element, element);
   echo json_encode($query);
}

MODEL

 public function update_eir_to_cost($id, $material, $ac) {
    $data = array(
        "MATERIAL" => $material,
        "AC" => $ac
    );

    $this->db->trans_start();
    $this->db->where($id);
    $this->db->update('tb_repair_detail', $data);
    $this->db->trans_complete();

    if ($this->db->trans_status() === FALSE) {
        // generate an error... or use the log_message() function to log your error
        echo "Error Updating";
    }
}

Answer 1

In Your jquery try this :

$(document).on("submit", "#upload", function () {
   postData = $(this).serialize();
    $.ajax({
        url: "<?php echo base_url('surveyor/c_admin/update_json_detail'); ?>",
        type: "POST",
        data: postData,
        dataType: 'json',
        success: function (obj) {
            console.log("UPDATE IS SUCCESS");
        }
    });
    return false;
});

Answer 2

.click jquery

Replace line

"<td>" + "<input type='text' class='form-control' id='A/C'>"

To

"<td>" + "<input type='text' class='form-control' id='ac'>"

id Specifies a unique id for the element. Naming rules:

Must contain at least one character
Must not contain any space characters
In HTML, all values are case-insensitive

JQUERY ON VIEW :

$(document).on("submit", "#upload", function (e) {
  e.preventDefault();

  $.ajax({
    url: "<?php echo base_url('surveyor/c_admin/update_json_detail'); ?>",
    type: "POST",
    data: {
      material: $('input#material').val(),
      ac: $('input#ac').val()
    },
    dataType: 'json',
    success: function (json) {
      if (json['error']) {
        console.log("Error!");
      } else {
        console.log("UPDATE IS SUCCESS");
      }
    }
  });

  return false;
});

CONTROLLER

public function update_json_detail(){
  $id = <row id>;
  $material = $this->input->post("material");
  $ac = $this->input->post("ac");
  $query =  $this->m_admin->update_eir_to_cost($id, $material, $ac);

  header('Content-Type: application/json');
  echo json_encode($query);
}

MODEL

public function update_eir_to_cost($id, $material, $ac) {
  $data = array(
    "MATERIAL" => $material,
    "AC" => $ac
  );

  $this->db->trans_start();
  $this->db->where($id);
  $this->db->update('tb_repair_detail', $data);
  $this->db->trans_complete();

  $_response = array();

  if ($this->db->trans_status() === FALSE) {
    $_response = array('error' => true, 'message' => 'Your message here ....');
  } else {
    $_response = array('success' => true, 'message' => 'Your message here ....');
  }

  return $_response;
}