Question posted in
You can find the official documentation here.

Why my ajax post is not working codeigniter? The page is refreshing – Jquery ajax

 // save new employee record
            $('#saveEmpForm').submit('click',function(){
                var empInputId = $('#input_id').val();
                var empJenis = $('#jenis').val();
                var empJarak = $('#jarak').val();
               
                $.ajax({
                    type : "POST",
                    url  : "InputPembangunan/save",
                    dataType : "JSON",
                    data : {input_id:empInputId, jenis:empJenis, jarak:empJarak },
                    success: function(data){
                        $('#jenis').val("");
                        $('#jarak').val("");
                        $('#addEmpModal').modal('hide');
                        alert('Successfully called');
                        listEmployee();
                    },
                    error: function(jqxhr, status, exception) {
                        alert('Exception:', exception);
                    }
                });
                return false;
            });
<form id="saveEmpForm" method="post">
    <div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add New Employee</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">                       
                <div class="form-group row">
                    <label class="col-md-2 col-form-label">Jenis</label>
                    <div class="col-md-10">
            <input type="text" name="jenis" id="jenis" class="form-control" required>
            <input type="hidden" id="input_id"  name="input_id" class="form-control " value="{$input_id}">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 col-form-label">Jarak</label>
                    <div class="col-md-10">
                      <input type="text" name="jarak" id="jarak" class="form-control" required> 
                    </div>
                </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save</button>
          </div>
        </div>
      </div>
    </div>
</form>

Save function in controller file

public function save(){
        $data=$this->inputs_model->saveEmp();
        echo json_encode($data);
    }

Save function in Model

public function saveEmp(){
        $data = array(              
                'input_id'          => $this->input->post('input_id'), 
                'jenis'             => $this->input->post('jenis'), 
                'jarak'             => $this->input->post('jarak'), 
                'created_at'        => date("Y-m-d h:i:sa"),
                'updated_at'        => date("Y-m-d h:i:sa")
            );
        $result=$this->db->insert('input_jenis_industri',$data);
        return $result;
    }

The code are as stated above, my ajax function to save the data is not working. It is not saving the data in the db. What can cause the problem?

My ajax function calls the InputPembangunan/save to save the data, then the controller try to the save data using the save() function. It is saved using the model saveEmp()

Tags:

6

Answers


  1. 0

    The following is incorrect, there is no click involved in a submit event

    $('#saveEmpForm').submit('click',function(){

    Change to

    $('#saveEmpForm').submit(function(event){
     event.preventDefault()// prevent normal form submit
    Login or Signup to reply.
  2. 0

    without refreshing the page you have to call event.preventDefault() method after submit event.

    replace this

        $('#saveEmpForm').submit('click',function(){

    with

        $('#saveEmpForm').on('submit',function(){
    event.preventDefault()
    Login or Signup to reply.
  3. 0

    Change this

    <button type="submit" class="btn btn-primary">Save</button>

    to

    <button type="button" class="btn btn-primary">Save</button>
    Login or Signup to reply.
  4. 0

    You can onlick() method. Actually I used like this;

    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" onclick="save()" class="btn btn-primary">Save</button>
      </div>

    than add jquery

    function save() {
// ajax adding data to database
var formData = new FormData($('#form')[0]);
$.ajax({
    URL: "<?php echo site_url('InputPembangunan/save')?>",
    type: "POST",
    data: formData,
    contentType: false,
    processData: false,
    dataType: "JSON",
    success: function(data) {
        if(data.status) //if success close modal and reload ajax table
        {
            $('#modal_form').modal('hide');
            reload_table();
        } else {
            //do something
        }
    },
    error: function(jqXHR, textStatus, errorThrown) {
        //do error form
    }
});}
    Login or Signup to reply.
  5. 0

    Use the following way,

    $( "#saveEmpForm" ).submit(function( event ) {
    event.preventDefault();
    
    /** Your Existing Code ***/
    var empInputId = $('#input_id').val();
    var empJenis = $('#jenis').val();
    var empJarak = $('#jarak').val();

    $.ajax({
        type : "POST",
        url  : "InputPembangunan/save",
        dataType : "JSON",
        data : {input_id:empInputId, jenis:empJenis, jarak:empJarak },
        success: function(data){
            $('#jenis').val("");
            $('#jarak').val("");
            $('#addEmpModal').modal('hide');
            alert('Successfully called');
            listEmployee();
        },
        error: function(jqxhr, status, exception) {
            alert('Exception:', exception);
        }
    });
    return false;
    /** Your Existing Code ***/
});

    Also, you can check the jQuery reference from this link:
    https://api.jquery.com/submit/#submit

    Login or Signup to reply.
  6. 0

    Replace

    $('#saveEmpForm').submit('click',function(){

    with

    $(document).off('submit','#saveEmpForm').on('submit','#saveEmpForm',function(event) {
    event.preventDefault(); //to prevent default submit action
    ...rest of the code
})

    also check for any errors on the browser dev tool

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search