How to pass form data to PHP via AJAX call (CodeIgniter Framework)

Question

I have the following HTML structure:

<form method="POST">
    Name : <input id="asgname" type="text"> <br>
    Description : <input id="asgdescription" type="text"> <br>
    <a href="#" id="asgsave" class="assignment-action">Save</a>
</form>

I want that on clicking the save button, the form values are sent to the server via AJAX call. For that, I've attached the click event via following command

$("#asgsave").click(save_assignment);

save_assignment is also a javascript function defined as follow:

function save_assignment() {
     return $.ajax({
           type: "POST",
           url:  "<?php echo base_url();?>index.php/user/save_assignment",
           data: $('form').serialize(),
                success: function(response) {
                    alert('Form was submitted');
                },
                error: function(error) {
                    alert("Error");
                }
     });
}

The above is not working. So I tried the following approach as well:

function save_assignment() {
     var formvalues = {
            name       : $('#asgname').text(),
            descripion : $('#asgdescription').text(),
     };
     return $.ajax({
           type: "POST",
           url:  "<?php echo base_url();?>index.php/user/save_assignment",
           data: {values : formvalues},
                success: function(response) {
                    alert('Form was submitted');
                },
                error: function(error) {
                    alert("Error");
                }
     });
   }

But this is also not working.

Can anyone please guide me as to why are the above methods not working and what is the correct way to do so ?

EDIT-1 :

By not working, I mean: in the first case ($('form').serialize() approach) the data is not being sent to the server. I checked it via chrome and firefox debugger that there was no post data sent corresponding to the form.

And in the second case, empty values are being sent. ie the post data sent to server is like following:

values[name]
values[description]

ie the above values are empty.

EDIT-2:

By logging on firephp, I have confirmed that the save_assignment PHP script is BEING EXECUTED. Thus ajax call is working fine but it is NOT passing the data correctly.

Answer 1

Try to use event.preventDefault() like,

$("#asgsave").on('click',function(e){
   e.preventDefault();
   save_assignment();
});

or use return false after ajax call like,

function save_assignment() {
    //ajax code
    return false;
}

Answer 2

you have to use callbacks in the success function, cause ajax is asynchronously

edit

have you already tried console.log('foo'); in your function? so you are able to test if the function is called ;)

edit 2

add the following line to your ajax options

dataType: "json"

Answer 3

You could just serialize your form values:
http://api.jquery.com/serialize/

However, looking over your code, I'll take a stab and guess that you are not getting and sending your values properly. Using jQuery, you grab a value from input like so:

$('#idofInput').val();

http://api.jquery.com/val/

You are doing: $('#asgname').text()

Format your data properly: data : { foo : 'bar', bar : 'foo' }

One last guess, make sure your CodeIgniter config has CSRF protection disabled, otherwise you would need to pass: $this->security->get_csrf_token_name() & $this->security->get_csrf_hash();