Jump to content

AJAX headache


newbi3
 Share

Recommended Posts

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'];
}
?>
Link to comment
Share on other sites

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 by newbi3
Link to comment
Share on other sites

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)

}

Link to comment
Share on other sites

$_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 by digip
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...