My Ajax Request isn't returning anything!

I am new to Ajax and I have given myself a [personal] project to work on in order to learn. I need some help debugging some code I wrote/copied from tutorials. I hope this is the right forum to post in as well.

The page is located here:

What you are supposed to do, is enter a Steam username and it should update the div with the id “output” with the 64bit Steam ID for that user. You can test the ajax.php script by going to (that is my username). It should output “Steam ID: 76561197963517234”. If the username could not be found, it just says “Could not find player”.

Right now I cannot even get it to change the “output” div. When I type something in the input text, it just refreshes the page and nothing happens. Also the browser URL adds “?username=whateverItypedHere” to the end of the current page, which I don’t think is meant to happen.

I have tested this on Chrome and Firefox on Ubuntu 13. Code for the index.html page:

<!DOCTYPE html>
<title>Steam API Test</title>
<style type="text/css">
#footer {
	text-align: center;
function loadXMLDoc()
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  }"GET","ajax.php?username=" + document.steamid.username.value,true);

<body onLoad="document.steamid.username.focus();">

<p>Use the form below to get the 64 bit Steam ID for a user based on username.</p>

<form name="steamid">
Username: <input type="text" onChange="loadXMLDoc()" name="username" />

<div id="output"></div>

<div id="footer">
	<p><a href="" target="_blank">Powered by Steam</a></p>



If you type the username and then click outside the box, it works! So, congratulations on your first successful AJAX application! :slight_smile:

The problem is that when you type and then hit Enter, you’re actually submitting the form, which unloads the page (and destroys your AJAX object, if it even gets created in the first place). You can either remove the form element altogether, or add an ‘onsubmit=“return false;”’ attribute which should block it from submitting.

EDIT: I should add that in the absence of method and action attributes on a form, the default behavior is to submit via GET to the current page – which is why you see “?username=hitraj47” show up in your address bar. The Enter key is mapped to form submission, hence why hitting Enter submits your form.

Oh wow, thanks! I decided to get rid of the form altogether. Is it bad practice to have form elements not wrapped in a <form> tag, or in the case of Ajax, this is completely fine?

I believe it’s completely fine to have an input element without being within a form element, however it’s been ages since I’ve dealt with HTML standards; in any case this is a question best asked over on the (X)HTML forum, the folks over there should be able to answer your question easily.