Why does this function not return JSON string?

function addphoto()
{
    var ajaxRequest = initAjax();
    if (ajaxRequest == false)
    {
        return false;
    }

    // Return Ajax result when the state changes later
    ajaxRequest.onreadystatechange = function()
    {
        if(ajaxRequest.readyState == 4)
        {
            alert(ajaxRequest.responseText);
            return ajaxRequest.responseText;
        }
    }

    // Capture form elements
    var values = {
        "category" : encodeURIComponent(document.addphoto.category.options[document.addphoto.category.selectedIndex].value),
        "photo_title" : encodeU开发者_Python百科RIComponent(document.addphoto.photo_title.value),
        "photo_descrip" : encodeURIComponent(document.addphoto.photo_descrip.value)
    }

    var queryString = '?', i = 0;
    for (var key in values)
    {
        if (i != 0)
        {
            queryString += '&'
        }
        queryString += key + '=' + values[key];
        i++;
    }

    // Execute Ajax
    ajaxRequest.open("POST", "ajaxcheckform.php" + queryString, true);
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajaxRequest.setRequestHeader("Content-length", queryString.length);
    ajaxRequest.setRequestHeader("Connection", "close");
    ajaxRequest.send(null);
}

function ajaxCheckform(formname)
{
    var response = addphoto(); // <--This is undefined and not sure why
    var responseObj = JSON.parse(response);

    if (responseObj.success == 1)
    {
        // Successful form!
        alert(responseObj.success_text);
    }
    else
    {
        // Error!
        alert(responseObj.error);
    }
}

I'm sure I must be making some basic error somewhere, but I'm having trouble locating it. In this script, ajaxCheckform() is a function that executes one of several similar functions. Above, I included addphoto(), which is one of several functions I'll need that look like this.

On a side note, I'd love to know I can call upon a function dynamically. The addphoto() function will be only one such function being called up at that moment and I'm trying to find a way to pass formname as the function I need. I've searched Stackoverflow and Google. I've found nothing that works.

Note, I'm aware of jQuery, but I'm not there yet. I need this function to work first.

---

It is not addphoto() thats undefined but response is undefined. ajaxRequest is asynchronous and the addphoto() function will return before the request completes.

try this

function addphoto() {...

    // Return Ajax result when the state changes later
    ajaxRequest.onreadystatechange = function()
    {
        if(ajaxRequest.readyState == 4)
        {
            alert(ajaxRequest.responseText);            
            var responseObj = JSON.parse(ajaxRequest.responseText);

            if (responseObj.success == 1) {
                 // Successful form!
                 alert(responseObj.success_text);
            }
           else {
               // Error!
               alert(responseObj.error);
           }        
        }    
    }
....
}

function ajaxCheckform(formname) {
    addphoto();    
}

---

That's because response is set to the return of addphoto(), which is nothing. What you want to do is have ajaxCheckForm get called when the AJAX call is completed:

// Return Ajax result when the state changes later
ajaxRequest.onreadystatechange = function()
{
    if(ajaxRequest.readyState == 4)
    {
        ajaxCheckform(ajaxRequest.responseText);
    }
}

Then your ajaxCheckform will work with that data:

function ajaxCheckform(responseText)
{
    var responseObj = JSON.parse(responseText);

    if (responseObj.success == 1)
    {
        // Successful form!
        alert(responseObj.success_text);
    }
    else
    {
        // Error!
        alert(responseObj.error);
    }
}

---

You can't return from an event handler (which onreadystatechange is).

You have to do the work inside that event handler.

---

addphoto() does not return anything (or rather, returns inconsistently) ... the onreadystatechange event's handler is returning the value, but there is no caller that will receive that json string.

I'd highly suggest that you abstract these details away with something like jquery ... just follow the docs for suggested usage and this code will be much simpler

---

You're sending a GET style parameter list to a POST method.

You need to send that string in the body of your HTTP request.

---

var response = addphoto(); // <--This is undefined and not sure why

The addphoto() function never has a return statement in it, so it returns undefined. And the ajaxRequest is asynchrous and wont return immediately.