JQuery Ajax POST in Codeigniter not working

Question

i have a problem with jquery ajax post in codeigniter, problem I faced is when the submit button is clicked , an error occurs

this is my code

home.js

form.on('submit', function(e){
    e.preventDefault();
    var fields = {};
    form.find('input','textarea').each(function(index, el){
        el.readOnly = true;
        fields[$(el).attr('name')] = $(el).val();
    });

    // send request to server
    $.ajax({
        type: 'POST',
        url: '/home/tryproduct/',
        data: fields,
        dataType: 'json'
    })
    .done(function(result){
        if(result.error === false){
            alert(result.message);
        } else {
            alert(result.message);
        }
        form.find('input','textarea').each(function(index, el){
            el.readOnly = false;
        });
        form[0].reset();
    });
});

this is my view

<form class="row" name="free-trial">
                    <div class="col-sm-6 col-xs-12">
                        <div class="form-group">
                            <button type="button" onclick="autoFillUsingLinkedin()" class="btn btn-linkedin btn-block">
                            <span class="icon icon-social-linkedin"></span>
                            Autofill Using LinkedIn
                            </button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-12"></div>
                    <div class="col-sm-6 col-xs-12">
                        <div class="form-group">
                            <label>Name</label>
                            <div class="row between-xs">
                                <input type="text"
                                    name="firstName" placeholder="First Name" class="form-control col-xs"  required=""/>
                                    <?php echo form_error('firstName'); ?>
                                <input type="text" name="lastName" placeholder="Last Name" class="form-control col-xs" required=""/>
                                <?php echo form_error('lastName'); ?>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Company</label>
                            <input type="text" name="company" placeholder="Your Current Company" class="form-control" required=""/>
                        </div>
                        <div class="form-group">
                            <label>Position</label>
                            <input type="text" name="position" placeholder="Position On Your Company" class="form-control" required=""/>
                        </div>
                        <div class="form-group">
                            <label>Address</label>
                            <input type="text" name="address" placeholder="JL. Jalan 12. Kota. Bandung" class="form-control" required=""/>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-12">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" name="email" placeholder="We Will Use This For Registration" class="form-control" required=""/>
                            <?php echo form_error('email'); ?>
                        </div>
                        <div class="form-group">
                            <label>Phone Number</label>
                            <input type="text" name="phone" placeholder="+(62) xxx" class="form-control" required=""/>
                        </div>
                        <div class="form-group">
                            <label>Notes</label>
                            <textarea type="text" name="notes" placeholder="Tell Us What You Want" rows="4" class="form-control" required=""></textarea>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-12">
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-block">
                            <span class="icon icon-paper-airplane"></span>
                            SUBMIT FOR FREE TRIAL
                            </button>
                        </div>
                    </div>
                </form>

Controller

public function tryproduct(){
    $this->view = FALSE;
    if ($_SERVER['REQUEST_METHOD'] !== 'POST') return;
    $data = array(
        'firstname' => $this->input->post('firstname'),
        'lastname'  => $this->input->post('lastname'),
        'position'  => $this->input->post('position'),
        'company'   => $this->input->post('company'),
        'address'   => $this->input->post('address'),
        'phone'     => $this->input->post('phone'),
        'email'     => $this->input->post('email'),
        'notes'     => $this->input->post('notes')
    );
    $id = $this->trial_request->insert($data);
    if(!$id){
        echo json_encode(array(
            'error' => true,
            'message' => 'error register product trial'
        ));
    } else {
        echo json_encode(array(
            'error' => false,
            'message' => 'success register product trial',
            'user' => $data,
        ));
    }
}

thanks before guys

Answer 1

I think the problem is in

url: '/home/tryproduct/'

use base_url() to make the url of ajax url path. It will work.

Answer 2

try to set FALSE csrf_protection in config.php. If you want set it TRUE, make it sure you change <form action=....> to form_open()