How to have one div control another?

[scriptnoob]

Hi guys, I currently have a main page with two divs next to each other: sideBar and contentArea. sideBar contains text areas for log-in information, and I'd like for contentArea to refresh, if you will, with either "Thank you" or "Invalid log-in" based upon the credentials that the user has entered (trying to keep it simple right now).

Currently, my main page posts information to a php page that validates the information, then sends them to a completely new page based whether they've entered valid or invalid credentials. Optimally, I'd like for the page to remain static while allowing the selection made in sideBar to determine what is displayed in contentArea. I made this post in the PHP forum and was told that it's more of a Java/AJAX issue, so I'm hoping that you wise, learned uses can help me out.

Any and all help is much appreciated, and thanks in advance for taking the time to read.

//form snippet from index.html page in case it's needed

<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>

[rainborick]

You will need to get some experience with AJAX and writing to an element's 'innerHTML' to do what you want. Essentially, you need to intercept the form's "action" when the Submit button is pressed. Then your JavaScript would read the values of the form variables and pass them on to the login.php script via AJAX, which will receive the results of the script and draw them into your content DIV.

I would suggest that you make sure that the form also functions for users running with JavaScript disabled. There's a good percentage of users who do that. For example, you might try having JavaScript display a Submit button that calls your AJAX code, but also include a standard Submit button in a <noscript> section at the end of the form.