Codeigniter-POST not working via ajax

Question

I have a form, whose values I am trying to post after serializing to a controller via ajax. Below is the form:
Form

<form method="post" id="frm_reg_student" class="stop-propagation registration-form">
  <input type="hidden" name="register[user_type]" value="2">
  <input type="hidden" name="register[status_id]" value="1">
  <div class="stud_register_error"></div>
  <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-6">
          <div class="form-group">
              <label for="input" class="control-label font-12 font-blue">First Name <span>*</span></label>
              <input type="text" class="form-control" required="required" placeholder="Your First Name" name="register[first_name]">
          </div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6">
          <div class="form-group">
              <label for="input" class="control-label font-12 font-blue">Last Name  <span class="req">*</span></label>
              <input type="text" class="form-control" required="required" placeholder="Your Last Name" name="register[last_name]">
          </div>
      </div>
  </div> 
</form>  

js

$(".js-btn_reg_student").click(function(e){
        e.preventDefault();
        var serialData= $( "#frm_reg_student" ).serialize();
        alert(serialData);
        $.ajax ({
            type: "POST",
            url: '<?=base_url()?>index.php/register/signup/',
            data: serialData,
            success: function(result) {
                alert(result);
                output = JSON.parse(result);
                if(result) {
                    if( 'success' == output.type ) {
                        location.href = output.location;
                    } else {
                        $('.stud_register_error').html(output.message);    
                    }
                }
            }
        });
    });

Controller

public function signup(){
      if($_SERVER["REQUEST_METHOD"]=="POST"){
      print_r($_POST);
  }
}

Here, $_POST comes out to be empty, it never goes inside the loop. If you see in the JS, I have included an alert with the serialized data, which even shows me the proper serialized data. I believe it is something wrong with the way I am posting it. Any help!

Answer 1

Try on ajax

$(".js-btn_reg_student").click(function(e){

    var formdata = $( "#frm_reg_student" ).serialize();

    $.ajax({
        type: "post",
        url: "<?php echo base_url('register/signup');?>",
        data: formdata,
        dataType: 'json',
        success: function(json) {
        if (json[success]) {
            alert(json['post']);
        } else {

        }

        }
    });
    e.preventDefault();
});

And controller

public function signup() {

    $data = array(
        'success' => false,
        'post' => ''
    );

    if ($this->input->server("REQUEST_METHOD") == 'POST')
    {

        $data['success'] = true;
        $data['post'] = $_POST;

    }

    echo json_encode($data);

 }

Answer 2

Try

    $('#js-btn_reg_student').click(function () {
      $.ajax ({
        type: 'post',
        url: '<?php echo base_url(); ?>index.php/test/signup/',
        data: $('#frm_reg_student').serialize(),
        dataType: 'json',
        success: function(result) {
          if(result.status == 'success')
          {
            alert(result.name);
          }
          else
          {
            alert(result.status);
          }
        }
      });
   });

And in Controller

public function signup ()
{
   if($this->input->post())
   {
    $data = array('status' => 'success');
    $data['name'] = $this->input->post('register[first_name]');
   }
   else
   {
    $data = array('status' => 'failed');
   }
    echo json_encode($data);
}

Try it and let me know if it works or not :)

Answer 3

Try to use below code.

$(".js-btn_reg_student").click(function(e){
        e.preventDefault();
        var serialData= $( "#frm_reg_student" ).serialize();
        alert(serialData);
        $.ajax ({
            url: '<?=base_url()?>index.php/register/signup/',
            method : 'POST', 
            data: serialData,
            success: function(result) {                                
                if(result) {
                    if( 'success' == output.type ) {
                        location.href = output.location;
                    } else {
                        $('.stud_register_error').html(output.message);    
                    }
                }
            }
        });
    });

Answer 4

I think all the answers were correct in their own way. I figured out that it might be possible that it is not getting the DOM upon submit so I simply put it in document.ready and it worked!

Thanks