How To Call Javascript In Ajax Response? IE: Close a form div upon success

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 a开发者_开发百科fter 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...

<script language="javascript" type="text/javascript">
    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";
        }
    }
    </script>

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

The AJAX call is:

window.addEvent('domready', function(){
$('myForm').addEvent('submit', function(e) {
new Event(e).stop();
var log = $('log_res').empty().addClass('ajax-loading');
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
}
});
});
});

Div ID log is where the ajax call back text (validation errors and success message) and loading graphic appear

This is a duplicate of How to make JS execute in HTML response received using Ajax? where I provided the chosen solution.

var response = "html\<script type=\"text/javascript\">alert(\"foo\");<\/script>html";
 var reScript = /\<script.*?>(.*)<\/script>/mg;
 response = response.replace(reScript, function(m,m1) {
     eval(m1); //will run alert("foo");
     return "";
 });
alert(response); // will alert "htmlhtml"

Your AJAX call should have a "success" callback. It looks like you can simply call displayDiv() in that callback.

Also note that the var divstyle = new String(); line is unnecessary. Strings are immutable in JavaScript, so you are creating an empty string object, which remains unreferenced in the following line. Simply declare the variable when you assign it from document.getElementById():

var divstyle = document.getElementById("myForm").style.display;

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

//Since your making php do the validation, there would be two cases,
//the first case is that the php script is not echoing any thing on success, and 
//the other case is that its echoing the error massages which will be assignedxmhttp.responseText
//so we need to check that xmlhttp.resposeText has been asigned a value.

   if(xmlhttp.resposeText){
       document.getElementById(displayContainers_id).innerHTML=xmlhttp.responseText;
   }
}