javascript function return error with ajax response

Question

Possible Duplicate:
How to return the response from an AJAX call from a function?

I'm having a problem with this code.

when this function return FALSE, it works fine.

but if it return TRUE, it doesn't.

I want the form to be submitted when the function returns TRUE.

<form  action='register.php' method="post" onsubmit="return validate()" > ... </form>

here's the script

<script language="JavaScript">
function validate() 
{
    var toreturn = false;


        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        var e = document.getElementById('e').value;
        var p = document.getElementById('p').value;
        var r = document.getElementById('r').value;


        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {



                if(xmlhttp.responseText != "ok")
                {
                    document.getElementById("msg").innerHTML = xmlhttp.responseText;

                    $(function() {
                      $("#msg").hide().fadeIn("slow");
                    }, 3000);


                }
                else    toreturn = true;    

            }
        }

        xmlhttp.open("POST","register_validate.php");
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("e="+e+"&p="+p+"&r="+r);



        return toreturn;
}
</script>

You can't do that... your best choice is to trigger the submit event again when you get the response. — Felix Kling, Jan 19 '13 at 01:55

score 1 · Answer 1 · answered Jan 19 '13 at 02:07

As mentioned in the comments, you are having a problem with the asynchronous code. Your toreturn variable is not being filled in by the time you return from the validate function.

For the AJAX callback:

xmlhttp.onreadystatechange = function () {
    // ...
}

You can imagine that the code you put inside that function will be 'put to the side' and called later, after your current function has already finished (specifically, when the AJAX request's ready state changes).

What you want to do is make your button not be a submit button. Then, in your AJAX callback, submit the form if you get a successful result (this will require giving the form an id):

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        if (xmlhttp.responseText != "ok") {
            document.getElementById("msg").innerHTML = xmlhttp.responseText;

            $(function () {
                $("#msg").hide().fadeIn("slow");
            }, 3000);


        } else document.getElementById('your-form-id').submit();
    }
}

score 0 · Accepted Answer · edited May 23 '17 at 12:12

0

the problem solved by adding false in

xmlhttp.open("POST","register_validate.php",false);

thanks for the answer by @Felix Kling at How do I return the response from an asynchronous call?

adding FALSE value making the function SYNCHRONOUS

edited May 23 '17 at 12:12

Community

1
1

answered Jan 19 '13 at 02:12

Sam San

6,567
8
33
51

Yes, but that will make the browser unresponsive until the request is completed. Seriously, don't do that, go async and use callbacks. – bfavaretto Jan 19 '13 at 02:33
@bfavaretto is it ok if I still use that if I now that the response I am waiting is taking only short time? – Sam San Jan 19 '13 at 03:02
The problem is, you can't know how long it's going to take for all users. – bfavaretto Jan 19 '13 at 03:12

javascript function return error with ajax response

2 Answers2