Javascript/AJAX - OnSubmit doesn't work

This is what I have:

<form name="myts" method="post" action="ts.php" enctype="multipart/form-data" onsubmit="return upuInit(this)"> 
. 
. 
...bunch of inputs/buttons etc... 
. 
. 
<input type="hidden" id="isFormValidated" name="isFormValidated" value="">
</form>

<input name="image" type="image" src="img/submit.png" border="0" onClick="validateTS(document.forms['myts']);alert('yo iam back. val: '+document.forms['myts'].value);if(document.forms['myts'].isFormValidated.value == 'true') {alert('about to submit');document.forms['myts'].submit();}">

Here is the "validateTS" javascript which calls a PHP validation script (AJAX).

function validateTS(oForm) {
var x = GetXmlHttpObject();
var errMsg = "";
var url = "validateTS.php?usr=TEST";
var retVal = false;

// PC Work Hours
var pcWH = getElement("txtpcwk");
var pcTH = getElement("txtpctrv");
var pcTot = parseInt(pcWH.value) + parseInt(pcTH.value);

url += "&pcHrs0="+pcTot;

// Build the URL above and include the "updated" values.
var selectBox = getElement("addlst");
var myOptions = [];
for (var loop=0; loop<selectBox.options.length; loop++) {
    myOptions[loop] = { optText:selectBox.options[loop].text, optValue:selectBox.options[loop].value };
}

for (var loop=0; loop<myOptions.length; loop++) {
    var assWH = getElement("txtasswk_"+myOptions[loop].optV开发者_开发百科alue);
    var assTH = getElement("txtasstrv_"+myOptions[loop].optValue);
    var assWHTotal = parseInt(assWH.value) + parseInt(assTH.value);
    url += "&emp"+loop+"="+assWHTotal;
}

var tsApprover = getElement("txtappr").value;
var tsClientRep = getElement("txtins").value;

url += "&tsApprover="+tsApprover+"&tsClientRep="+tsClientRep;

x.open("GET",url,true);
x.onreadystatechange=function() {
    if(x.readyState == 4 && x.status == 200) {
        var r = x.responseText;
        var myUploadAlerts = "";
        var isUploadFilesValid = false;

        myUploadAlerts = validateUploadForm(oForm);
        r = r.trim();
        myUploadAlerts = myUploadAlerts.trim();
        if (r != "" || myUploadAlerts != "") {
            showMyAlerts("Please correct the following Error(s) before proceeding: <br><br>" + formatAlerts(r) + formatAlerts(myUploadAlerts), 500, block_ui_enabled);
            oForm.isFormValidated.value = "false";
        }
        else {
            oForm.isFormValidated.value = "true";   
        }
    }
};
x.send(null);

}

Now I HAVE 2 major issues: 1) When I click on the input image (in the form) it goes to ValidateTS function and validates the form and all no PROBLEM. And shows the alert if any errors. But it DOES NOT set "isFormValidated" value in the form...don't know why...may be I can return something else rather then setting a form value?

2) This is giving me more greif then everything else. In the entire form I have an "UPLOAD" piece where user's can upload anything. But I have only ONE BUTTON (the image button in the form to SUBMIT). So when I click on the image it first validates the form, as mentioned in issue 1, and then ends up "SUBMITTING" the form. Now when I call the javascript submit function I assume it would execute the "ONSUBMIT" function on the form (THIS DOESN'T GET EXECUTED...and form ends up getting submitted to ts.php).

I want it so when I click on the input image (submit image button), the form gets validated, and if isFormValidated is TRUE, I run "document.myts.submit()" and then onsubmit="return upuInit(this)" is executed. PLEASE HELPPP I've just spent too much time on this and now I am stuck.

---

A few notes from what I can see:

1. Your alert isn't referencing the form value:

alert('yo iam back. val: '+document.forms['myts'].value);

Should be:

alert('yo iam back. val: '+document.forms['myts'].isFormValidated.value);

1. You need to ensure that your AJAX request is being made synchronously (in blocking mode), not using the normal asynchronous mode, otherwise the alert will be run before the form is set by the callback function you assign to onreadystatechange.

2. Unfortunatley, the onsubmit event isn't actually raised when you submit a form via JavaScript so you need to call your upuInit() function first. So you would need to change the code from:

document.forms['myts'].submit();

To:

if(upuInit(document.forms['myts'])) {document.forms['myts'].submit()};

Hope this helps.

---

For other people following are the functions I borrowed. and with some of my edition to run Ajax requests Synchronously.

function runSynchronousAjax(url) {
    var AJAX = GetXmlHttpObject();
    if (AJAX) {
        AJAX.open("GET", url, false);
        AJAX.send(null);
        return AJAX.responseText;
    } 
    else {
        return false;  
    }
}

function GetXmlHttpObject() {
    var A = null;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        A = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        // code for IE6, IE5
        //return new ActiveXObject("Microsoft.XMLHTTP");

        try {
            A = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e) {
            try {
                A = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(err) {
                A = null;
            }
        }
    }
    return A;
}