Javascript functions only partially executed - php

Question

I am writing code to make a basic chatroom. The code I have takes lines entered into the input textbox, then uses Ajax to write to a random filename, then I have javascript loop every second using setInterval to load and display from the text file.
After the user logs in with information that populates a MySQL database I want to have a basic welcoming message automatically saved to the text file upon entering the chat. I do this by calling my saveData function with username as 'Host' and then the welcoming message which is declared in a variable.
The function that sends the login information to the database and the function that saves the welcoming message are both called under the login() function. The login() function is called after submitting the info form.
Here is the problem: I cannot get the functions, saveLogin() and saveData(), to BOTH fully execute when called under login(). If I comment one out and NOT the other, the function will work fine. So they work independently, but not together. If both functions are called then saveData() works fine, but saveLogin() will not. I have no idea why.
I was able to narrow the problem down to the 'XMLHttpRequestObject.send' event under the saveLogin() function. The rest of that function appears to be executed. I thought maybe it was a problem with the variable names or something, so I tried some variations, but nothing has resolved the issue.
<script language = "javascript">
// loads XML HTTP per browser type
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
//create random string
function randomString(len, charSet) {
charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var randomString = '';
for (var i = 0; i < len; i++) {
var randomPoz = Math.floor(Math.random() * charSet.length);
randomString += charSet.substring(randomPoz,randomPoz+1);
}
return randomString;
}
rString = randomString(128);
filename = rString;
// loads chat lines from file using POST method with timer
function getData(geturl)
{
if(XMLHttpRequestObject) {
geturl = "getdata.php";
XMLHttpRequestObject.open("POST", geturl);
XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
document.formChat2.textarea1.value = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send("filename=" + filename);
}
}
// saves new chat line to file
function saveData(filename, username, newline)
{
if(XMLHttpRequestObject && document.formChat1.txtLine.value != "" || username == "Host") {
var url = "savedata.php";
XMLHttpRequestObject.open("POST", url);
XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
}
}
XMLHttpRequestObject.send("filename=" + filename + "&username=" + username + "&newline=" + newline);
document.formChat1.btnDisplay.click();
document.formChat1.txtLine.value = "";
}
}
// saves login info to database
function saveLogin(filename, username, email, phone, weburl)
{
if(XMLHttpRequestObject) {
var loginurl = "login.php";
XMLHttpRequestObject.open("POST", loginurl);
XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
}
}
XMLHttpRequestObject.send("filename=" + filename + "&username=" + username + "&email=" + email + "&phone=" + phone + "&weburl=" + weburl);
}
}
function login(divID) {
username = document.formLogin.txtLogin.value;
email = document.formLogin.txtEmail.value;
phone = document.formLogin.txtPhone.value;
weburl = document.formLogin.txtURL.value;
saveLogin(filename, username, email, phone, weburl);
var obj = document.getElementById(divID);
obj.innerHTML = "<div id='targetDiv'><form name='formChat1' method='POST' onSubmit='return false;'><input type='text' name='txtLine' id='txtLine' size='30'><input type='button' name='btnDisplay' value='Display Message' onclick=\"setInterval('getData(filename)', 1000);\"><input type='button' name='btnSave' value='Send Message' onclick='saveData(filename, username, txtLine.value)'></form><form name='formChat2'><textarea name='textarea1' id='textarea1' rows='10' cols='50'></textarea></form></div>";
welcome = "Welcome to the chat.";
saveData(filename, 'Host', welcome);
}
</script>
<div id="targetDiv">
<form name="formLogin" method="POST">
Please enter your info:<br>
<input type="text" name="txtLogin" id="txtLogin" size="50" value="Name (Required)" onfocus="document.formLogin.txtLogin.value=''"><br>
<input type="text" name="txtEmail" id="txtEmail" size="50" value="Email Address (Required)" onfocus="document.formLogin.txtEmail.value=''"><br>
<input type="text" name="txtPhone" id="txtPhone" size="50" value="Phone Number (Optional)" onfocus="document.formLogin.txtPhone.value=''"><br>
<input type="text" name="txtURL" id="txtURL" size="50" value="Website URL (Optional)" onfocus="document.formLogin.txtURL.value=''"><br>
<input type="button" name="btnLogin" value="Login"
onclick="login('targetDiv');">
</form>
</div>

Answer 1

You need to use different XHR objects, so that you can get both responses, since you're sending both AJAX requests at the same time.
Write a function like:
function getXHR() {
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
return XMLHttpRequestObject;
}
Then call it in each of the functions that performs AJAX requests, with:
var XHRObject = getXHR();
and use that within the function.