help with simple post request

[webgrrrl]

I am trying to use ajax to post one form field to a php page. I am having a nightmare so have simplified it to the bare minimum to get something working, but it just does nothing when the button is cicked.

Here is the Javascript/ajax code:

<script type="text/javascript">

var http = createRequestObject();
function createRequestObject() {
var objAjax;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
objAjax = new ActiveXObject("Microsoft.XMLHTTP");
}else{
objAjax = new XMLHttpRequest();
}
return objAjax;
}

function postTags(){
var fmTag=document.getElementById("fm_Tag").value;
http.open('POST','ajaxtest.php', true);
http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http.send('tag=' + fmTag);
http.onreadystatechange = handleResponse;
}

</script>

the html:
<form>
<label>Enter a Tag</label><input type="text" name="fm_tag" size="20" /> <br><br>
<input type="Button" name="Enter" value="enter" onclick="postTags()"/>
</form>

and finally the ajaxtest.php page
<?
$tag = $_GET["tag"];

?>
<script type="text/javascript">
alert("<?$tag;">;
</script>

I have a GET request working fine using the same createRequestObject(); script - i can't get my head round why something so simple isn't working when loads of code examples use the same script.

Can anyone help please?
:confused:

[zer0day]

You are trying to use $_GET for POST requests, and I dont think you can show an alert from the backend page.

You need a handleresponse() function:

function handleResponse() {
if (http.readyState == 4){ //get reply and write it out
var response = http.responseText;
alert(response);
}
}


For the backend, you could have something like this:

$tag = $_POST['tag'];
echo $tag;

You need two files, the front end, and the backend that responds to the http request.

You can find a simple ajax example I made a while back for someone else here (http://dev.mrkryptic.com/ajaxrefresh/).

[webgrrrl]

Thanks for the advice - i fixed it but now i have a new problem

The Ajax posts the form variable to a php page and returns the result to a div on the page. The postTags function is called from an onclick event of an <a>. tag. (because it didn't work with a button for some reason) But i also want to call the postTags function if the return/enter key is pressed.

So i have this function
Code:

function handleKeyPress(e,form){
var key=e.keyCode || e.which;
if (key==13){
window.postTags();
}
return false;
}


that is called from onkeypress="handleKeyPress(event,this.form)" event in the text box.

My problem is that it works, it submits the form field to the databse, but it refreshes the page and i don't want it to. I thought return false would stop that?

Also using firebug in firefox i get an exception "Component returned failure code: 0x80040111"

it seems to be with the if(http.readyState == 4 && http.status == 200) {
part of the httprequest.

Ajax code:
Code:

var http = createRequestObject();
function createRequestObject() {
var objAjax;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
objAjax = new ActiveXObject("Microsoft.XMLHTTP");
}else{
objAjax = new XMLHttpRequest();
}
return objAjax;
}

function postTags() {
var url = "tagentry.php";
var formtag = document.getElementById('fmtag').value;
var params = "newtag=" + formtag;
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
document.getElementById('tagentered').innerHTML = http.responseText;
document.getElementById('fmtag').value = "";
}
}
http.send(params);
}


I'd really appreciate any help anyone can give me.