Problems with AJAX

[Rickkap]

Hi all,

This is really out of my league and i could do with some help.

I am trying to check the database to see if a some text exists using a form.

I came across this coding and it is perfect for what i need. I have incorporated it into my web site and the problem I'm having is when i type in a sentence to be checked, the result after it has checked the database for an existing sentence, the result displayed is the same sentence but with all the spaces removed.

I'm no good with AJAX so any help in trying to solve this issue would be greatly appreciated.

HTML CODE

<form method="post" action="javascript:void(0);" name="form1"> 

<table cellspacing="0"> 

<tr> 

<th><label for="newuserid">Sentence :</label></th> 

<td>	
<textarea rows="5" type="question" name="question" cols="82" id="question" tabindex="1" 
onKeyUp="OnChangedQuestion();"/></textarea></td> 
<td>
<input id="btnCheckAvailability" type="button" disabled="disabled" value="Check Database" 
onClick="OnCheckAvailability();"></td> 

<td><div id="Available"></div></td> 
</tr> 
</table> 

</form>

JAVASCRIPT

<script type="text/javascript">
//If our user enters data in the username input, then we need to enable our button 
function OnChangedQuestion() 
{ 
if(document.form1.newuserid.value == "") 
{ 
document.form1.btnCheckAvailability.disabled = true; 
} 
else 
{ 
document.form1.btnCheckAvailability.disabled = false; 
} 
}

function OnCheckAvailability() 
{ 
if(window.XMLHttpRequest) 
{ 
oRequest = new XMLHttpRequest(); 
} 
else if(window.ActiveXObject) 
{ 
oRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
} 

oRequest.open("POST", "checkdatabase.asp", true); 
oRequest.onreadystatechange = UpdateCheckAvailability;

oRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
oRequest.send("strCmd=availability&strQuestion=" + document.form1.newuserid.value); 
}

function UpdateCheckAvailability() 
{ 
if(oRequest.readyState == 4) 
{ 
if(oRequest.status == 200) 
{ 
document.getElementById("Available").innerHTML = oRequest.responseText; 
} 
else 
{ 
document.getElementById("Available").innerHTML = "Error"; 
} 
} 
} 

</script>

ASP CODE

<%
' Form Variables 
dim strCmd 
dim strQuestion

strCmd = trim(Request.Form("strCmd").Item) 
Session("strQuestion") = trim(Request.Form("strQuestion").Item)


If Session("strQuestion") ="The cat ran up the hill" Then
Response.Write("Error This Record Exists.") 
else 
Response.Write("Checked!!!!") 
end if 

Response.end
%>

When i type in "The cat ran up the hill" the result i get back when i click on check database is "Thecatranupthehill"

Thanks in advance.

Rick

[NoEffinWay]

Try this, if it fails, the issue is in you ASP script and I dont know ASP @_@

<script type="text/javascript">
function OnChangedQuestion(){ 
	if(document.form1.newuserid.value == ""){ 
		document.form1.btnCheckAvailability.disabled = true; 
	}else{ 
		document.form1.btnCheckAvailability.disabled = false; 
	} 
}

function OnCheckAvailability(){
	var ajaxRequest;	
	try{
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				alert("Your browser does not support AJAX!");
				return false;
			}
		}
	}
	var qstring = document.getElementById("question").value;
	ajaxRequest.open("POST", "checkdatabase.asp", true);
	ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	ajaxRequest.setRequestHeader("Content-length", params.length);
	ajaxRequest.setRequestHeader("Connection", "close");
	
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			document.getElementById("Available").innerHTML = ajaxRequest.responseText;
		}
	}
	ajaxRequest.send(qstring); 
}
</script>

<form method="post" action="javascript:void(0);" name="form1"> 

<table cellspacing="0"> 

<tr> 

<th><label for="newuserid">Sentence :</label></th> 

<td>
<textarea rows="5" type="question" name="question" cols="82" id="question" tabindex="1" 
onKeyUp="OnChangedQuestion();"/></textarea></td> 
<td>
<input id="btnCheckAvailability" type="button" disabled="disabled" value="Check Database" 
onClick="OnCheckAvailability();"></td> 

<td><div id="Available"></div></td> 
</tr> 
</table> 

</form>

[Rickkap]

Thank you for the reply

I get the following error when i implement your code into mine:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Thu, 23 Feb 2012 18:18:03 UTC


Message: 'params' is undefined
Line: 44
Char: 2
Code: 0

Rick

[NoEffinWay]

Oops, sorry, this is a hacked up script from a few of my old ones. Here,
Replace:

ajaxRequest.setRequestHeader("Content-length", params.length);

with:

ajaxRequest.setRequestHeader("Content-length", qstring.length);

[Rickkap]

Nearly there no errors this time the only problem is knowing which variable holds the information for the database to check.

Before the code was

oRequest.send("strCmd=availability&strQuestion=" + document.form1.question.value);

Where strQuestion held the information that the user enters.

I notice this has gone now so which string now holds the info.

Thanks

Rick

[NoEffinWay]

Sorry, I didnt proofread the script before posting.
Replace:

var qstring = document.getElementById("question").value;

with

var qstring = "strCmd=availability&strQuestion="+document.getElementById("question").value;

Passed variables are now the same as before.

[Rickkap]

Still the same problem when i type "The cat ran up the hill", the responce i get back after it has been checked in the database is "Thecatranupthehill".

Regards

Rick

[Rickkap]

After further investigation i think the problem lies in this:

document.getElementById("question").value;

What does this code do?

[NoEffinWay]

After further investigation i think the problem lies in this:

document.getElementById("question").value;

What does this code do?

That gets the text in the text area. If you want to know if that is the issue, add this to the line after:

alert(qstring);

that will show you the query it is sending to the ASP page.

[Rickkap]

Ok, i've checked the strQuestion and it's fine. Is it possible to send a variable to another page via the hyperlink?

In ASP we would do it this way :

http://www.somewhere.com/index.asp?id=test

[Rickkap]

Ok, still pursuing with this and i've now found that the main problem could be this.

If i enter "the%20cat%20ran%20up%20the%20hill" in the input field. It returns i get back from the database search is "The cat ran up the hill" which is what i want. Is this something to do with Javascript?

Regards

Rick

[NoEffinWay]

No, when I run the script on my localhost (submited to a PHP form) it shows correct.
But replace:

var qstring = "strCmd=availability&strQuestion="+document.getElementById("question").value;

with:

var qstring = "strCmd=availability&strQuestion="+document.getElementById("question").value.replace(/\s/g, "%20");

[Rickkap]

Ok, it all displays correctly now thank you, but for some reason my database query doesn't search properly.

I think i'm going to have to go back to the drawing board with this as i can't understand why it isn't working properly.