views:

118

answers:

1

I am trying to get the below code to call to a PHP file, and show the returned data. In Firefox, the alert shows blank, and in IE it shows sometimes but mostly nothing. The PHP script is a simple echo "hello";.

The script

function make_request()
{
  try
  {
    // Firefox, Opera 8.0+, Safari
    httpxml=new XMLHttpRequest();
  }
  catch (e)
  {
    // Internet Explorer
    try
    {
      httpxml=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
      try
      {
        httpxml=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e)
      {
        alert("Your browser does not support AJAX!");
        return false;
      }
    }
  }
}


function check_login(username, password)
{
  var httpRequest;
  make_request()

  var parameters = 'username=' + username.value + '&password=' + password.value;
  httpxml.onreadystatechange = stateck;
  httpxml.open('POST', 'login.php', true);
  httpxml.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
  httpxml.setRequestHeader('Content-Length', parameters.length);
  httpxml.send(parameters);

  function stateck() 
  {
    if(httpxml.readyState==4)
    {
      alert(httpxml.responseText);  
    }
  }
}

The markup

<table class="form" id="form" cellpadding="10" >
  <form id="signup_form" name="form" method="post" />
  <tr>
    <td>Username</td>
    <td><input type="text" name="username" id="username" size="26" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input type="password" name="password" id="password" size="26"/></td>
  </tr>

    <td>
      <input type="submit" name="button" id="button" value="Submit" onClick="check_login(username, password);"/>
    </td>
  </form>
</table>
</div>

Thanks

+2  A: 

A few notes that I couldn't fit into a comment (some of these should have no effect on the success of your XMLHttpRequest call; others might - so fix all of them):

The script

Nothing checks the return value of make_request(), so return false; is sorta pointless (just... return). Why not make httpxml a local variable instead of an implicit global, and return that? Then use the return value to indicate to the caller whether or not the function succeeded...

The local variable httpRequest in check_login() is never used. Perhaps you intended to assign it the return value of make_request() (and... have make_request() actually return something useful?)

You're not actually URL-encoding the values of username or password. (Pass them through encodeURIComponent() to accomplish this easily)

You should not need to set the Content-Length header explicitly. (And if you get it wrong, this could easily cause the request to fail)

And the worst script error: you're not canceling the default behavior for the submit button. Return false from check_login(), and change your event handler to onclick="return check_login(username, password);

The markup

You've made your <form> tag self-closing (<form ... />). And included a closing </form> tag. It's unlikely that's what you want (and even less likely that'll behave reliably cross-browser)

Your last cell (<td>) is defined outside of any row (<tr>).

You close a <div> that was never opened.

Shog9
Thanks for that...I forgot to edit out the last div when I copied it.
Elliott
And another tiny thing: As you're using XHTML, all HTML attributes should be defined lowercase, so onClick should be onclick.Also, you could better use the onsubmit-attribute on the <form> instead.
Douwe Maan
It works once in IE about every 5mins I try...for a strange reason, in firefox it doesnt work at all.
Elliott
What does Firebug tell you?
Douwe Maan
Firebug doesnt really show much...shows the post data is sent, but I carnt view much more as it re-loads and the console is cleared.
Elliott
@Elliott: HA! Add `return false;` to the end of `check_login()` to prevent the form from being submitted... This *should* fall apart in IE as well, but perhaps FF is just a bit quicker at reloading the page...
Shog9
firebug now shows the response " hello "...thanks @ shog9, I forgot that :p
Elliott
username [object HTMLInputElement] - This is shown for the post data?
Elliott
Updated answer. I'd missed that you were passing in the form fields as parameters somehow, as well as the missing return. Don't forget to extract the *value* of the form fields (as you were doing originally) and pass them through encodeURIComponent() before submission...
Shog9
Some how got it working by changing the "onClick" to "onclick"Thanks alot guys =D
Elliott