Tons of form fields with tons of JS, best way?

K

Korialstrasza

Gawd
Joined
Jan 21, 2004
Messages
561
I have about 130 form fields for this single form and each field has JS with it, like onFocus, Onblur, onmouseover, onmouseout, etc.

Is there a way to clump it together better? Or do I have to go through and copy/paste the js into each <input>?

And most of the fields are different, so I can't make a php loop and echo out fields.

Thanks for the advice
 
slightly different

<input stuff>
onBlur="formMouseAction(this.id,'out','blur');"
onFocus="formMouseAction(this.id,'over','focus');"
onMouseOver="formMouseAction(this.id,'over','none');"
onMouseOut="formMouseAction(this.id,'out','none');"
</input>
 
I would familiarize yourself with the various event models:

http://www.quirksmode.org/js/introevents.html

The way you are approaching the problem (using the attributes onclick, onblur, etc) is very outdated.

The best way to do what you are trying to do is build an array of all the form input elements you want to handle events for. Then, you can use the DOM and the DOM Event specification to bind event listeners to each of those form input elements.

From the way your function calls are structured it appears you are doing something very repetitive; this could be vastly simplified using the DOM event specification and event listeners.

Since there are definitely quirks and incompatibilities when it comes to cross-browser event handling, I would recommend using a library to help you. In the past I have used Yahoo's YUI Event library to great success. Here is an article that might help you understand some of the cool things it can do:

http://www.dustindiaz.com/yahoo-event-utility/

And here is the official page for it:

http://developer.yahoo.com/yui/event/index.html

If you could more adequately explain what you are trying to accomplish, I might even be able to cook up a relevant example for you. As an aside, however, putting 130 form fields on the same page is not very user friendly. Is there some way you could more easily present and gather this information?
 
low-pro's event.addBehavior will be able to help you out a ton. Let's you add arbitrary javascript to anything you can select using a css3 selector.

jquery has this type of functionality as well.
 
another vote for jQuery here. It can make your life much easier.
 
Jquery is awesome!

Thanks guys!

Low pro didn't seem to have very much documentation or tutorials, but maybe I just suck :)
 
You must log in or register to reply here.
Back
Top