How to create a Codeigniter non page refreshing signup form?

Question

Heres what I'm trying to do.

I want to have a homepage with my signup form that doesn't refresh the page every time a validation step is failed.

I want my signup form to have 2 steps.

1st step signup form fields and date dropdown.. when all this is passed successfully then it will forward to captcha without refreshing the page or maybe even popup with captcha. When the captcha is successfull passed the user will be registered.

Currently when validation is passed my controller loads a view submit_success.php..

What is the best way to achieve what I'm trying to do?

Ajax? Javascript?

Are there any codeigniter tutorials you can point me to?

Or would you be able to give me an example?

Answer 1

You could make ajax calls back to CI for validation using $.ajax or $.post, that way you only have to create your validation rules in CI.

Here's an example I found to get you started: jquery post codeigniter validation

And Here's a CodeIgniter example of Captcha with ajax: http://www.99points.info/2010/03/verify-captcha-with-ajax-using-codeignite/

Answer 2

//html function 
<div id="report"></div>
<form>
username : <input type="text" id="username" />
password : <input type="password" id="password" />
<input type="button" id="submit" onclick="validate();" value="sign in" />
</form>

//javascript function
function validate()
{



                var username = $("#username").val();//get value for username via d username id
                var password = $("#password").val();//get the value for password via d password id






                var url_link = "http://localhost/site_root/controller/blank";
                var reload_url = "http://localhost/site_root/controller/validation_function";
                var form_data = {
                username: username,
                password: password,
                ajax : '1'
                };
                $.ajax({
                url: url_link,
                type: 'POST',
                async : false,
                data: form_data,
                success: function() {

                 $("#report").load(reload_url);


                }
                });
                return false;
}


//controller

<?php if(!defined("BASEPATH")) exit("no direct access allowed");

class Controller extends CI_controller
{

        function  __construct()
        {
        parent::_construct();
        }


        function blank()
        {

        }



        function validate_function()
        {
        $username = $this->input->post->("username");
        $password = $this->input->post->("password");

        /*
        perform db validation if passed redirect user to the ideal url (logged in user page)
        */
        else
        /*
        $this->load-view("wrong_credentials");
        */


        }


}
?>

//wrong_credentials.php view

<?php
echo "wrong user name and password combination . try again";
?>