jQuery / AJAX -- 'add new category' within a form

Goodshape

I'm a bit of a jQuery noob - trying to figure out how to get the following done and just wondering if anyone's got any tips on the best way to go about it.

Simply, I have a form for submitting a new 'page' to the database. Pages can be categorized and I've got the list of available categories to choose from.

What I want is an 'add new category' button - so that a new category can be added to the list without leaving the 'add page' form.

I originally had the extra form ('add category') loading in a div within the existing form when the button was pressed. I figured this wasn't good practice as it creates a nested form - am I right?

So now I've got the extra form loading in a floating iFrame with prettyPhoto - which looks quite nice, but leaves me wondering how do I update the list on the original form based on actions within this iFrame?

Even a point towards what I should be googling would be helpful.

Thanks.

Goodshape

Hmmm. Maybe I'll rethink this.

A category only really needs a name (description and other details can be filled in later) - so maybe a permanent 'add new category' field bellow the list, which updates the Categories database table and the list on the current page when it's used.

Still raises the problem of nested <form>'s, which aren't allowed in xhtml afair.

Or is an extra form even needed? Maybe the 'submit' button on the add category field is purely jQuery/AJAX driven -- no need for an HTML form?


Thinking out loud here, really. Would love some pointers.

daymobrew

How does Wordpress, which uses jQuery too, handle the adding of categories without leaving the page?
(Edit Post, click Add New Category, click Add button).

Goodshape

I think it uses the ajax/jquery powered 'submit' button, rather than any extra <form>... which is the method I'm looking into now.

At the moment it seems to me to make the most sense.