Member Avatar for doctorphp

Hi everyone. I am starting to learn AJAX and JavaScript and I am trying to make a popup login form and I am having trouble posting the data entered in the textboxes. It is fine when I post one piece of data but when I try to post two I get into difficulties. The code is below. If I have not made anything clear I will try to comment back with some more information.

Thanks in advance,
Cameron

<html>
<head>
<script type="text/javascript">
 
var time_variable;
 
function getXMLObject()  //XML OBJECT
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}
 
var xmlhttp = new getXMLObject();	//xmlhttp holds the ajax object
 
function ajaxFunction() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var username = document.getElementById("username");
    xmlhttp.open("POST","testing.php",true); //calling testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("username=" + username.value); //Posting txtname to PHP File
	}
}

 
function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
     }
     else {
        alert("Error proccessing form. Please try again");
     }
   }
}
</script>
<body>
<div align="center">
<form name="login">
<table width="50%" cellpadding="7">
<tr>
	<td>
    Username
    </td>
    <td>
    :
    </td>
    <td>
   <input type="text" name="username" id="username" maxlength="12" style="background-image:url(images/coins.ico); background-repeat:no-repeat; background-position:right;" class="login-user" />
    </td>
</tr>
<tr>
	<td>
    Password
    </td>
    <td>
    :
    </td>
    <td>
    <input type="password" name="password" id="password" maxlength="12" style="background-image:url(images/login-password.png); background-repeat:no-repeat; background-position:right;" class="login-pass" />
    </td>
</tr>
<tr>
	<td>&nbsp;
    
    </td>
    <td>&nbsp;
    
    </td>
    <td>
   <input type="button" value="Submit" onclick="ajaxFunction();" />
    </td>
</tr>
</table>
<div id="message" name="message"></div> 
</form>
</body>
</head>
</html>

I have tried doing this

var username = document.getElementById("username");
var password = document.getElementById("password");
    xmlhttp.open("POST","testing.php",true); //calling testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("username=" + username.value);
 xmlhttp.send("password=" + password.value);

but it doesn't work.

  • 2 Contributors
  • 4 Replies
  • 2K Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by hielo
Member Avatar for hielo

WRONG:

xmlhttp.send("username=" + username.value);
 xmlhttp.send("password=" + password.value);

You cannot call send() multiple times. You must call it exactly once. To pass multiple parameters you must separate each value with an ampersand and you should encode each value:

xmlhttp.send("username=" + encodeURIComponent(username.value) + "&password=" + encodeURIComponent(password.value) );
Member Avatar for doctorphp

Thank you very much. I really appreciate your help.

Edited by doctorphp because: n/a
Member Avatar for doctorphp

How would I upload a file (image) using this method?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.