If you are using "onsubmit" you need to do this ...

onsibmit="return theCoolFunction();"

then you may return false or true on certain things ...

As TJ recommended i would stay away from these old style handlers and look 
at delegating it properly

HTH


Alex Mcauley
http://www.thevacancymarket.com
----- Original Message ----- 
From: "Ash" <ashley.kenner...@gmail.com>
To: "Prototype & script.aculo.us" <prototype-scriptaculous@googlegroups.com>
Sent: Monday, August 03, 2009 2:23 PM
Subject: [Proto-Scripty] Re: Beginners question, trouble with Event.stop in 
AJAX



Thanks for the help, I just tried replacing Event.stop(e); with return
false; in the function but it still submits the form.

I would prefer to do it the new way anyway, if you would be able to
help me...

The first function is called from Event.observe('email-form',
'submit', callProcBasketEmail); which is within a function that is
called when the document loads.

The question is, where to put the event observe to watch the second
form.

My first instinct would be to put it in the function which outputs the
form EG


function callProcBasketEmail(e) {
 var pars = Form.serialize('email-form');
 var myAjax = new Ajax.Updater('email-response',
'procBasketEmail.php', {method: 'post', parameters: pars});
 Event.observe('password-form', 'submit', callProcBasketPassword);
 Event.stop(e);
}

(line added just after the ajax function has drawn 'password-form' to
the screen)

But this stops the whole function from working - where should the
observe line be placed to ensure it will work properly?

Thanks in advance, I think once I get over these initial few hurdles
of getting to grips with good practices, I will be fine!

Ashley


Here is the javascript in full:



// 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.observe('password-form', 'submit', callProcBasketPassword);
 Event.stop(e);
}

function callProcBasketPassword(e) {
 var pars = Form.serialize('password-form');
 alert(pars);
 var myAjax = new Ajax.Updater('password-response',
'procBasketPassword.php', {method: 'post', parameters: pars});
 Event.stop(e);
}

On Aug 2, 11:19 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> Hi Ashley,
>
> In the one that's not working, you're using what's called a "DOM0-
> style" handler -- that's where you're attaching the handler the old-
> fashioned way, by using an attribute on the form element:
>
> > <form id="password-form" onsubmit="callProcBasketPassword()"
> > action="procBasketPasswordNoJS.php" method="post">
>
> Event.stop works only for handlers registered with more modern methods
> like the Event.observe you used with your first form.
>
> To correct the problem, I'd recommend using Event.observe to set up
> the handler for the second form as you did with the first. If there's
> a reason you can't do that, though, the "DOM0" equivalent of
> Event.stop is to return false from callProcBasketPassword.
>
> HTH,
> --
> T.J. Crowder
> tj / crowder software / com
> Independent Software Engineer, consulting services available
>
> On Aug 1, 4:35 pm, Ash <ashley.kenner...@gmail.com> wrote:
>
> > 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
-~----------~----~----~----~------~----~------~--~---

Reply via email to