CODEWITHSUNDEEP
ajaxformsjquery
user818991
user818991

Reputation:

jQuery AJAX form submit error working success not

EDIT

Ok, so I can login fine but when I enter false info I'm redirected to the login page, what I need is to stay on the same page and show the error message e.preventDefault(); doesn't seem to work.

   $(function() { 
    $("#login-form").submit(function(e) { 
        $('.fail').hide();
        $.ajax({  
            url:"/login",
            type: "post",  
            data: $(this).serialize(),
            error:function(){
                $('.fail').show();
                e.preventDefault();
            },
            success: function(){ 
                document.location = '/'; 
                }
        });
        return false; 
    });
});

Upvotes: 2

Views: 15147

Answers (3)

Undefined
Undefined

Reputation: 11429

Your not actually doing anything with the form, ill try commenting your code to talk you through whats happening.

I'm guessing your using PHP server side for this code.

In PHP you want to check the user credentials and then tell the browser. If the login was successful send back "y", and if it failed "n".

<script type="text/javascript">
$(function() { 
    $("#login-form").submit(function() { 
        $('.fail').hide();
        $.ajax({  
            url:"/login",
            type: "post",  
            data: $(this).serialize(),
            error:function(){
                $('.fail').show();
            },
            success: function(data) {
                if (data == "y") {
                   //Login was successful. Redirect statement here?
                } else {
                   //Failed login message here
                }
            }
        });
        return false; 
    });
});
</script>

Edit

Try adding this in your success function. Please let me know what you get for a successful login and a failed login.

success: function(data) {
    console.log(data);
}

Edit 2

This is because your ajax call is successful, just that the login failed. This is why your success handler is called.

To sort this you'll need to see what is being returned from the server, is it nothing? In which case try:

success: function(data) {
    if (data == "") {
        e.preventDefault();
    } else {
        //Login successful, redirect user.
    }
}

Upvotes: 3

Mohsen Beiranvand
Mohsen Beiranvand

Reputation: 1022

the success occur when URL is found and accessible.
and error occur when URL is not found.
if you want check the callback MSG you must print it in the URL page & check data in success. like this:

<script type="text/javascript">
$(function() { 
$("#login-form").submit(function() { 
    $('.fail').hide();
    $.ajax({  
        url:"/login",
        type: "post",  
        data: $(this).serialize(),
        success:function(data){
            if(data=="true"){
               alert("success");
            }else{
               alert("faild")
            }
        }
    });
    return false; 
});
});

</script>

in login.php

<?php
//check if for true...
echo "true";
//and if it is not true...
echo "false";
?>

the data parameter in success is a string which get back the html content of "/login"

Upvotes: 0

Ozerich
Ozerich

Reputation: 2000

You should add:

success: function(data){ 
   /* Validation data here, if authentication answer is correct */
   if(data == 'ok')
       document.location = '/'; 
   else 
      /* show error here */
}

Upvotes: 0

Related Questions