I have a form that when you submit it, it sends the data for validation to another php script via ajax. Validation errors are echo'd back in a div in my form. A success message also is returned if validation passes.

The problem is that the form is still displayed after submit and successful validation. I want to hid the div after success.

So, I wrote this simple CSS method which works fine when called from the page the form is displayed on.

The problem is that I cannot seem to call the hide script via returned code. I can return html like

echo "<p>Thanks, your form passed validation and is being sent</p>";

So I assumed I could simply echo another line after that

echo "window.onload=displayDiv()";

and that it would hide the form div.

It does not work. I am assuming that the problem is that the javascript is being returned incorrectly and not being interpreted by the browser...

How can I invoke my 'hide' script on the page via returned data from my validation script? I can echo back text but the script call is ineffective.

Thanks!

This is the script on the page with the form...

I can call it to show/hide with something like onclick="displayDiv()" while on the form but I don't want the user to invoke this... it has be called as the result of a successful validation when I write the results back to the div...

    function displayDiv()
    {
        var divstyle = new String();
        divstyle = document.getElementById("myForm").style.display;
        if(divstyle.toLowerCase()=="block" || divstyle == "")
        {
            document.getElementById("myForm").style.display = "none";
        }
        else
        {
            document.getElementById("myForm").style.display = "block";
        }
    }
    

PS: I am using the mootools.js library for the form validation if this matters for the syntax..