Mail not sending after valiidation-Collection of common programming errors

this is an expanded version of a question I asked last night, but with much more detail. All my php files and js file are in a folder called js one level down from my html pages. I have a contact form that mails the content of my shopping cart and form inputs to my email using php mail. I am validating the form on submit:


with this submit button:


The validation works as it should, here is the code (validate.js):

function setSelRange(inputEl, selStart, selEnd) { 
if (inputEl.setSelectionRange) { 
inputEl.focus(); 
inputEl.setSelectionRange(selStart, selEnd); 
} else if (inputEl.createtextRange) { 
var range = inputEl.createtextRange(); 
range.collapse(true); 
range.moveEnd('character', selEnd); 
range.moveStart('character', selStart); 
range.select(); 
} 
}

window.onload=function(){
setSelRange(document.theForm.textbox, 0, 0);
}

function validateFormOnSubmit(theForm) {
var reason = "";
reason += validateName(theForm.name);
reason += validatePhone(theForm.phone);
reason += validateEmail(theForm.emaile);

if (reason != "") {
alert("Some fields need correction:\n" + reason);
return false;
}

simpleCart.checkout()
}



function validateEmpty(fld) {
var error = "";

if (fld.value.length == 0) {
    fld.style.background = '#3399ff'; 
    error = "The required field has not been filled in.\n"
} else {
    fld.style.background = 'White';
}
return error;  
}



function trim(s)
{
return s.replace(/^\s+|\s+$/, '');
}

function validateName(fld) {
var error = "";
var illegalChars = /\W/; // allow letters, numbers, and underscores

if (fld.value == "") {
    fld.style.background = '#3399ff'; 
    error = "Please enter a name.\n";
} else if ((fld.value.length < 2) || (fld.value.length > 30)) {
    fld.style.background = '#3399ff'; 
    error = "The nme is too long!\n";
} else {
    fld.style.background = 'White';
}
return error;
}

function trim(s)
{
return s.replace(/^\s+|\s+$/, '');
}

function validateEmail(fld) {
var error="";
var tfld = trim(fld.value);                        // valu
trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\(\)\\,\;\:\\\"\[\]]/ ;

if (fld.value == "") {
    fld.style.background = '#3399ff';
    error = "Please enter an email address.\n";
} else if (!emailFilter.test(tfld)) {              //test email for illegal characters
    fld.style.background = '#3399ff';
    error = "Please enter a valid email address.\n";
} else if (fld.value.match(illegalChars)) {
    fld.style.background = '#3399ff';
    error = "The email address contains illegal characters.\n";
} else {
    fld.style.background = 'White';
}
return error;
} 

function validatePhone(fld) {
var error = "";
var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');    

if (fld.value == "") {
    error = "Please enter a phone number.\n";
    fld.style.background = '#3399ff';
 } else if (isNaN(parseInt(stripped))) {
    error = "The phone number can only contain numbers.\n";
    fld.style.background = '#3399ff';
 } else if (!(stripped.length == 10)) {
    error = "The phone number is the wrong length.     area        code.\n";
    fld.style.background = '#3399ff';
}
return error;
}

I am tring to then run the function simpleCart.checkout() when the form successfully validates: (from the above code)

  if (reason != "") {
alert("Some fields need correction:\n" + reason);
return false;
}

simpleCart.checkout()
}

here is the function from simpleCart.js I am tring to call, (set to emailCheckout):

me.checkout = function() {
    if( me.quantity === 0 ){
        error("Cart is empty");
        return;
    }
    switch( me.checkoutTo ){
        case PayPal:
            me.paypalCheckout();
            break;
        case GoogleCheckout:
            me.googleCheckout();
            break;
        case Email:
            me.emailCheckout();
            break;
        default:
            me.customCheckout();
            break;
    }
};

me.emailCheckout = function() {    

itemsString = "";
for( var current in me.items ){ 
    var item = me.items[current];
    itemsString += item.name + " " + item.quantity + " " + item.price + "\n";
}   

var form = document.createElement("form");
form.style.display = "none";
form.method = "POST";
form.action = "js/sendjs.php";
form.acceptCharset = "utf-8";
form.appendChild(me.createHiddenElement("wsp_key", wsp_key));
form.appendChild(me.createHiddenElement("wsp_code", wsp_code));
form.appendChild(me.createHiddenElement("textbox", textbox));
form.appendChild(me.createHiddenElement("name",name));
form.appendChild(me.createHiddenElement("phone",phone));
form.appendChild(me.createHiddenElement("emaile",emaile));
form.appendChild(me.createHiddenElement("jcitems", itemsString));
form.appendChild(me.createHiddenElement("jctotal", me.total));
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}

It recieves the cart info, inputs and captcha key and code from the form and actions sendjs.php to mail it to me:

(from the code above)

form.action = "js/sendjs.php";

If the captcha code is correct it will mail it to me and redirect to “from-accepted.php” page, if not it will redirect to a “form-rejected.php” page (sendjs.php):


The problem is that after validation is doesn’t action sendjs.php and just reloads the contact page. Debugger is showing no error and I have tested simpleCart.checkout by other means and it should work. Sorry for the length of this post but I am stumped and am losing business (and a lot of sleep trying to get it to work) not having this form functioning.

here is a link to the page:

http://www.diysoakwells.com.au/cart.php

Does anyone have any suggestions? I have to pop out now for an hour but I will be monitoring this post and when I return, working on the problem for at least the next four or five hours or until its fixed. Thanks in advance.

Jamie