Forum Moderators: open
I have a code used to submit a textbox to the server without refresh:
function setQueryString( ){
queryString="";
var frm = document.forms[0];
var numberElements = frm.elements.length;
for(var i = 0; i < numberElements; i++) {
if(i < numberElements-1) {
queryString += frm.elements[i].name+"="+
encodeURIComponent(frm.elements[i].value)+"&";
} else {
queryString += frm.elements[i].name+"="+
encodeURIComponent(frm.elements[i].value);
}
}
}
var request;
var queryString; //will hold the POSTed data
function sendData( ){
setQueryString( );
var url="emailtofriend.php";
httpRequest("POST",url,true);
}
/* Initialize a request object that is already constructed.
Parameters:
reqType: The HTTP request type, such as GET or POST.
url: The URL of the server program.
isAsynch: Whether to send the request asynchronously or not. */
function initReq(reqType,url,isAsynch){
/* Specify the function that will handle the HTTP response */
request.onreadystatechange=handleResponse;
request.open(reqType,url,isAsynch);
/* Set the Content-Type header for a POST request */
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8");
request.send(queryString);
}
/* Wrapper function for constructing a request object.
Parameters:
reqType: The HTTP request type, such as GET or POST.
url: The URL of the server program.
asynch: Whether to send the request asynchronously or not. */
function httpRequest(reqType,url,asynch){
//Mozilla-based browsers
if(window.XMLHttpRequest){
request = new XMLHttpRequest( );
} else if (window.ActiveXObject){
request=new ActiveXObject("Msxml2.XMLHTTP");
if (! request){
request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
//the request could still be null if neither ActiveXObject
//initialization succeeded
if(request){
initReq(reqType,url,asynch);
} else {
alert("Your browser does not permit the use of all "+
"of this application's features!");
}
}
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8");
request.send(queryString);
request.onreadystatechange=handleResponse;
//event handler for XMLHttpRequest
function handleResponse( ){
if(request.readyState == 4){
if(request.status == 200){
results = request.responseText;
document.getElementById('sent').innerHTML = results;
} else {
alert("A problem occurred with communicating between "+
"the XMLHttpRequest object and the server program.");
}
}//end outer if
}
--------
This is the form:
<form action="javascript:void%200" onsubmit="sendData( );return false" style="margin:0px">
<span class="font-loginb">Friend's email:</span>
<input type="text" name="email" size="20"><input name="Send" type="submit" value="Send">
</form>
------
It should display the submitted email in the specified div, but it doesn't. Anyone can help?
Plus, can I make my code simpler? And how do I add a "loading" text or image while it processes?
Thanks.
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8");
request.send(queryString);request.onreadystatechange=handleResponse;
The browser will try to execute that code as soon as it loads, which is not what you want.
