Getting Away From Having a Form Within a Form

tycragg

I hope I can explain my problem adequately; I'll do my best.

At the moment I have a form on a content management page with inputs for a number of things, such as "Name", "Description", "Image", etc. etc. that submits to a PHP page for database addition as follows:

Anyway, this obviously works fine and without any problems, but here's where my problem comes in. In this form is a section for "Categories", where all of the categories are pulled from the database and the categories that this item will be added to are selected using checkboxes. Now, I need functionality to add a new category to the database on this same page and am using Ajax to do this (kinda like a shoutbox-type thing). This works fine when on a separate page, but when added into the middle of the big form, I suddenly have a form (from the Ajax category addition) within the big form, and everything goes haywire.

Does anyone understand what I'm getting back and have any suggestions as to what I could do? (Ajax without a form? Submit one using javascript?)

Thanks a lot in advance.

Kudose

You can't have a form within a form.

The solution I use is to call a javascript function that creates a form on the fly, populates it, injects it into document.body and then submits itself.

Weedpacket

Don't add an entire form, just the fields (in a <fieldset> element, perhaps).

tycragg

Weedpacket;10923476 wrote:
Don't add an entire form, just the fields (in a <fieldset> element, perhaps).

Hm, sounds encouraging. Could you explain to me how this works? Would I be able to POST from a <fieldset>?

Weedpacket

You could have JavaScript create a <form> element object (using document.createElement()); set its action and method attributes to the target URL and "POST"; create and add <input> element objects (document.createElement() and yourformobject.appendChild()) with all the appropriate name and value attributes (type doesn't really matter - "text" or "hidden" will do); and then call that form object's submit() method.

The thing to notice about that process is that the form is never added to the page. You could if you wanted to - the last child of the <body> element for instance - but it's not like you need to.

CoderDan

You can also just make one form that has the elements of both forms, and when submitted you check which button was clicked (assuming you require a button click to submit the form) and then process only the fields that relate to that button.

johanafm

Or, if you allready have the form and submit a new category via ajax, all you need to do is return success or failure for the db insertion, and on success you create a new checkbox in the form. Or, don't actually do anything over ajax. Just let the user create new checkboxes in the form and assign names to them. Once the form is sent to the server, ajax or ordinary page request, first insert the new options, then insert/update data for what options were actually checked.

fieldset is just a block level element commonly used to group things in forms. In essence it's no different from having divs in a form. So yes, anything found in a fieldset which is in a form will be sent, as post if that's the form's method. Where anything is restricted to things that actually should be sent to begin with (e.g. non disabled inputs).