jQuery clone() FireFox bug - can't submit a cloned form

Question

I want to add/remove dynamically forms. I'm using forms that are stored in a table, each row has form. I have 2 tables: - the one being displayed - the one surrounded by with the temporary row that I want to clone and insert into the displayed table.

Everything works fine in IE but the cloned row with its form in Firefox can't be submitted. If i don't clone the row but just insert it, I can submit the form but I need to be able to reuse that row to insert it again so I need to use cloning. Html code generated with and without cloning looks the same in Firebug. How can I overcome this problem?

Code used for cloning and inserting row: $('#tempRow').clone().insertAfter($('#templatesTable tr:last'));

Answer 1

You can't reliably clone something with an ID attribute and re-insert it into the DOM. This creates an invalid HTML document, because you have two elements with the same ID. Firefox is behaving properly.

What you'll need to do is clone the form and then change ALL ID's to something unique (the form and all of its inputs and child elements). Then you'll be able to submit the form.

It looks like you are cloning a tr element and inserting it into a table? If the tr element is the only one with an ID, this will work:

$('#tempRow')
    .clone()
    .attr('id', 'tempRow-new')
    .insertAfter($('#templatesTable tr:last'));

Remember, though, that if the form element–or any of it's children, including div, frameset, input, etc.–has an ID, you'll need to either remove that id, or change it. Otherwise you'll still have an invalid document, and may still have problems.

Additionally

The above code snippet is not reusable. As soon as you try to clone the form a second time, you'll have two elements with the id tempRow-new. If you need to clone the row multiple times, you'll have to add some incrementing number or a UUID of some sort to ensure that all cloned elements are unique.