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;
}

Failed to load resource: the server responded with a status of 403 (Forbidden) expense/save. The console says that controller method cannot be loaded — Taimoor Ali Zafar
– Taimoor Ali Zafar, Commented Sep 8, 2019 at 6:22
@TaimoorAliZafar have you checked the AJAX URL . is it correct? — sh1hab
– sh1hab, Commented Sep 8, 2019 at 6:58
POST localhost:12345/example.com/public/expense/save 403 (Forbidden). This is error but once i right click and open in new tab url works fine and data gets inserts as i am passing fixed values in controller but actually this url should called via AJAX post which is not happening — Taimoor Ali Zafar
– Taimoor Ali Zafar, Commented Sep 8, 2019 at 7:06

user6204517 · Accepted Answer · 2019-09-08 09:19:00Z

0

@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){	}
  });
});

answered Sep 8, 2019 at 9:19

user6204517

Sign up to request clarification or add additional context in comments.

4 Comments

Taimoor Ali Zafar Over a year ago

Yes i have tried this, in cosole.log data entered in form shows up but not passed to controller, it gives 500 error for controller. once controller method is directly run in browser it shows NULL values passed to controller and model

Taimoor Ali Zafar Over a year ago

Failed to load resource: the server responded with a status of 500 (Internal Server Error) for controller method i.e expense/save

Taimoor Ali Zafar Over a year ago

I have found out there is some csrf protection but unable to correct it

Sachin Bahukhandi Over a year ago

Your expense/save method has some error. Try resolving it on backend.

Collectives™ on Stack Overflow

PHP CodeIgniter AJAX POST Method Not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related