Post Data with XMLHttp

@paradoxperfectJan 29.2007

Hi guys,

I’m trying to pull data from my database with XMLHttp and then put it into a textarea. That works fine. But then what I want to do is EDIT the data in that textarea and the send it back to the database (update it). My problem is that I can’t really find any tutorials to handle POSTing the data to the server. So could someone give me an example of sending a form via XMLHttp? Thanks!

to post a comment

JavaScript

9 Comments(s) _↴

@A1ien51Jan 29.2007 — #The very basic idea is:

var xhr = new XHRObject(); //some function that does the XBrowser stuff

xhr.open("post,url,true); //set the post

xhr.onreadystatechange = finishThis; //set the function to call during state changes

xhr.send("foo=" + bar); //send the post data you want the server to get

Almost any tutorial I have seen show you how to submit data.

Eric

@paradoxperfectauthorJan 29.2007 — #Eric, thanks for the reply, that's what I've been doing. But, is there any sort of "response text" that could return back and say "data was entered"? Because that's how I've been trying to test this...

var url = "posthistory.php";
 var oHttp = new ActiveXObject("Microsoft.XMLHTTP");
 var input = document.getElementById("myInput").value;
 var toSend = "postHist="+input;
 function postHistory() {
 oHttp.open("POST", url, true); 
 oHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 oHttp.onreadystatechange = postHttpResponse;
 oHttp.send(toSend);
 
 }
 function postHttpResponse() {
 var output = document.getElementById("myOutput");
 if (oHttp.readyState == 0){
 output.innerHTML = "There was a problem loading the data!";
 }
 if (oHttp.readyState == 1 || oHttp.readyState == 2 || oHttp.readyState == 3){
 output.innerHTML = "Loading...";
 }
 if (oHttp.readyState == 4) {
 output.innerHTML = postHttp.responseText;
 }
 }

If you don't mind do you have any good links for tutorials on posting data? Thanks!

@A1ien51Jan 29.2007 — #But, is there any sort of "response text" that could return back and say "data was entered"?[/quote]

That is all up to you how you handle it.

Server Code

[LIST=1]

[*]Get posted values

[*]Check for injections //if problem return error message

[*]Check other validations //if problem return error message

[*]Save values to DB

[*]Return Save message

[/LIST]

You can make it as robust as you want. Nothing different that what you would do in a normal postback, just a differetn way to pass an error message to the user.

Eric

@paradoxperfectauthorJan 29.2007 — #But for some reason when the "input" variable is set to the value of a textbox, it doesn't send anything... and it's being really wierd. That's why Im asking. Could you throw together a quick example with a text box as the data to send... for example: the user inputs something like a name and the server code looks for a name and then returns their first and last names?

@A1ien51Jan 29.2007 — #Why don't you show me the code that does not work that you are using.

Eric

@paradoxperfectauthorJan 29.2007 — #Here's the main test page.

&lt;html&gt;
 &lt;head&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;textarea type="text" id="myInput" value="Go away Jenna"&gt;&lt;/textarea&gt;
 &lt;button onclick="postHistory();"&gt;Look up&lt;/button&gt;
 &lt;div id="myOutput"&gt;&lt;/div&gt;
 
 &lt;script type="text/javascript"&gt;
 var posturl = "posthistory.php";
 var postHttp = new ActiveXObject("Microsoft.XMLHTTP");
 var postinput = document.getElementById("myInput").value;
 var toSend = "postHist="+postinput;
 function postHistory() {
 postHttp.open("POST", posturl, true); 
 postHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 postHttp.onreadystatechange = postHttpResponse;
 postHttp.send(toSend);
 
 }
 function postHttpResponse() {
 var postoutput = document.getElementById("myOutput");
 if (postHttp.readyState == 0){
 postoutput.innerHTML = "There was a problem loading the data!";
 }
 if (postHttp.readyState == 1 || postHttp.readyState == 2 || postHttp.readyState == 3){
 postoutput.innerHTML = "Loading...";
 }
 if (postHttp.readyState == 4) {
 postoutput.innerHTML = postHttp.responseText;
 }
 }
 
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Here's what's in the php page...not much lol I'm not doing any sort of validation or anything just because I'm trying to just get it working now:

[code=php]<?php
 echo $_POST['postHist'];
 ?>[/code]

So it shoudl pass what ever is in the text box and then output it into the myOutput div. Correct? I don't care about actually updating anything in the database yet, I just want to get POST working. Thanks a bunch!

@A1ien51Jan 29.2007 — #Look at your code closely. Why does your server never send up the current value?

You are storing

var postinput = document.getElementById("myInput").value;

when the page loads, not when you are calling the function.

Also your code is IE only. You need to make it cross browser.

http://developer.apple.com/internet/webcontent/xmlhttpreq.html

(apple article has one mistake, the open needs to come before the onreadystate change if you reuse the object)

Eric

@paradoxperfectauthorJan 30.2007 — #Actually I don't need to make it cross browser since it's for an intranet and the users are only allowed using IE... sucks I know and I would normally make it cross-browser too.

And I can't believe I didn't even notice that when I wrote it... it was a late night for me last night so I must have not been thinking. Works now! Thanks a million for pointing that out!

@A1ien51Jan 30.2007 — #IE7 uses the native object which Mozilla uses.

Eric

Also in #JavaScript _↴

adding caption/text to picture on click Image Swapping Ikariam External Page

Success!

Help @paradoxperfect spread the word by sharing this article on Twitter...

Tweet This

Post Data with XMLHttp

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Post Data with XMLHttp

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴