Prev: How to create / map short-cut to some presentation features?
Next: drag and drop target strategies
From: Cody Haines on 15 Feb 2010 17:20
I have a form, that I have connected to some ajax code using
form.addEventListener('submit',ajaxfunc,false); (or
form.attachEvent('onsubmit', ajaxfunc); as the case may be).

My question is, how do I prevent the submit from initiating a page
refresh? I know onSubmit="return ajaxfunc()" will prevent a refresh if
ajaxfunc() returns false, but how do I do this without putting
JavaScript into my HTML?
From: Richard Cornford on 15 Feb 2010 18:34
Cody Haines wrote:
>I have a form, that I have connected to some ajax code
> using form.addEventListener('submit',ajaxfunc,false);
> (or form.attachEvent('onsubmit', ajaxfunc); as the case
> may be).

Why not:-

form.onsubmit = ajaxfunc;

And avoid the branching and the variations in handling the cancelling of
the default action (the submitting in this case)? After all, likely you
are not going to be attaching multiple onsubmit listeners, and if
someone else is going to then they can use addEventListener or
attachEvent without altering the intrinsic event property.

> My question is, how do I prevent the submit from initiating
> a page refresh?

Cancel the default action, with the appropriate DOM method of the event
object in the addEventListener case, and by assigning false to a -
returnValue - property of the event object in IE's case. Or just assign
the function to the FORM elements - onsubmit - property and let its
returning false cancel the submission.

> I know onSubmit="return ajaxfunc()" will prevent a refresh
> if ajaxfunc() returns false,

That same condition applies to:-

form.onsubmit = ajaxfunc;

> but how do I do this without putting
> JavaScript into my HTML?

What is wrong with putting javascript into your HTML page, the browser
won't mind?

Richard.

 | 
Pages: 1
Prev: How to create / map short-cut to some presentation features?
Next: drag and drop target strategies