Sounds like the submit event doesn't exist the second time around so
the default browser submit takes over. I think evalScripts is supposed
to take care of that but it's never worked as expected for me.
I don't know the right way to do it ... but I put my code for the form
in a separate file and put the addEvent javascript in that same file.
So every time it's loaded--wither via ajax or the original php
include--the event gets created.
So with your code I'd take all this and put in a file called
authForm.html or authForm.php:
--------------------------------------------
<div class="form">
<form name="login" id="authForm" method="post" action="../
checkLogin/">
<table width="350px" border="0">
<tr>
<td width="30%" align="right"><strong>Name:</
strong></
td>
<td width="70%"><input name="username" id="username"
type="text" class="textbox" size="30" /></td>
</tr>
<tr>
<td> </td>
<td><font style="font-size: 12px;">Example:
<strong>eparker</strong></font></td>
</tr>
<tr>
<td align="right"><strong>Password:</strong></td>
<td><input name="password" type="password"
id="password" class="textbox" size="30" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="go" id="authForm"
class="loginbutton" value="Sign In" /></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$('authForm').addEvent('submit', function(e) {
//Prevents the default submit event from loading a new
page.
e.stop();
this.set('send', {
evalScripts: true,
onRequest: function(){
$$('.form').fade('out');
},
onComplete: function(response) {
$$('.form').set('html', response);
$$('.form').fade('in');
}});
//Send the form.
this.send();
//Empty the log and show the spinning indicator.
});
</script>
--------------------------------------------
On Mar 13, 4:27 am, TimeImp <time...@live.com> wrote:
> Hi everyone,
> I have been using MooTools for some time now but occasionally run into
> various errors here and there but this one has me stumped:
>
> window.addEvent('domready', function() {
> $('authForm').addEvent('submit', function(e) {
> //Prevents the default submit event from loading a new page.
> e.stop();
> this.set('send', {
> evalScripts: true,
> onRequest: function(){
> $$('.form').fade('out');
> },
> onComplete: function(response) {
> $$('.form').set('html', response);
> $$('.form').fade('in');
> }});
> //Send the form.
> this.send();
> //Empty the log and show the spinning indicator.
> });
>
> });
>
> /*** HTML: ***\
>
> <div class="form">
> <form name="login" id="authForm" method="post" action="../
> checkLogin/">
> <table width="350px" border="0">
> <tr>
> <td width="30%" align="right"><strong>Name:</strong></
> td>
> <td width="70%"><input name="username" id="username"
> type="text" class="textbox" size="30" /></td>
> </tr>
> <tr>
> <td> </td>
> <td><font style="font-size: 12px;">Example:
> <strong>eparker</strong></font></td>
> </tr>
> <tr>
> <td align="right"><strong>Password:</strong></td>
> <td><input name="password" type="password"
> id="password" class="textbox" size="30" /></td>
> </tr>
> <tr>
> <td colspan="2" align="center">
> <input type="submit" name="go" id="authForm"
> class="loginbutton" value="Sign In" /></td>
> </tr>
> </table>
> </form>
> </div>
>
> When the form is submitted the first time, it works. If user
> successfully logs in then the page redirects (no probs at all).
> However, it they fail authentication, the response is simply the HTML
> code above with a message saying they were wrong. But when I click on
> Sign In, it simply reloads the whole page, not the div?!
>
> Why, I can't exactly tell but hope to learn from this.
>
> Any help would be really great and really appreciated.
>
> TimeImp
