why is my onClick at my modal button form doesn't work

I have a modal that contain a form for add and edit data. I have 3 button : simpan(for add/save data), edit(for edit data change), batal(from dismiss the modal).

I set the modal to hide the edit button when I want to add data and hide the save button when I want to edit data. The save button is working. When I'm trying to click my edit button in modal, it seems like nothing happens when I click it. It doesn't even do the edit() function that I call in onClick to do console.log(); I set it like this :

code when I want to add data :

<a class="btn btn-default" onclick="submit('tambah')" data-toggle="modal" data-target="#modal_form">      <i class="fas fa-plus"></i>                                  </a>  

code when I want to edit data :

<a onClick="submit(' + data[i].id + ')" data-target="#modal_form" data-toggle="modal" class="btn btn-sm btn-primary"> edit </a>  

code to show and hide button :

function submit(x) {      if (x == 'tambah') {          $('#btnSimpan').show();          $('#btnEdit').hide();          clear();      } else {          $('#btnSimpan').hide();          $('#btnEdit').show();            $.ajax({              type: 'POST',              data: 'id=' + x,              url: '<?php echo base_url() . "PersonilController/getPersId" ?>',              dataType: 'json',              success: function(data) {                  //console.log(data);                  $('[name="id"]').val(data[0].id);                  $('[name="nrp"]').val(data[0].nrp);                  $('[name="nama"]').val(data[0].nama);                  $('[name="lahir"]').val(data[0].lahir);                  $('[name="alamat"]').val(data[0].alamat);                  $('[name="jabatan"]').val(data[0].jabatan);                  $('[name="pangkatid"]').val(data[0].pangkatid);                  $('[name="kesatuanid"]').val(data[0].kesatuanid);              }          })      }  }  

button in modal :

<!-- Bootstrap modal -->  <div class="modal fade" id="modal_form" role="dialog">      <div class="modal-dialog">          <div class="modal-content">              <div class="modal-header">                  <h3 class="modal-title">Form Data Personil</h3>                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>              </div>                <!--modal form content-->              <!--/modal form content-->                <div class="modal-footer">                  <button type="button" id="btnSimpan" onclick="save()" class="btn btn-primary">Simpan</button>                  <button type="button" id="btnEdit" onclick="edit()" class="btn btn-primary">Edit</button>                  <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>              </div>          </div><!-- /.modal-content -->      </div><!-- /.modal-dialog -->  </div><!-- /.modal -->  <!-- End Bootstrap modal -->  

https://stackoverflow.com/questions/67260662/why-is-my-onclick-at-my-modal-button-form-doesnt-work April 26, 2021 at 11:57AM