PHP验证表单

Question

I have been trying to get validation messages from my login.php to display on the page with the form, where am I going wrong? I did try JavaScript at one point to display the information with no luck, it keeps displaying as seen in the image below.

I know it could be added to the same page for the result I want but I'm trying to do it as a clean page, with no jQuery, some vanilla JavaScript at very most. The aim is to have the validation messages above the form, at first I was thinking spans but I'm not sure where to look for tutorials on how to output results from another file while staying on the same page.

http://snag.gy/SI9lq.jpg

      <table border ='0'>
                <form action="login.php"  method="POST">
                    <tr><td>Username:</td> <td><input type="text" name="username" required></td></tr>
                    <tr><td>Password:</td> <td><input type="password" name="password" required></td><tr>
                    <tr><td><input button id="myBtn" type="submit" value="Log in"><td></tr>
                    <tr><td><a href='register.php'>Register</a></td></tr>
            </table> 




     <?php

session_start();

$username = $_POST['username'];
$password = $_POST['password'];
$errors = array();


if ($username&&$password)
{

$connect = mysql_connect("localhost","root","") or die ("Could not connect");
mysql_select_db ("login") or die ("Could not find database");

$query = mysql_query("SELECT * FROM users WHERE username ='$username'");

$numrows = mysql_num_rows($query);
if ($numrows !=0)
{
    while ($row =mysql_fetch_assoc($query))
    {
        $dbusername = $row['username'];
        $dbpassword = $row['password'];
    }

    if ($username==$dbusername&&$password==$dbpassword)
    {
        echo header( 'Location: member.php' ) ;
        $_SESSION['username']=$dbusername;
    }
    else 
        echo"
         <script type=\"text/javascript\">
        window.onload = function latestNews(){
      var newPara = document.createElement('p');
      var add_news = document.createTextNode('Incorrect password');
      newPara.appendChild(add_news);
      var getSecond = document.getElementById('footer');
      document.body.insertBefore(newPara, getSecond);
    };
         </script>
    ";
}
else
    die("That user dosen't exist");

}

else
    die("Please enter a username and a password");
?>

EDIT

I attempted to add JavaScript although it had the same effect.

Answer 1

Well it's not excalty what I wanted but I forced myself to learn Ajax login, it's not the best it the world, well it's my first ajax login but for anyone who is interested in the answer:

Save as login:
    <?php session_start(); $username=$ _POST[ 'username']; $password=$ _POST[ 'password']; $errors=a rray(); if ($username&&$password) { $connect=m ysql_connect( "localhost", "root", "") or die ( "Could not connect"); mysql_select_db ( "login") or die ( "Could not find database"); $query=m ysql_query( "SELECT * FROM users WHERE username ='$username'"); $numrows=m ysql_num_rows($query); if ($numrows !=0) { while ($row=mysql_fetch_assoc($query)) { $dbusername=$ row[ 'username']; $dbpassword=$ row[ 'password']; } if ($username==$dbusername&&$password==$dbpassword) { echo header( 'Location: member.php' ) ; $_SESSION[ 'username']=$dbusername; } else echo "Incorrect password"; } else die( "That user dosen't exist"); } else die( "Please enter a username and a password"); ?>

Save as scripts.js:


    function createXMLHttpRequestObject() 
    {
      var ajaxObject = false;
      if (window.XMLHttpRequest) 
      {
        ajaxObject = new XMLHttpRequest();
      } 
      else if (window.ActiveXObject) 
      {
            try 
            {
                ajaxObject = new ActiveXObject("Msxml2.XMLHTTP");
         } 
    catch(e) 
             {
                try 
                    {
                    ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
                } 
    catch(e) 
                    {
                        ajaxObject = false;
                 }
         }
      }
      return ajaxObject;
    }

    function grabFile(file) 
    {
      var isAjax = createXMLHttpRequestObject();
      if (isAjax) 
        {
        isAjax.onreadystatechange = function() 
          {
          getCurrentState(isAjax);
          };
        isAjax.open("GET", file, true);
        isAjax.send(null);
      }
    }

    function getCurrentState(thisFile) 
    {
      if (thisFile.readyState == 4) 
      {
        if (thisFile.status == 200 || thisFile.status == 304) 
        {
          document.getElementById('myBtn').innerHTML = 
          thisFile.responseText;
        }
      }
    }


    function ajax_post(){
        // Create our XMLHttpRequest object
        var hr = new XMLHttpRequest();
        // Create some variables we need to send to our PHP file
        var url = "login.php";
        var un = document.getElementById("username").value;
        var pw = document.getElementById("password").value;
        var vars = "username="+un+"&password="+pw;
        hr.open("POST", url, true);
        // Set content type header information for sending url encoded variables in the request
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // Access the onreadystatechange event for the XMLHttpRequest object
        hr.onreadystatechange = function() {
            if(hr.readyState == 4 && hr.status == 200) {
                var return_data = hr.responseText;
                document.getElementById("status").innerHTML = return_data;
            }
        }
        // Send the data to PHP now... and wait for response to update the status div
        hr.send(vars); // Actually execute the request
        document.getElementById("status").innerHTML = "processing...";
    }

I didn't include the database it was starting to become a wall of text. Thank you to everyone for the advice and suggestions.