4

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.

Improve this question

3 Answers 3

Reset to default
7

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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Say I put error: instead of success:, what would I have to return from my PHP to make it go in there? Just return false? I got to the part where I have the returns of my model in my controller (true if user is found, false if not). now if successful, I'll take the user to a new page, but if not successful I want to get back to my form page and show the error class. If that makes sense. Just not sure how to get back there.. :(
@cabaret error: is called only if the request fails. In your case I would recommend you return a json object that can then be examined to see what to do next. Just json_encode in PHP and echo it. And on your JS side, you can eval that data and see what to do next.
Thanks a lot for the edit. I'll make sure to check the link and try this.
Okay, I figured out what my problem is. I checked this link: developertutorials.com/tutorials/ajax/… and I understand the whole ajax thing, but the problem is.. When I send my post data to my controller (login/go), it somehow echoes back the data there instead of on the form page (login/index).. because well.. submitting the form takes me to login/go, it doesn't let me stay on the login/index page. CodeIgniter takes me there and doesn't redirect back to the index page. Do I need to put it manually or something? :(
haha, we all have those moments! I run through a checklist of the most obvious stuff every time I get stumped.
|
4

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');
}
       ......
}
Improve this answer

Comments

1

You can definitely use your method, but a shorthand method is this:

$.post("some.php",{name:"John",location:"Boston",email:email_address,password:password},function(data,textStatus) { //response from some.php is now contained in data });
Improve this answer

1 Comment

btw, a better method for the submit button to stop submitting is this: $("#btn_login").click(function(e) {e.preventDefault(); //rest of the function); It essentially stops all browser default behaviours from any control.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.