AJAX headache

[newbi3]

I am working on a login form. The HTML form and the PHP is good but the ajax doesnt return anything...

Why the hell wont my stuff work?

Here is my html:

<div id="results"></div>
<form id="login" action="" method="POST" onSubmit="attemptLogin()">
  <table cellspacing="10px";>
    <tr>
       <td><label>Username</label></td>
       <td><input type="text" name="username"></td>
    </tr>
    <tr>
       <td><label>Password</label></td>
       <td><input type="password" name="password"></td>
    </tr>
    <tr>
       <td><input type="submit" value="LOGIN"></td>
    </tr>
  </table>
</form>

Javascript:

function attemptLogin() {
  var xmlhttp;
  if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("results").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST","actions.php?login",true);
  xmlhttp.send();
}

and my PHP (in a file called actions.php):

<?php
if (isset($_GET['login'])) {
  echo 'Hello ' . $_POST['username'];
}
?>

[potato]

if (isset($_GET['login'])) {

Change that to $_POST or $_REQUEST

[newbi3]

if (isset($_GET['login'])) {

Change that to $_POST or $_REQUEST

Thanks but my problem was it was submitting and refreshing so I never saw the text displayed a simple return false; did the trick!

My new problem is that the values in the input fields don't seem to be being submitted. Heres my updated code:

html:

<div id="results"></div>
<form id="login" action="actions.php?login" method="POST" onsubmit="attemptLogin(); return false;">
  <table cellspacing="10px";>
    <tr>
      <td><label>Username</label></td>
      <td><input type="text" name="username" id="username"></td>
    </tr>
    <tr>
      <td><label>Password</label></td>
      <td><input type="password" name="password"></td>
    </tr>
    <tr>
      <td><button type="button" onclick="attemptLogin()">Try the thing</button>
      <td><input type="submit" value="LOGIN"></td>
    </tr>
  </table>
</form>

javascript:

function attemptLogin() {
  var xmlhttp;
  if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("results").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST","actions.php?login",true);
  xmlhttp.send();
}

php:

<?php

if (isset($_GET['login'])) {
  if (isset($_POST['username']) || isset($_GET['username']) || isset($_REQUEST['username']))
    echo 'hello ' . $_POST['username'];
  else
    echo "username was not set.";
}

?>

Edited August 25, 2013 by newbi3

[newbi3]

Solved the problem was in the javascript here is the updated code for anyone else who has this problem:

function attemptLogin() {
  var xmlhttp;
  if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("results").innerHTML=xmlhttp.responseText;
    }
  }

  var usernamevalue=encodeURIComponent(document.getElementById("username").value)
  var passwordvalue=encodeURIComponent(document.getElementById("password").value)
  var parameters="username="+usernamevalue+"&password="+passwordvalue
  xmlhttp.open("POST", "actions.php?login", true)
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
  xmlhttp.send(parameters)

}

[digip]

$_GET when you want to echo a $_POST was the issue as mentioned above. If you use a $_REQUEST you'll be getting more data including cookies and other such, like everything from the original form though from all fields and extra data you don't need unless putting into a string or encoding somewhere for something else.

Your form is posting to itself though when your page you want to echo data from the $_POST code is in another file "actions.php". I would just change the form to:

[s]<form id="login" action="actions.php" method="POST">[/form]
You don't really need any of the ajax part unless you put all the form post data in ajax/javascript to do the actual form post for you, which needs to be on the submit button, not the <form> tag. 

Like a hook for a submit button using just a button with javascript, onclick event, then call the function. ie:
[code]<script>
function attemptLogin(){
alert(1);
}
</script>
<form method="post" action="">
<button onclick="attemptLogin();">Submit</button>
</form>[/s]

Obviously change the code as needed. Either post directly to the external page action.php and bypass need for ajax(unless there is more code you have a need for somewhere not shown here), or use a different method to call your javascript function like my button example to call your function.

forget what I said, looks like you got it to work..lol. didn;t think it owuld work on the <form> tag itself to execute, but i guess because it posted to itself it caught the request anyway.

Edited August 26, 2013 by digip