PHP CodeIgniter AJAX POST Method Not working

Question

i have created data entry form inside modal. On submit button click JS function is called in which data is passed to controller via AJAX post but my controller function is not getting called to insert data into databse

This is my modal data entry form

    <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-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel" style="text-align: center;font-weight: bold;font-size: 20px;padding-top: 3%;"><span class="fa fa-plus"></span>&nbsp;&nbsp;Add New Expense</h5>
      </div>
      <div class="modal-body">                       
            <div class="form-group row">
                <label class="col-md-3 col-form-label">Expense Type</label>
                <div class="col-md-9">
                    <select name="expense_type" id="expense_type" class="form-control" required="required">
                        <option value="">Choose Expense Type</option>
                        <option value="1">Daily</option>
                        <option value="2">Weekly</option>
                        <option value="3">Monthly</option>
                        <option value="4">Yearly</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-md-3 col-form-label">Expense Amount</label>
                <div class="col-md-9">
                  <input type="number" name="expense_amount" id="expense_amount" class="form-control" required="required"> 
                </div>
            </div>
            <div class="form-group row">
                <label class="col-md-3 col-form-label">Description</label>
                <div class="col-md-9">
                  <textarea name="expense_description" id="expense_description" class="form-control" rows="5" required></textarea>
                </div>
            </div>
      </div>
      <div class="modal-footer">
        <center>
        <button style="margin-left: 8%;border: none;" type="submit" id="expense_insert" name="expense_insert" class="btn btn-info btn-sm"><span class="fa fa-plus"></span>&nbsp;&nbsp;<b>Add Expense</b></button>

        <button style="background-color: #252525;color: white;border: none;" type="button" class="btn btn-secondary btn-sm" data-dismiss="modal"><span class="fa fa-window-close" aria-hidden="true"></span>&nbsp;&nbsp;<b>Close Window</b></button>
        </center>
      </div>
    </div>
  </div>
</div>

---

This is my js function

$(document).on('submit', '#saveEmpForm', function(event)  
{
    event.preventDefault();

    var expense_type = $('#expense_type').val();
    var expense_amount = $('#expense_amount').val();
    var expense_description = $('#expense_description').val();

    $.ajax({
        url  : "expense/save",
        type : "POST",
        cache : false,
        contentType : false,  
        processData : false,
        dataType: 'JSON',
        context: this,  
        data : {expenseType : expense_type, expenseAmount : expense_amount, expenseDescription : expense_description},
        success: function(data)
        {
            $('#expense_type').val("");
            $('#expense_amount').val("");
            $('#expense_description').val("");
            $('#addEmpModal').modal('hide');
            listExpense();
        }
    });
    return false;
});

---

This is my controller function

public function save()
{
    $add_data = array(              
            //'type' => $this->input->post('expenseType'), 
            //'amount' => $this->input->post('expenseAmount'), 
            //'description' => $this->input->post('expenseDescription'),

            'type' => '1', 
            'amount' => '1200', 
            'description' => 'Testing',
        );

    $data = $this->Expensem->saveExpense($add_data);
    echo json_encode($data);
}   

---

This is my model function

public function saveExpense($add_data)
{
    $result = $this->db->insert('ospos_expense', $add_data);
    return $result;
}

Answer 1

@TaimoorAliZafar You can try serializing your form input data like this.

$('#saveEmpForm').submit(function(e){
e.preventDefault();
//console.log($('#saveEmpForm').serialize().toString());
  $.ajax({
    type: "POST",
    url: "expense/save",
    cache : false,
    contentType : false,  
    processData : false,
    dataType: 'json',
    context: this,  
    data: $('#saveEmpForm').serialize(),
    success: function(data){	},
    error: function(jqXHR, status, error){	}
  });
});