dynamic form input options?

[ph...@ryangibbons.net]

Hey all,

I am building a form and I would like the end user to be able to "add"
form fields as needed. I am doing a website for a scuba organization
one of the sections on the user registration form deals with a user's
various certifications. Obviously some users will have more
certifications than others so I was thinking that the best way to
handle this would be to display one set of options "Certifying Agency"
and "Certification Type" and then allow the user to add pairs of these
as necessary using an add button or text link.

The posted data will then be inserted into a mysql db, any idea on how
should I handle the dynamic number of "certifications?" I am using a
relational database structure so any inserted certifications will be
entries of their own in a relational table linking the user id to the
certifying agency's id to the type id.

Anyways I am a new user of anything ajax or js related, and I am just
beginning to learn some of the foundations...

I am not looking for a full-on code write up, rather some suggestions
or if you know of any examples like this?

Let me know if this doesn't make sense or if you need more details.

As usual thank you for all the help, one day I hope that I might be
able to to constructively respond to some of the questions in this
group.

Take care,
Ryan

[T.J. Crowder]

Hi Ryan,

What you'll want to do is:

1. Read up on the DOM and how to manipulate it. Most things are Nodes
or Elements (Element being a subclass of Node), and you can add and
remove Nodes and Elements at runtime via JavaScript using DOM
manipulation functions. There's also a non-standard (e.g., not
specified as part of the DOM by the W3C) property that is nonetheless
widely-supported by modern browsers called "innerHTML" that allows you
to set the contents of an existing element using a string of HTML;
useful to know about that as well (although it can't be used for your
specific thing -- see "gotcha" below).

2. Read through the Prototype API[1] from beginning to end, because
Prototype makes manipulating the DOM a lot more straight-forward and
irons out some inconsistencies from browser to browser for you.
Reading through the API from beginning to end only takes an hour or
two, and it will save you dramatically more time than that.

[1] http://prototypejs.org/api

There's a "gotcha" specifically with adding form fields I'll warn you
about: You can add most elements (paragraphs, lists, images, etc.) to
pages using the "innerHTML" property I mentioned earlier and writing
them as HTML in a string (and it usually runs faster), but you *can't*
reliably use that property to add fields to a form. It's just a quirk
of how browsers handle that non-standard property. So to add fields,
you must use the DOM manipulation methods (or Prototype's excellent
wrappers for them), not the innerHTML property.

Don't let the above put you off. It's actually really easy. Here's a
quick and dirty example:
http://pastie.org/354555
The "appendChild" function I'm using there is part of the DOM; the
Element constructor is a Prototype thing that simplifies creating an
element with a given tag name and setting attributes on it.

HTH,
--
T.J. Crowder
tj / crowder software / com

On Jan 7, 6:44 am, "ph...@ryangibbons.net" <ph...@ryangibbons.net>
wrote: