[Duckington]

As an example, take this form:



As there is a dynamic list of possible elements, we want only one save button at the bottom, so you can go down them, change whatever you want and then save them all, rather than saving to have a save button for each one individually.

At the same time, we also want to be able to delete elements. There are other ways it could be done, e.g. tickboxes and then a delete button at the bottom, but the most user friendly way to do this I think is just to have a delete button next to each one (it's using an input type='image').

Now since that would require a form within a form, it doesn't work. (It might do on some browsers, I haven't tested them all, but it doesn't on the one I'm using - the inner forms (delete) work but the overall form no longer does anything when you click the save button.

In this kind of situation, what would you consider the best way around it?


I'd rather avoid having to put anything like that into a javascript function if possible, as I'm trying to make it as easy and simple as possible for other people to maintain at a later date.

I suppose I could make things like that just a link which uses $_GET to process it instead of a post form, but again I'd rather not as it doesn't seem like a very good way to do it.


What would you suggest?


Cheers.

[no2pencil]

I would use jquery (appendTo & remove) to dynamically remove the options, rather than post back to the page & deal with loading.

[Kruithne]

Hello there,

If you are dynamically adding/removing form elements, you are going to have to use Javascript to submit the form (and it is the best way to handle the actual management of dynamic elements too).

Rather than trying to keep the code "manageable" by people who I would imagine are not code friendly, I would look towards building a small CMS for them to manage the content instead, that way you do not have to hold back on the power within your application and can have nicer features!

[Dormilich]

Duckington, on 04 December 2012 - 05:44 PM, said:

Now since that would require a form within a form, it doesn't work. (It might do on some browsers, I haven't tested them all, but it doesn't on the one I'm using - the inner forms (delete) work but the overall form no longer does anything when you click the save button.

Nested form have never worked and will continue to do so. nesting <form> tags is explicitly forbidden by any HTML standard (and luckily browsers adhere to that one uniformely).

[Duckington]

You seem to have misunderstood, this isn't to do with adding more form elements, I am already using javascript for that, I simply meant that there is not a set amount of elements being listed, there could be 2, or there could be 50, so you don't really want to have a save button for reach element to update it, one overall save button for the whole lot makes a lot more sense. However that then leads to the issue of the delete button/form which I explained.

Cheers,

[Dormilich]

but then I don’t understand why you would require nested forms. for deleting a single (set of) form element, you certainly don’t need a form element around it, Java​Script can delete that without it (it only requires a wrapper for a set (e.g. <fieldset>)). a <form> is only required for two types of buttons: submit and reset.

[Duckington]

I am not just deleting it off the screen, it's being deleted from the database.

Forget the word dynamic, clearly it's only confused the issue.


I have one large form with lots of elements in it which can be updated, but at the same time, there also needs to be a delete button for each one. Clearly I can't put a <form></form> for each delete button, as that is within the large form.

Anyway, i've already decided how to do it and moved on. So never mind.

[Dormilich]

I’d use AJAX for deleting a line then.