onClick, onChange problems with form submit

[Andy Goldstein]

I have a table where all the TRs have an onClick handler registered.
One (and only one) of the rows has 2 text input boxes, where each
textbox has an onChange handler registered. Both the onClick and
onChange handlers do some minor manipulation of form data (although
they work on different form elements). If the onChange event fires, I
need the form to be submitted. If the onClick event fires for a TR, I
also need the form to be submitted. What I am seeing is that if I
change the value in a text box, then click on a row, the onChange
handler runs, performs the form submission, and sometimes onClick also
runs and does a form submission as well. This leads to unpredictable
results.

Ideally I'd like some way to be able to execute onChange from start to
finish, then onClick from start to finish, then submit my form (just
once of course). So far I haven't figured out a way to do this. Does
anyone have any suggestions for how to accomplish this?

Thanks in advance,
Andy

 

[Lee]

Andy Goldstein said:

I have a table where all the TRs have an onClick handler registered.
One (and only one) of the rows has 2 text input boxes, where each
textbox has an onChange handler registered. Both the onClick and
onChange handlers do some minor manipulation of form data (although
they work on different form elements). If the onChange event fires, I
need the form to be submitted. If the onClick event fires for a TR, I
also need the form to be submitted. What I am seeing is that if I
change the value in a text box, then click on a row, the onChange
handler runs, performs the form submission, and sometimes onClick also
runs and does a form submission as well. This leads to unpredictable
results.

Ideally I'd like some way to be able to execute onChange from start to
finish, then onClick from start to finish, then submit my form (just
once of course). So far I haven't figured out a way to do this. Does
anyone have any suggestions for how to accomplish this?

Instead of simply submitting the form, first check to see if it has
already been scheduled for submission. If not, use setTimeout() to
schedule submission after a 100ms delay.

 

[Thomas 'PointedEars' Lahn]

I have a table where all the TRs have an onClick handler registered.

It would be better if only the parent TABLE element would have that
handler and you would use event bubbling to handle that event.

One (and only one) of the rows has 2 text input boxes, where each
textbox has an onChange handler registered.

While I would recommend that you then give that TR element an ID to
tell it from the others in the event listener, I remind you that TABLE
elements should not be used for layout purposes alone; use CSS for
that instead.

Both the onClick and onChange handlers do some minor manipulation of
form data (although they work on different form elements). If the
onChange event fires, I need the form to be submitted.

You certainly do not want that. Consider that the user made a typo, is
recognizing that after the control is updated and will be now disallowed
to correct it. Users are used to the behavior that a form is submitted
when *they* _chose_ to submit it, using the submit button. (You *have*
thought of a submit button and thus of users without client-side script
support, have you not?)

If the onClick event fires for a TR, I also need the form to be
submitted.

A similar problem here. What if someone wants to use his pointing
device (usually a mouse) to copy/paste some information? The "click"
event would fire then.

What I am seeing is that if I change the value in a text box, then
click on a row, the onChange handler runs, performs the form submission,
and sometimes onClick also runs and does a form submission as well.
This leads to unpredictable results.

Which is why you should let it be.

Ideally I'd like some way to be able to execute onChange from start to
finish, then onClick from start to finish, then submit my form (just
once of course).

There is nothing ideal of this approach.

So far I haven't figured out a way to do this. Does
anyone have any suggestions for how to accomplish this?

Do not do this.


HTH

PointedEars