How to target the same page/div?

[scriptnoob]

Hi folks, I've got another question that is likely relatively simple to you wise, learned users on here :) I have a main page, index.html, that contains a side menu bar that initially displays text boxes for a user id and password. Currently, index.html posts to login.php, which validates the information and sends the user to one of two pages based upon whether they have entered valid or invalid credentials.

Optimally, I would like to keep everything on one page. After the user enters their information and hits the submit button, I would like this side menu bar area to "refresh", if you will, with a message of either "Invalid log-in" or "Thank you" (trying to keep things simple for now) once the information has been validated in the same page.

Code from both pages can be found below, and thanks in advance for any and all help!

//form snippet from index.html page

<div id="sideBar"><!-- InstanceBeginEditable name="sideBarRegion" -->
<form action="login.php" method="post"><br /><center>Please enter your User ID and Password:<br /><br /><br />
User ID:
<input name="id" type="text" maxlength="6"><br><br>
Password: <input name = "passwd" type="password" maxlength="10"><br><br>
<input type="submit" value="Log In"></center><br><br>
<br><br>
</form>
<!-- InstanceEndEditable --><br /><br /><br /><br /><br /><br /></div>

//login.php

<?php session_start(); ?>
<?php session_unset(); ?>
<?php
include('dbinfo.inc.php');
mysql_connect('localhost',$username,$password);
@mysql_select_db($database) or die('Unable to select database');
$id=$_POST['id'];
$id=mysql_real_escape_string($id);
$passwd=$_POST['passwd'];
$passwd=mysql_real_escape_string($passwd);
$query="SELECT * FROM useraccounts WHERE id='".$id."' and passwd='".$passwd."'";
$result=mysql_query($query);
$numrows=mysql_numrows($result);
mysql_close();
$_SESSION['agtnbr'] = mysql_result($result,0,"agtnbr");
IF ($numrows==0){
header('location: tryAgain.html');
}else{
header('location: polinq.php');
}
?>

[jd01]

The short version is you'll probably need to use JavaScript or jQuery or something else to initiate the processing of the form:

<form action="" name="login" onSubmit="yourJSFunction();"><br /><center>Please enter your User ID and Password:<br /><br /><br />
User ID:
<input name="id" type="text" maxlength="6"><br><br>
Password: <input name = "passwd" type="password" maxlength="10"><br><br>
<input type="submit" value="Log In">

You'll have to wait for someone else to give you the longer version, because JS and I don't always get along, so I usually refrain from posting solutions off the top of my head and I'm away from my main computer right now, but if you're impatient like me, you'll probably find exactly what you need shortly in your favorite search engine.

[scriptnoob]

Yeah, I was able to find a few answers via search engines, but they were all too complicated for me to follow. I'm a total noob at PHP, so I'm hoping that someone can provide to me a simplified solution that I can actually understand. I'd like to learn what I'm doing, not just slap code onto a page just for the sake of getting it to work, y'know?

Anyway, thanks for taking the time to reply, jd01. Any other suggestions that you can give when you get back to your main computer would be greatly appreciated.

[jd01]

Yeah, I was able to find a few answers via search engines, but they were all too complicated for me to follow. I'm a total noob at PHP, so I'm hoping that someone can provide to me a simplified solution that I can actually understand. I'd like to learn what I'm doing, not just slap code onto a page just for the sake of getting it to work, y'know?

Yeah, it's always better to understand what you are doing and working with, for sure...

It's not really a php question anymore (right now) if login.php works though... Now it becomes more of a JavaScript / AJAX question, because with PHP you have to reload the entire page, not just a single div, so what you will need to do now that you have the PHP working (I think) and the HTML is get the JavaScript to interact between the PHP and the HTML, because what you are really looking for is an AJAX solution and it's going to be a bit complicated to get your head wrapped around at first.

I use it, but I'm really not the person to explain it to you... It just kind of makes sense to me because I code quite a bit of PHP and Mod_Rewrite, so I can use JS personally, but you will probably get the best, most thorough answer from someone else, or in the JavaScript / AJAX forum...

I would post the same question there, because you are going to need to POST the form variables with JavaScript (it's 'bad practice' to use GET with login info) and then receive responses back from the PHP script and change the HTML based on the variables POSTed and the responses received, all using JavaScript and there are some real nuances to the whole thing I'm not very good at explaining.

I can tell you what works, but to tell you why, or find the little error that jumps out at someone else who's used JavaScript more than I have, is not something I am very good at doing with someone else's JS yet.