jquery AJAX Post not working Codeigniter

Question

I am currently learning jquery AJAX, i am trying to change my standar php post to AJAX but not working, it's still prosses with php, not AJAX. Not even in the console show anything. Can anyone check my code ? I am using Codeigniter. And you can asume the php part is working fine ..

HTML :

<form action="<?=base_url()?>operator_pt/unggah/unggah_semua" id="unggahsemua" method="POST" name="unggahsemua" role="form">

  <?php  foreach($data as $rod)
  $tahun = $rod->id_smt;
  $jurusan = $rod->id_sms;
    ?>
    <div id="form-tahun" class="form-group">
     <input type="hidden" class="form-control" id="tahun" name="tahun" value="<?php echo $tahun;?>">
     </div>
     <div id="form-jurusan" class="form-group">
     <input type="hidden" class="form-control" id="jurusan" name="jurusan" value="<?php echo $jurusan;?>">       
        </div>
         Sedang Mengunggah :

        <div id="statmhs"> </div>
        <div id="statidmhs"> </div>
        <div id="statdsnpt"> </div>

<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>   

JS :

$(document).ready(function() {

    $('#unggahsemua').submit(function(event) {

        $('.form-group').removeClass('has-error'); 
        $('.help-block').remove();

        var formData = {
             'tahun'              : $('input[name=tahun]').val(),
            'jurusan'             : $('input[name=jurusan]').val(),
        };

        // process the form
        $.ajax({
            type        : 'POST',
            url         : '<?=base_url()?>operator_pt/unggah/unggah_semua', // the url where we want to POST
            data        : formData, 
            dataType    : 'json', 
            encode      : true
        })

            .done(function(data) {


                console.log(data); 

                $('#statmhs').append('<div class="help-block">' + data.infounggahmhs + '</div>');
                $('#statidmhs').append('<div class="help-block">' + data.infounggahidmhs + '</div>');
                $('#statdsnpt').append('<div class="help-block">' + data.infounggahdsnpt + '</div>');


            .fail(function(data) {


                console.log(data);
            });


        event.preventDefault();
    });

});

Answer 1

if you use form action="" method="POST" name="" role="form", make sure in config.php change $config['csrf_protection'] = TRUE; to FALSE. But, if you want to set it TRUE you must use form_open()

Answer 2

You have to stop default execution of form submit as you have to do it with ajax.

$(document).ready(function () {   
    $('#unggahsemua').submit(function (event) {
      event.preventDefault() //<------- Add this line
        $('.form-group').removeClass('has-error');
        $('.help-block').remove();

        var formData = {
            'tahun': $('input[name=tahun]').val(),
            'jurusan': $('input[name=jurusan]').val()
        };

        // process the form
        $.ajax({
            type: 'POST',
            url: '<?=base_url()?>operator_pt/unggah/unggah_semua', // the url where we want to POST
            data: formData,
            dataType: 'json',
            encode: true
        })    
        .done(function (data) {
            console.log(data);

            $('#statmhs').append('<div class="help-block">' + data.infounggahmhs + '</div>');
            $('#statidmhs').append('<div class="help-block">' + data.infounggahidmhs + '</div>');
            $('#statdsnpt').append('<div class="help-block">' + data.infounggahdsnpt + '</div>');
        })
        .fail(function (data) {
            console.log(data);
        });

    });
});

Answer 3

You have errors in your Javascript code..

You missed the closing brackets before the .fail method. Also you had an extra comma after the last entry of your formData object

Try changing to this:

$(document).ready(function () {   
    $('#unggahsemua').submit(function (event) {
        $('.form-group').removeClass('has-error');
        $('.help-block').remove();

        var formData = {
            'tahun': $('input[name=tahun]').val(),
            'jurusan': $('input[name=jurusan]').val()
        };

        // process the form
        $.ajax({
            type: 'POST',
            url: '<?=base_url()?>operator_pt/unggah/unggah_semua', // the url where we want to POST
            data: formData,
            dataType: 'json',
            encode: true
        })    
        .done(function (data) {
            console.log(data);

            $('#statmhs').append('<div class="help-block">' + data.infounggahmhs + '</div>');
            $('#statidmhs').append('<div class="help-block">' + data.infounggahidmhs + '</div>');
            $('#statdsnpt').append('<div class="help-block">' + data.infounggahdsnpt + '</div>');
        })
        .fail(function (data) {
            console.log(data);
        });
        event.preventDefault();
    });
});