Confused by a javascript problem, event handlers not working as expected/desired

D

Deryck

Hello,

I have been modifying some javascript shopping basket code and have run into
a problem. I have produced a subset of the HTML/JS that shows the problem
and placed it here:

http://dusrc.org/js_test.html

The problem is described on that page but basically 2 event handlers are
being called when I would expect just one to be called.

If someone could explain what I am doing wrong then I would be very
grateful.

Thanks

Deryck
 
V

VK

1) <input type="image"> is equal by functionality to <input="submit">
(except it lets you track the click coords within the image)
So except some rare cases, it is always better to use old good linked image

2) If a form contains only one single-line text box, pressing <Enter> within
this box is equal to submit() action.

3) onChange event is called only after the input lost its focus. Evidently
by pressing <Enter> within the textbox you don't remove the focus, so
onChange is never called.
Change the textbox value and click anywhere on the page to see your problem.

You should re-think your model, it's too confusing for browsers.

The best would be:

<form onSubmit="someGlobalCheckOf(this)">
 
D

Deryck

VK said:
1) <input type="image"> is equal by functionality to <input="submit">
(except it lets you track the click coords within the image)
So except some rare cases, it is always better to use old good linked
image

2) If a form contains only one single-line text box, pressing <Enter>
within
this box is equal to submit() action.

3) onChange event is called only after the input lost its focus. Evidently
by pressing <Enter> within the textbox you don't remove the focus, so
onChange is never called.
Change the textbox value and click anywhere on the page to see your
problem.

Thanks for the above, very educational.
You should re-think your model, it's too confusing for browsers.

It confuses me too!
The best would be:

<form onSubmit="someGlobalCheckOf(this)">
OK, Thanks again for replying.

Deryck
 
M

Michael Winter

[snip]
If someone could explain what I am doing wrong then I would be very
grateful.

You're not doing anything wrong. An image INPUT is a form of submit button
so pressing <Enter> whilst a form control has focus will cause the form to
submit.

As for the errors in Firefox, they would seem to be caused by something
the browser itself is doing, not your actions.

Mike
 
M

Michael Winter

1) <input type="image"> is equal by functionality to <input="submit">
(except it lets you track the click coords within the image)
So except some rare cases, it is always better to use old good linked
image

I hope you don't mean

<a ... onclick="<formRef>.submit();">...</a>

It that was you're intent, I'd argue that it is *only* in some rare cases
that using a link is better.

[snip]

Mike
 
V

VK

I hope you don't mean
<a ... onclick="<formRef>.submit();">...</a>

I'm too old to take a sin like that on my soul :))

<a href="void(0)" onClick="someValueCheckFun()">


As I remember, it's actually should be
href="someValueCheckFun();cancelBubble=true">
but here we having a standard situation of an old dog and a new trick :))
 
M

Michael Winter

[snip]
As I remember, it's actually should be
href="someValueCheckFun();cancelBubble=true">
but here we having a standard situation of an old dog and a new trick
:))

The "correct" way is along the lines of

<a href="somewhere-useful.html"
onclick="/* ... */;return false;">...</a>

where somewhere-useful.html is a page you can use to perform the same
thing via the server which the script should have accomplished.

If the script action may fail during execution (due to a missing feature,
for example) the return value should be determined by that script.


The point I was trying to make was that using a link would mean that
action would (probably[1]) become dependent upon scripting.

Mike


[1] If nothing but an instruction and a session id needs to be sent to the
server, a link could handle that fine, but if other information needs to
be sent too, only a form submission would do.
 
V

VK

The "correct" way is along the lines of

<a href="somewhere-useful.html"
onclick="/* ... */;return false;">...</a>

Thanks, this is what I meant.

And the outdated way (in case anyone follows this thread) is
<a href="javascript:void(0)" ... >

I missed "javascript:" in my OP, but doesn't matter: your way is indeed more
functional.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top