CodeIgniter/Ajax - Send post values to controller

Question

I'm working on a simple login form. When the user clicks on the Login button, I want to send the post values to my controller, validate them against my database (using a model) and return a value. Based on that value, I want to either send the user to the member area, or display an error message on my form. This error message has a class 'error' and is hidden by default. I want to use jQuery's show() to show it when the credentials are wrong.

My form has two textfields, one for the email address, other one for the password and a submit button. However, I have never really worked with Ajax except for VERY basic things like a simple loader, so I'm not sure what to do next.

    $("#btn_login").click(
    function()  
    {
    // get values
    var email_address = $("#email_address").val(); 
    var password =  $("#password").val();

    // post values? and ajax call?

    //stop submit btn from submitting
    return(false);

    }
);

I assume I have to use jQuery's ajax() method here, so I was thinking of working off this example:

$.ajax({
     type: "POST",
     url: "some.php",
     data: "name=John&location=Boston",
     success: function(msg){
        alert( "Data Saved: " + msg );
     }
});

However, I'm not really sure how to get my post values (those two vars) in the data: thingy.. Or should I take another road here? This seems like something I'll never forget how to do once I learn it, so if someone can help me out I'd be grateful. Thanks a lot.

Answer 1

All you need to do is create a key/value pair with the values and assign it to the data parameter and jQuery will do the rest.

//create a js object with key values for your post data
var postData = {
  'email' : email_address,
  'password' : password
};

$.ajax({
     type: "POST",
     url: "some.php",
     data: postData , //assign the var here 
     success: function(msg){
        alert( "Data Saved: " + msg );
     }
});

With this, you should be able to access the data with Codeigniters input

EDIT

I've set up a test fiddle here : http://jsfiddle.net/WVpwy/2/

$('#dostuff').click(function(){
    var email_address = $("#email_address").val(); 
    var password =  $("#password").val();

    var postData = {
      'email' : email_address,
      'password' : password,
      'html' : 'PASS'
    };

    $.post('/echo/html/', postData, function(data){
        //This should be JSON preferably. but can't get it to work on jsfiddle
        //Depending on what your controller returns you can change the action
        if (data == 'PASS') { 
            alert('login pased');
        } else {
            alert('login failed');
        }
    });
});

I just prefer .post, but what you used is an equivalent.

Basically your controller should echo out data. Not return. You need to send a string representation of your data back so your script can (evaluate if json) and act on it

Here's a good example as a starting point : http://www.ibm.com/developerworks/opensource/library/os-php-jquery-ajax/index.html

Answer 2

just modifiy a little bit the url of your ajax :

$.ajax({
     type: "POST",
     url: "some/myfunction",
     data: "name=John&location=Boston",
     success: function(msg){
        alert( "Data Saved: " + msg );
     }
});

Make sure your url point to the function you want inside your controller. For example: "myfunction" inside the controller some (in the file Some.php)

To access to your post variables inside the controller function do not try to put parameters to myfunction but :

class Some extends CI_Controller 
{
        ......

public function myfunction()
{
    $name = $this->input->post('name');
    $location = $this->input->post('location');
}
       ......
}