Hello, I Want To Ask Why My Autofill Form Ajax is Not working / Not Automaticaly Input

Question

Why My Ajax Cant Automatic Inserting Value to My Form ?

This is My Model

 function get_pet_id($id_pet)
{
    
    $this->db->select("*");
    $this->db->from('pet');
    $this->db->where('id_pet',$id_pet);
    $result = $this->db->get();
    return $result->result_array();

}

This Is My Controller

function get_pet()
  {
    $this->load->model('user_model');
    $id_pet = $this->input->post('id_pet',TRUE);
    $data['data']= $this->user_model->get_pet_id($id_pet);
    echo json_encode($data);
  }

And This is My View With JS

 <div class="col-lg-3 col-sm-4 ml-auto mr-auto">
          <div class="form-group">
            <label for="Nama" class="bmd-label-floating">Pilih Hewan Peliharaan</label>
            <select class="form-control" id="id_pet" name="id_pet" required>
              <option value="">No Selected</option>
              <?php foreach ($Pet as $H) { ?>
                <option value="<?php echo $H['id_pet']; ?>"><?php echo $H['Nama']; ?></option>
              <?php } ?>
            </select>
            <span class="bmd-help">Ras Hewan Apakah Dia</span>
          </div>
        </div>
        <div class="col-lg-3 col-sm-4 ml-auto mr-auto">
          <div class="form-group">
            <label for="Jenis Hewan" class="bmd-label-floating">Jenis Hewan</label>
            <br>
            <input type="text" class="form-control" id="Jenis_Hewan">
            <span class="bmd-help">Jenis Hewan</span>
          </div>
        </div>

and the JS script this

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script type="text/javascript">
        $('#id_pet').change(function() {
          var id_pet = $(this).val();
          $.ajax({
            url: '<?php base_url('Master_Controller/get_pet'); ?>',
            type: 'POST',
            async: false,
            data: id_pet,
            dataType: 'json',
          }).success(function(data) {
            $(".Jenis_Hewan").val(data.Jenis_Hewan);
          });
        });
</script>

So After I Choose From Dropdown Next Form Should be Automatic Insert And Get Data From Dropdown Value But No Inserting Im new Using AJAX

I've posted a new answer with code, you need to do the foreach in the ajax success function — Burhan Kashour, Oct 22 '20 at 05:58
This is not codeigniter 4. Please remove the tag, can't do it now because the edit queue is full. — marcogmonteiro, Oct 22 '20 at 08:21
Does this answer your question? [How can I use JQuery to post JSON data?](https://stackoverflow.com/questions/6255344/how-can-i-use-jquery-to-post-json-data) — Vickel, Oct 23 '20 at 23:12

score -1 · Answer 1 · edited Oct 24 '20 at 11:57

Remove the options:

<select class="form-control" id="id_pet" name="id_pet" required>
  <option value="">No Selected</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script type="text/javascript">
        $('#id_pet').change(function() {
          var id_pet = $(this).val();
          $.ajax({
            url: '<?php base_url('Master_Controller/get_pet'); ?>',
            type: 'POST',
            async: false,
            data: id_pet,
            dataType: 'json',
          }).success(function(data) {
            $.each(data, function(val, text) {            
              $('#id_pet').append('<option value='+val+'>'+text+'</option>');
            });
          });
        });
</script>

score -1 · Answer 2 · answered Oct 24 '20 at 08:44

Add $.parseJSON(data); to parse the data.Also you have given the wrong refrence to the input tag having ID "Jenis_Hewan" but you have refrensing it as class

<script type="text/javascript">
       $('#id_pet').change(function() {
            var id_pet = $(this).val();
             $.ajax({
                    url: '<?php base_url('Master_Controller/get_pet'); ?>',
                    type: 'POST',
                    async: false,
                    data: {id_pet:id_pet},
                   success(function(data) {
                       var record = $.parseJSON(data); // add this line 
                       $("#Jenis_Hewan").val(record.Jenis_Hewan);// do the required changes            }
          });
      });
</script>

Hello, I Want To Ask Why My Autofill Form Ajax is Not working / Not Automaticaly Input

2 Answers2