how to check email exist with Jquery and ajax?

[eluser]Kency[/eluser]
Hi everybody i try to check email exists with Jquery and codeigniter but i can't do it

my jquery code

Code:

//check email
             $('#email').blur(function(){
                  var email = $('#email').val();
                 if( $(validateEmail(email) )
                 {
                     var email = $('#email').val();
                     getResultEmail(email);
                 }else{
                     alert("invalid email address");
                 }
                 return false;
             })
             function getResultEmail(email){
                 var baseurl = $('.hiddenUrl').val();
                 $('.checkEmail').addClass('preloader');
                 $.ajax({
                     url : baseurl + 'admin/user/checkemail/'+email,
                     cache : false,
                     success : function(response){
                         $('.checkEmail').removeClass('preloader');
                         if(response == 'userOk') $('.checkEmail').removeClass('userNo').addClass('userOk');
                         else $('.checkEmail').removeClass('userOk').addClass('userNo');

                     }
                 })
             }

             function validateEmail(email) {
                 var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                 return regex.test(email);
             }

and my controller

Code:

public function  checkemail($email){
        
        $query = $this->user_model->checkemail($email);
        if($query == 0) echo 'userOk';
        else echo 'userNo';
    }

and my model

Code:

function checkusername($username)
    {
        $this->db->where('username',$username);
        $query = $this->db->get('user')->num_rows();
        return $query;
    }

my view:

Code:

<div class="formRow">
            <label>Email:<span class="req">*</span></label>
            <div class="formRight">
                &lt;?php

                $data = array(
                    "name" => "email",
                    "value" => "",
                    "required" => "" ,
                    "title" => "",
                    "id" => "email"
                );

                echo form_input($data);
                ?&gt;

                <p class="checkEmail"></p>
                &lt;input type="hidden" class="hiddenUrl" value="&lt;?php echo base_url() ?&gt;"&gt;
            </div>
            <div class="clear"></div>
        </div>

and my problem is when i enter email address into text field, it just show preloader and it can't check email exist or not

i know codeigniter prevent @ in uri (because my code will show uri like admin/user/checkemail/[email protected])

but i try to use another way, but it not work too

i change my code to

Code:

$('#email').blur(function(){

                
                     //var email = $('#email').val();
                     getResultEmail();
                
                 return false;
             })
             function getResultEmail(){

                 var baseurl = $('.hiddenUrl').val();
                 $('.checkEmail').addClass('preloader');
                 $.ajax({
                     url : baseurl + 'admin/user/checkemail/',
                     cache : false,
                     success : function(response){

                         $('.checkEmail').removeClass('preloader');
                         if(response == 'userOk') $('.checkEmail').removeClass('userNo').addClass('userOk');
                         else $('.checkEmail').removeClass('userOk').addClass('userNo');

                     }
                 })
             }

my controller

Code:

public function  checkemail(){
        $email = $this->input->post('email');
        $query = $this->user_model->checkemail($email);
        if($query == 0) echo 'userOk';
        else echo 'userNo';
    }

but i got no result and preloading still load @.@

please help me!

[eluser]Silviu[/eluser]
Indeed, CI allows (by default) only certain characters in the URL. You can change those characters in your application config file.

However, my suggestion is to simply use POST when sending your AJAX request.

Should be something along these lines in your script:

Code:

$.ajax({
                     url : baseurl + 'admin/user/checkemail/',
                     data: {useremail:email},
                     cache : false,
                     type: 'POST',
                     success : function(response){
                         $('.checkEmail').removeClass('preloader');
                         if(response == 'userOk') $('.checkEmail').removeClass('userNo').addClass('userOk');
                         else $('.checkEmail').removeClass('userOk').addClass('userNo');

                     }
                 })

And in your controller do this:

Code:

public function  checkemail(){
        $email = $this->input->post('useremail');
        $query = $this->user_model->checkemail($email);
        if($query == 0) echo 'userOk';
        else echo 'userNo';
    }

Give it a shot, see how it goes.

[eluser]Kency[/eluser]
@Silviu thank for ur reply

but i change a little bit of your answer and it work well Thank you

Code:

data : "email="+email,

[eluser]Kency[/eluser]
I have problem when i try to prevent user submit if it check is username or password exits

i try using return false for Ajax section but when user enter right email and not exist in db form cannot submit, can u help me @Silviu


Thank you very much

[eluser]Silviu[/eluser]
*** Note ***: You cannot really prevent a user submitting a form. All it has to do is to disable JS in the browser.

To stop a form from being submitted, you must "return false" on the form's onsubmit event.

Code:

<form on+submit="checkFields()">
......
</form>

<scri+pt>
   function checkFields(){
       if(!conditions_are_met)
           return false;
   }
</scri+pt>

(replace 'on+submit' with 'onsubmit' and 'scri+pt' with 'script' in your code)

As noted before, this is not a safe way to accept user input.
To be sure, you must re-check the data in the method that receives and processes the input.

[eluser]nl_vinyl[/eluser]
Why don't you make a custom validation rule that handles this for you? As soon as it validates and the rule is "false" then the form won't submit. Not only is this server side code, so it does not depend on javascript it also keep everything in one place.

And it is not a great idea to use javascript in your form itself.
Use jQuery with a "onsubmit" event. That way you keep you code clean and separated.

A better way to send the data is to not do it in the URL but just send it with jQuery as post data and handle that in a controller. Also be sure to validate the post data to prevent nasty stuff.