Hi, I just started my first experiment with AJAX today. Got the basics
working, but when I add a tiny bit more complexity I have a problem,
Event.stop doesn't work properly for me.
I've followed a couple of basic tutorials to submit an e-mail address
to a PHP script, the PHP looks up the e-mail address and if it finds
it, it shows an input to enter a password. This all works fine except
the function with the ajax call to the password PHP script does not
stop the form submitting.
There is probably something very obvious I am doing wrong so hopefully
someone will be able to spot this a mile away! :)
The HTML looks like this, once the second form has been displayed
<form id="email-form" action="procBasketEmailNoJS.php" method="post">
<input id="email" class="texterwide" type="text" name="email"/>
<input id="email-submit" class="button" type="submit" value="Submit"/>
</form>
<div id="email-response">
we have saved details on file for you, please enter your password
below to retrieve them
<br/>
<form id="password-form" onsubmit="callProcBasketPassword()"
action="procBasketPasswordNoJS.php" method="post">
<input id="password" class="texterwide" type="text"
name="password"/>
<input id="password-submit" class="button" type="submit"
value="Submit"/>
</form>
</div>
<div id="password-response" name="password-response"/>
</div>
Here is the ajax.js
// Attach handler to window load event
Event.observe(window, 'load', init, false);
function init(){
Event.observe('email-form', 'submit', callProcBasketEmail);
}
function callProcBasketEmail(e) {
var pars = Form.serialize('email-form');
var myAjax = new Ajax.Updater('email-response',
'procBasketEmail.php', {method: 'post', parameters: pars});
Event.stop(e);
}
function callProcBasketPassword(e) {
var pars = Form.serialize('password-form');
var myAjax = new Ajax.Updater('password-response',
'procBasketPassword.php', {method: 'post', parameters: pars});
Event.stop(e);
}
When I step through in Firebug I can see that the password-response
div gets filled with the results of the procBasketPassword.php script,
but then the page tries to reload where the form is pointing to -
action="procBasketPasswordNoJS.php".
Event.stop(e); works fine in the first function, but not in the second
one. Please can you help?
Thanks in advance.
Ashley
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
