call javascript/ajax function from php

Question

i have a little problem here!!

after i submit my form, based on php response i want to execute another javascript or ajax function!

this is my form:

    <form id="uploadForm" onsubmit="ytVideoApp.prepareSyndicatedUpload( 
    this.videoTitle.value, 
    this.videoDescription.value, 
    this.videoCategory.value, 
    this.videoTags.value); 
    return false;"> 
    Enter video title:<br /> 
    <input size="50" name="videoTitle" type="text" /><br /> 
     Enter video description:<br /> 
    <textarea cols="50" name="videoDescription"></textarea><br /> 
    <select style="display:none" name="videoCategory"> 
    <option style="display:none" value="Music">Music</option> 
    </select> 
    Enter some tags to describe your video 
    <em>(separated by spaces)</em>:<br /> 
    <input name="videoTags" type="text" size="50" value="video" /><br /> 
    <input  id="butok" type="submit" value="go" > 
    </form>

on submit run this javascript function

 ytVideoApp.prepareSyndicatedUpload = function(videoTitle, videoDescription, videoCategory, videoTags) {
    var filePath = 'operations.php';
    var params = 'operation=makesomething' +
                 '&videoTitle=' + videoTitle +
                 '&videoDescription=' + videoDescription +
                 '&videoCategory=' + videoCategory +
                 '&videoTags=' + videoTags;
    ytVideoApp.sendRequest(filePath, params, ytVideoApp.SYNDICATED_UPLOAD_DIV);
}

where ytVideoApp.sendRequest is:

ytVideoApp.sendRequest = function(filePath, params, resultDivName) {
  if (window.XMLHttpRequest) {
    var xmlhr = new XMLHttpRequest();
  } else {
    var xmlhr = new ActiveXObject('MSXML2.XMLHTTP.3.0');
  }

  xmlhr.open('POST', filePath);
  xmlhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 

  xmlhr.onreadystatechange = function() {
    var resultDiv = document.getElementById(resultDivName);
    if (xmlhr.readyState == 1) {
      resultDiv.innerHTML = '<b>Loading...</b>'; 
    } else if (xmlhr.readyState == 4 && xmlhr.status == 200) {
      if (xmlhr.responseText) {
        resultDiv.innerHTML = xmlhr.responseText;
      }
    } else if (xmlhr.readyState == 4) {
      alert('Invalid response received - Status: ' + xmlhr.status);
    }
  }
  xmlhr.send(params);
}

I tried with: echo "<script>function();</script>" not working print "alert('something');"; not working

any 1 can help me?

thanks!

Answer 1

You can probably get what you want be changing:

resultDiv.innerHTML = xmlhr.responseText;

to:

eval(xmlhr.responseText);

This is probably a pretty bad idea, but you can do it this way and anything returned from the server will be executed as javascript.

A better solution would be to modify your ajax method so that it takes a callback function rather than an element to update. It would look more like this:

ytVideoApp.sendRequest = function(filePath, params, callback) {
    ...
    } else if (xmlhr.readyState == 4 && xmlhr.status == 200) {
        if(callback) callback(xmlhr.responseText);
    }
    ...

And you'd call it like this:

ytVideoApp.sendRequest(filePath, params, function(responseText) {
    // Do something with the stuff sent back from the server...
});

Better yet... Use a javascript framework, like jQuery, Prototype, MooTools or YUI.