Sending a textarea using AJAX and abit more

[Jerzxu]

I have run into a slight problem with my code. You see, I'm not sure how to use the POST method with Javascript. I have used the GET method, but I will need POST for this way so that Messages can be longer then 2000 char. (depending on browser).

 

I followed a tutorial on a different website, to help get the POST method codes, unfortunately it didn't work. Also, note that this code it  used when clicking the send button. I didn't make a form but instead used <input type="button" onclick="showMessage('textarea_1');" /> where textarea_1 = my text area where the message text is. Also since I have to address this to a user along with adding a subject (GET post method would work with this since you could just use ?q= str1, ?r= str2 etc. but for POST I am at a lost cause), I may have to use a form. If their are tutorials or help on how to send a whole form over javascript I would use that instead, as it would make it easier. (Note: I checked and found nothing)

 

var xmlHttpMes

function showMessage(b){
xmlHttpMes=GetXmlHttpObject()
if ( xmlHttpMes==null){
  		alert ("Browser does not support HTTP Request")
  	return
  	} 
var url="mesget.php"
url=url+"?q="+b
url=url+"&sid="+Math.random()
xmlHttpMes.onreadystatechange=stateChangedMes
xmlHttpMes.open("GET",url,true)
xmlHttpMes.send(null)
}

function stateChangedMes() 
{ 
if (xmlHttpMes.readyState==4 || xmlHttpMes.readyState=="complete")
{ 
document.getElementById("hide_message").innerHTML=xmlHttpMes.responseText 
} 
}

function GetXmlHttpObjectMes() {
var xmlHttpMes=null;
try {
// Firefox, Opera 8.0+, Safari
	xmlHttpMes=new XMLHttpRequest();
	} catch (e){
// Internet Explorer
try {
  	xmlHttpMes=new ActiveXObject("Msxml2.XMLHTTP");
  	} catch (e) {
  	xmlHttpMes=new ActiveXObject("Microsoft.XMLHTTP");
	}
} 
return xmlHttpMes; 
}

var xmlHttpPly

function ReplyMess(str){
xmlHttpPly1=GetXmlHttpObject()
if ( xmlHttpPly1==null){
  		alert ("Browser does not support HTTP Request")
  	return
  	} 
var url = "ReMes.php";
var params = str;
xmlHttpPly.onreadystatechange=stateChangedPly
xmlHttpPly.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpPly.setRequestHeader("Content-length", params.length);
xmlHttpPly.setRequestHeader("Connection", "close");
xmlHttpPly.open("POST", url, true);
xmlHttpPly.send(params);
}

function stateChangedPly() 
{ 
if (xmlHttpPly.readyState==4 || xmlHttpPly.readyState=="complete")
{ 
document.getElementById("hide_note").innerHTML=xmlHttpPly.responseText 
} 
}

function GetXmlHttpObjectPly() {
var xmlHttpPly=null;
try {
// Firefox, Opera 8.0+, Safari
	xmlHttpPly=new XMLHttpRequest();
	} catch (e){
// Internet Explorer
try {
  	xmlHttpPly=new ActiveXObject("Msxml2.XMLHTTP");
  	} catch (e) {
  	xmlHttpPly=new ActiveXObject("Microsoft.XMLHTTP");
	}
} 
return xmlHttpPly; 
}

 

[mainewoods]

you send fields post through ajax by building your parameter string the same way you do for get and just specify post:

xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.send(postfields);

where you are probably going wrong is that everything you put as a parameter has to be escaped outherwise you will have problems with characters like spaces.

if (x.elements[i].type == 'textarea') {
    postfields += x.elements[i].name + '=';
    postfields += escape(x.elements[i].value) + '&';
}

[Jerzxu]

So where exactly would I put this code? (Also just realized I made a mistake on the javascript I pasted here)

 

var xmlHttpPly

function ReplyMess(str){
xmlHttpPly1=GetXmlHttpObject()
if ( xmlHttpPly1==null){
  		alert ("Browser does not support HTTP Request")
  	return
  	} 
var url = "ReMes.php";
var params = str;
xmlHttpPly.onreadystatechange=stateChangedPly
xmlHttpPly.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpPly.setRequestHeader("Content-length", params.length);
xmlHttpPly.setRequestHeader("Connection", "close");
xmlHttpPly.open("POST", url, true);
xmlHttpPly.send(params);
}

function stateChangedPly() 
{ 
if (xmlHttpPly.readyState==4 || xmlHttpPly.readyState=="complete")
{ 
document.getElementById("hide_note").innerHTML=xmlHttpPly.responseText 
} 
}

function GetXmlHttpObjectPly() {
var xmlHttpPly=null;
try {
// Firefox, Opera 8.0+, Safari
	xmlHttpPly=new XMLHttpRequest();
	} catch (e){
// Internet Explorer
try {
  	xmlHttpPly=new ActiveXObject("Msxml2.XMLHTTP");
  	} catch (e) {
  	xmlHttpPly=new ActiveXObject("Microsoft.XMLHTTP");
	}
} 
return xmlHttpPly; 
}

 

Should look like that. I accidentily included the function above it.

[mainewoods]

function ReplyMess(str){

where does str come from? I see you are just setting params equal to that. i assume str is in the form 'fieldname1=fieldvalue1&fieldname2=fieldvalue2'

--each fieldvalue must be escaped before being added:

str = 'fieldname1=' + escaped(fieldvalue1) + '&fieldname2=' + escape(fieldvalue2);

[Jerzxu]

Actually originally I had string set to b, becuase on my other javascript functions I have it set to b. To switch it to a fieldname1= fieldvalue1 I'm not sure. Becuase I would have to get the text grabbed from the textarea when I click on a button which I have set to use this function on click. Which I believe using:

<textarea id="text_area"></textarea>
<input type="button" onclick="showMessage('text_area');" />

(Note: showMessage(); Javascript code is below)

would work. Though I am not entirely sure.

So if thats right, and I were to switch str to b, then the fieldname1 would equal? text_area and the escape(fieldvalue1) would equal escape(b)?

It may be easier to send this all as a form through Ajax. If thats possible (which should be).

 

var xmlHttpMes

function showMessage(b){
xmlHttpMes=GetXmlHttpObject()
if ( xmlHttpMes==null){
  		alert ("Browser does not support HTTP Request")
  	return
  	} 
var url="mesget.php"
url=url+"?q="+b
url=url+"&sid="+Math.random()
xmlHttpMes.onreadystatechange=stateChangedMes
xmlHttpMes.open("GET",url,true)
xmlHttpMes.send(null)
}

function stateChangedMes() 
{ 
if (xmlHttpMes.readyState==4 || xmlHttpMes.readyState=="complete")
{ 
document.getElementById("hide_message").innerHTML=xmlHttpMes.responseText 
} 
}

function GetXmlHttpObjectMes() {
var xmlHttpMes=null;
try {
// Firefox, Opera 8.0+, Safari
	xmlHttpMes=new XMLHttpRequest();
	} catch (e){
// Internet Explorer
try {
  	xmlHttpMes=new ActiveXObject("Msxml2.XMLHTTP");
  	} catch (e) {
  	xmlHttpMes=new ActiveXObject("Microsoft.XMLHTTP");
	}
} 
return xmlHttpMes; 
}

[mainewoods]

<textarea id="text_area"></textarea>
<input type="button" onclick="showMessage('text_area');" />

all you are passing is the id value so you get the actual value like this:

function showMessage(b){
    // get the contents of the textarea
    var mytext = document.getElementById(b).value; //notice the usage of the b
    var url="mesget.php";
    // make url safe
    url= url + "?q=" + escape(mytext);

 

   

   

 

 

[Jerzxu]

Okay so I will fix that. Then I would use POST in that, but for the params what do I do?

 

(Note to self, look at stuff more throughly before posting)

 

var xmlHttpPly

function ReplyMess(str){
xmlHttpPly1=GetXmlHttpObject()
if ( xmlHttpPly1==null){
  		alert ("Browser does not support HTTP Request")
  	return
  	} 
var url = "ReMes.php";
var params = str;
xmlHttpPly.onreadystatechange=stateChangedPly
xmlHttpPly.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpPly.setRequestHeader("Content-length", params.length);
xmlHttpPly.setRequestHeader("Connection", "close");
xmlHttpPly.open("POST", url, true);
xmlHttpPly.send(params);
}

function stateChangedPly() 
{ 
if (xmlHttpPly.readyState==4 || xmlHttpPly.readyState=="complete")
{ 
document.getElementById("hide_note").innerHTML=xmlHttpPly.responseText 
} 
}

function GetXmlHttpObjectPly() {
var xmlHttpPly=null;
try {
// Firefox, Opera 8.0+, Safari
	xmlHttpPly=new XMLHttpRequest();
	} catch (e){
// Internet Explorer
try {
  	xmlHttpPly=new ActiveXObject("Msxml2.XMLHTTP");
  	} catch (e) {
  	xmlHttpPly=new ActiveXObject("Microsoft.XMLHTTP");
	}
} 
return xmlHttpPly; 
}

 

I MEANT that code in the last one. UGH, but that will help for this part.

 

UPDATED:

 

Okay so I got it like this now:

$response = "<b>To:</b> ".$to."<br /><b>Subject:</b> ".$subject."<br /><textarea class=textbox id=\"reply_text\"></textarea><br /><input type=button name=Yes value=Send onclick=\"ReplyMess('reply_text'); switchReplyOff();\"  style=margin-right:5px; /><input type=button name=No value=Cancel style=margin-left:5px; />";

//Notice reply_text for the id as well as ReplyMess('reply_text');

Thats the text box that gets echoed, to show the reply text box.

var xmlHttpPly
function ReplyMess(b){
xmlHttpPly1=GetXmlHttpObject()
if ( xmlHttpPly1==null){
  		alert ("Browser does not support HTTP Request")
  	return
  	} 
// get the contents of the textarea
var mytext = document.getElementById(b).value; //notice the usage of the b
var url = "ReMes.php";
// make url safe
url= url + "?q=" + escape(mytext);
var params = b;
xmlHttpPly.onreadystatechange=stateChangedPly
xmlHttpPly.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpPly.setRequestHeader("Content-length", params.length);
xmlHttpPly.setRequestHeader("Connection", "close");
xmlHttpPly.open("POST", url, true);
xmlHttpPly.send(params);
}

function stateChangedPly() 
{ 
if (xmlHttpPly.readyState==4 || xmlHttpPly.readyState=="complete")
{ 
document.getElementById("hide_note").innerHTML=xmlHttpPly.responseText 
} 
}

function GetXmlHttpObjectPly() {
var xmlHttpPly=null;
try {
// Firefox, Opera 8.0+, Safari
	xmlHttpPly=new XMLHttpRequest();
	} catch (e){
// Internet Explorer
try {
  	xmlHttpPly=new ActiveXObject("Msxml2.XMLHTTP");
  	} catch (e) {
  	xmlHttpPly=new ActiveXObject("Microsoft.XMLHTTP");
	}
} 
return xmlHttpPly; 
}

 

And thats the javascript that has been updated. Though it probably should have a few things in it.

[mainewoods]

ok, in order to send the params POST you build the parameters the same as GET but you do not put a '?' on the beginning of it. just change the section below to the way I have it:

 

// get the contents of the textarea
var mytext = document.getElementById(b).value; //notice the usage of the b
var url = "ReMes.php";
// make url safe
var params = "q=" + escape(mytext);

--notice that I did not add the parameter to the url, and I did not use a '?'

leave the code above that and below that the same and you should be all set

 

one thing you should do different though is change the order you call the statements. the 'open' should be before the others like I have below or it will cause a problem on some browsers:

xmlHttpPly.open("POST", url, true);
xmlHttpPly.onreadystatechange=stateChangedPly;
xmlHttpPly.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpPly.setRequestHeader("Content-length", params.length);
xmlHttpPly.setRequestHeader("Connection", "close");
xmlHttpPly.send(params);

 

[Jerzxu]

YOU SIR JUST MADE MY DAY! LOL, it works now!

THANK YOU VERY VERY VERY VERY VERY VERY (years later) MUCH!

[Jerzxu]

Actually one quick questione, if I were to need to add more then one variable to that, what would I do?

 

var mytext = document.getElementById(c).value; //notice the usage of the b
var mySender = document.getElementById(To_user).value;
var mySubject = document.getElementById(subject_user).value;
var url = "ReMes.php";
// make url safe
var params = "q=" + escape(mytext) + "t=" + escape(mySender) + "s=" + escape(mySubject);

 

Just use that and add $t=$_POST["t"] etc? or do I have to do something else?

[mainewoods]

when you have more than one variable to send, use an '&' between them:

var params = "q=" + escape(mytext) + "&t=" + escape(mySender) + "&s=" + escape(mySubject);

[Jerzxu]

okay, and on the PHP side of it, I just use: $t=$_POST["t"]; or do I include the &?

[mainewoods]

no don't include the '&'. On the php side you just use $_POST as you normally would as if the form was submitted normally:

 $t=$_POST["t"]; 

[Jerzxu]

Okay since I have put in the other post info that I need (the &t= blah stuff) it doesn't seem to work. I believe it is due to the javascript.

 

var xmlHttpPly
function ReplyMess(c){
xmlHttpPly=GetXmlHttpObject()
if ( xmlHttpPly==null){
  		alert ("Browser does not support HTTP Request")
  	return
  	} 
var mytext = document.getElementById(c).value; //notice the usage of the c
var mySender = document.getElementById(To_user).value;
var mySubject = document.getElementById(subject_user).value;
var url = "ReMes.php";
// make url safe
var params = "text=" + escape(mytext) + "&sendTo=" + escape(mySender) + "&subject=" + escape(mySubject);
xmlHttpPly.open("POST", url, true);
xmlHttpPly.onreadystatechange=stateChangedPly;
xmlHttpPly.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpPly.setRequestHeader("Content-length", params.length);
xmlHttpPly.setRequestHeader("Connection", "close");
xmlHttpPly.send(params);
}

function stateChangedPly() 
{ 
if (xmlHttpPly.readyState==4 || xmlHttpPly.readyState=="complete")
{ 
document.getElementById("hide_note").innerHTML=xmlHttpPly.responseText 
} 
}

function GetXmlHttpObjectPly() {
var xmlHttpPly=null;
try {
// Firefox, Opera 8.0+, Safari
	xmlHttpPly=new XMLHttpRequest();
	} catch (e){
// Internet Explorer
try {
  	xmlHttpPly=new ActiveXObject("Msxml2.XMLHTTP");
  	} catch (e) {
  	xmlHttpPly=new ActiveXObject("Microsoft.XMLHTTP");
	}
} 
return xmlHttpPly; 
}

Now I believe its to do with these lines:

var mySender = document.getElementById(To_user).value;
var mySubject = document.getElementById(subject_user).value;

This is becuase the mySender variable and mySubject variable are called upon when clicked, and they are in a input text which is disabled.

$response = "<b>To:</b> <input type=\"text\" value=\"$to\" id=\"To_user\" disabled=\"true\" /><br /><b>Subject:</b> <input type=\"text\" value=\"$subject2\" id=\"subject_user\" disabled=\"true\" /><br /><textarea class=\"textbox\" id=\"reply_text\"></textarea><br /><input type=\"button\" name=\"Yes\" value=\"Send\" onclick=\"ReplyMess('reply_text'); switchReplyOff();\" style=\"margin-right:5px;\" /><input type=\"button\" name=\"No\" value=\"Cancel\" style=\"margin-left:5px;\" />";

As you can see in that code, my variables are response text. So I am not sure if the Javascript is actually getting the information or not.

 

All in all, it doesn't work. It stops when it reads: ReplyMess('reply_text'); and trys to execute the javascript becuase it doesn't read switchReplyOff();

[mainewoods]

var mySender = document.getElementById(To_user).value;
var mySubject = document.getElementById(subject_user).value;

in your usage of 'To_user' above the code will interpret that as a variable that is undefined.  If that is the actual id of the item you want, then surround it with quotes to make it a string:

var mySender = document.getElementById('To_user').value;
var mySubject = document.getElementById('subject_user').value;

[Jerzxu]

OKAY just realized that was a stupidity mistake by me... LOL

THANKS all working now