Calling in a second page from an ajax called page?

[imperialized]

I hope someone can help! I'm truly stuck here.

 

** I am using the latest version of jQuery and jQueryUI **

 

Im working on writing a script to edit user information. Basically what happens is this:

 

A user clicks on a link >

    using jQuery, I pull information from a second page to populate a DIV on my current page.

function editaccount(id){
    
   jQuery.ajax({
   type: "POST",
   url: "include/ajax/accountActions.php",
   data: 'id=' + id + '&mode=editAccountView',
   cache: false,
   success: function(response){
   var responseCode = response.substring(0,2);
   var responseString = response.substring(2);   
   if(responseCode == "ok"){
    $("#editAccountDiv").hide().html(responseString).fadeIn("slow").draggable();
   } else { 
   alert("Response is: " + responseString) //Error
   }
   
	   }
     });
}

 

Once this page has loaded it has a form to update user information. What I want to do is use another AJAX call to save my form.

 

Currently my form submit function is:

function checkForm(){
    var error = 0;
    var error_msg = "";
    var FullName = document.getElementById("FullName").value;
    var BdayMonth = document.getElementById("BdayMonth").value;
    var BdayYear = document.getElementById("BdayYear").value;
    var BdayDay = document.getElementById("BdayDay").value;
    var PhoneNumber = document.getElementById("PhoneNumber").value;
    var AddressStreet = document.getElementById("AddressStreet").value;
    var AddressState = document.getElementById("AddressState").value;
    var AddressApt = document.getElementById("AddressApt").value;
    var ZipCode = document.getElementById("ZipCode").value;
    var AddressCity = document.getElementById("AddressCity").value;
    var isAdmin = document.getElementById("isAdmin").value;
    var isValidated = document.getElementById("isValidated").value;
    var aboutMe = document.getElementById("about_me").value;
    
    //Lets do some basic javascript checks before we go calling ajax stuff
    
    if(FullName.length == 0){
        error = 1;
        error_msg = "     Full Name field is empty \n";   
    }
    
    //Phone Number
    var PhoneReg = /^\((\d{3})\)(\d{3})[- ](\d{4})$/;
    if(!PhoneReg.test(PhoneNumber) || PhoneNumber.length < 12){ 
        error = 1; 
        error_msg = error_msg + "     Phone Number is in incorrect format \n";
        }
    
    //Check Street Address
       var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?~_";
        for (var i = 0; i < AddressStreet.length; i++) {
  	     if (iChars.indexOf(AddressStreet.charAt(i)) != -1) {
  	         error = 1;
             error_msg = error_msg + "     Address contains invalid characters \n";
             }
        }
    //Zip Code
    if(ZipCode.length < 5){
        error = 1;
        error_msg = error_msg + "     Zip Code is too short \n";
    }
    
    //Check Street Address
        if(AddressStreet == ""){
        error = 1;
        error_msg = error_msg + "     Street Address is blank \n";
    }  
    
    //Check City
    if(AddressCity .length < 5){
        error = 1;
        error_msg = error_msg + "     City is too short \n";
    }
    
    if(error > 0){
        //and Error has occured
        alert("Fix the selected errors before submitting: \n\n" + error_msg)
        return false;
    }
    
jQuery.ajax({
   type: "POST",
   url: "include/ajax/check_username.php",
   data: 'username='+ username,
   cache: false,
   success: function(response){
        if(response == "OK"){
        alert("ok!")
}else{
        alert("not ok?")
    return false;
     }
    }
}); 
}

 

Notice that I use getElementById to grab the variables. This is because using the jQuery selector $('xxx') would not pull the variable, it would only echo give me "undefined".

 

All of the error checking works just fine, just can not get the jquery call to work.

 

Can someone please point me in the right direction?