Checking result of an html form using javascript

Question

I am using an html form to upload a file to my server. I want to execute a javascript function only after the form has been submitted and the file has been successfully uploaded. The form opens a new page with the text "upload succeeded" if the file upload worked. I tried using a while loop that would loop until the file was found in the database but it crashed my browser. How can I do this? I'm using myform.submit() to submit my form right now.

Answer 1

If the post went well, and you save the file before flushing the page contents, this is easy. The page won't return until the post cycle is ready, so you could insert javascript code to the page after the saving of the file.

Answer 2

You can use AJAX to upload you file and you the async return function (this is a event that will trigger when your request is done) to ether a success or failed message from you php.

EDIT:

Here is a ajax function iv made that u can use, just load this in an extenal file:

var ajax = function(data){
// Return false is no url... You need an url to get url data..
if(typeof data.url !== 'undefined'){
    var url = data.url;
    // Adept the function depending on your method
    if(data.method === 'GET' && data.params  !== 'undefined'){
    url+='?'+data.params;
    }
}else{
    return(false);}
var // Set some vars 'n' stuff
method      = ( data.method  === 'GET') ? 'GET' : 'POST',
params      = (typeof data.params  !== 'undefined') ? data.params   : null,
async       = ( data.async   === true) ? true    : false,
done        = (typeof data.done    === 'function')  ? data.done     : false,
return_value    =  null,
length      = (data.method  === 'POST') ? data.method.length : '';

var // Find out what ajax methods the browser support
    request_method  =  function(){
    var xmlhttp =  false;
    try {
    xmlhttp = new XMLHttpRequest();
    } catch (trymicrosoft) {
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
        try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (failed) {
        xmlhttp = false;
        }
    }
    }
    return xmlhttp;
}// This thing connet to the server
connect = function(){
    if(request = request_method()){}else{
    return(false);
    }
    request.open(method, url, async);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-length", length);
    request.setRequestHeader("Connection", "close");
    request.send(params);
    request_handle(request);
},// This is where the result get processed
request_handle = function(request){
    if(async){
    request.onreadystatechange = function() {
        if(request.readyState === 4 && request.status === 200) {
        done(data);
        }
    }
    }else{
    done(data);
    }
};

    connect();
return(return_value);
}

usage:

    ajax({
        url:    'test.php', 
        //// Your ajax request url              // no default // Must be set! 
        method: 'POST',  
        //// Method of sending ajax data            // default is POST
        async:  true, 
        //// What to do when done with the request      // no default
        done:   function(http){
        table(http,'test');
        }
    });

Answer 3

one simple thing you can do

use executescalar to insert uploading file as soon as it inserts the file return boolean value to check whether it is inserted,if so then set hiddenfield value. in javascript check the value of the hiddenfield and according to that you can call your javascript function