ansaurus

Question

Concerning AJAX, PHP, and processing forms

Answer 1

A:

Your PHP script is expecting variables to be passed as an HTTP POST request, but your XMLHTTPRequest is doing a GET request.

You're also doing XMLHttpRequestObject.send(null); -- instead, you should be passing your POST data to the .send() method.

As others have pointed out, using a JavaScript library like jQuery will make this kind of thing a lot simpler.

Daniel Pryden 2009-11-20 00:14:09

Answer 2

A:

You are not calling the logIn() function anywhere. Most likely, it belongs into the onsubmit event of the form. Don't forget to

return false;

at the end.

Pekka 2009-11-20 00:14:12

Nope, he's got an `<input type="submit">` with `onclick="logIn();"`, so that isn't the issue. But the `return false;` is a good idea, because you want to cancel the `onclick` event, as it would otherwise trigger an `onsubmit`.

Daniel Pryden 2009-11-20 00:18:44

Answer 3

A:

When you click login on that form it submits back to the source URL. To prevent this you should really change your event handler to either this:

function logIn() {
  ...
  return false;
}

Alternatively you can do it from the submit handler on the form instead of the click handler on the submit button.

Secondly, to do AJAX cross-browser you need about 6 fallback conditions, not just XmlHttpRequest. See Getting Started with AJAX and the XMLHttpRequest Object.

In all honesty, for AJAX there's no way I'd consider doing it without a helper library. My preferred choice is jQuery, in which case the code ends up looking like this:

<form id="loginform" method="post">
<table>
  <tr>
    <td>Username:</td>
    <td><input type="username" id="username" name="username" /></td>
  </tr>
  <tr>
    <td>Password:</td>
    <td><input type="password" id="password" name="password" \ /></td>
  </tr>
  <tr>
    <td colspan="2"><input type="button" id="login" value="Login"/></td>
  </tr>
</table>
</form>

with:

<script type="text/javascript">
$(function() {
  $("#login").click(function() {
    $("#show").load("login.php", {
      username: $("#username").val(),
      password: $("#password").val()
    }, function() {
      $("#loginform").hide(); // for example
    });
  });
});
</script>

cletus 2009-11-20 00:15:05

Half right: because the `onclick` event isn't cancelled, the form does trigger a submit. But the AJAX `.send()` doesn't get called until the `logIn()` function fires, which isn't on page startup.

Daniel Pryden 2009-11-20 00:20:19

Also, while cross-browser compatibility is important, and jQuery definitely does make the job easier, `XmlHttpRequest` is supported by all the major browsers these days. So just using it without a fallback isn't as crazy as it used to be.

Daniel Pryden 2009-11-20 00:24:05

I guess that'll solve my problem. I've only messed with jQuery a little (played around with it when I found out about it), but recently I've been bored so I picked up an AJAX book at my school's library. Is there any point going through it and trying to learn AJAX, or should I go find some jQuery tutorials and attempt to learn that?

Andrew 2009-11-20 00:26:14

In all honesty I consider jQuery a "must-have" for Javascript development, particularly for Ajax. It just solves way too many cross-browser problems and is so small (under 20K and cacheable). IMHO there's just no reason (any more) to know the right sequence of objects to create to do a cross-browser XmlHttpRequest.

cletus 2009-11-20 00:28:46

Alrighty. I'll look into it. Thanks. :)

Andrew 2009-11-20 00:33:39

Look into the jQuery form plugin. Its as simple as:<form action="login.php" id="loginForm">$('#loginForm').ajaxForm();http://jquery.malsup.com/form/

Brandon G 2009-11-20 00:40:49

Cross browser XMLHttpRequest isn't the trial it once was. Test for `window.XMLHttpRequest`, use `ActiveXObject` as a fallback for IE6... that's it, job done. Personally I wouldn't drag in jQuery for something as simple as this form. I'd second moving the event to `form.onsubmit` instead of a button click you can't rely on. Best: make the form work by itself as a normal HTML form pointing to login.php, then add progressive-enhancement XMLHttpRequest sauce to make it nicer where JavaScript and XHR are available.

bobince 2009-11-20 01:00:27

ansaurus

tags:

views:

answers:

Concerning AJAX, PHP, and processing forms

related questions