cabaret cabaret - 3 months ago 20
Ajax Question

CodeIgniter/Ajax - Send post values to controller

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

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

Comments