Problem with Javascript and form duplication

Question

Hello. I have a HTML code that goes something like this:

< tr id="500" >
 < form id="500" onsubmit="DoThis()">
  < td>Info< /td>
    etc...
    etc...
  < td>Info< /td>
 < /form> 
< /tr>

What i am trying to do in Javascript is to make a copy of the element and add it to parent table:

var TrElement = document.getElementById("500")

var parent    = TrElement.parent;
var NewTr     = TrElement.cloneNode(true);
    parent.appendChild(NewTr);

This code makes a new copy that lies perfectly as a on the table. The problem is that i can't submit anything because the new element has closed its form: It looks like this now:

< tr id="500">
 < form id="500" onsubmit="DoThis()" />   <----- end tag on the form :/
  < td>Info< /td>
    etc...
    etc...
  < td>Info< /td>
< /tr>

Does anybody know how i can force the form not to close, or have another solution to this problem?

Thanks...

Answer 1

I think you're having problems because your HTML is not valid. A form cannot be a child element of a table row, it needs to be inside a table element. Also, you can't give the same id value to both the row and the form itself. All element ids must be unique and start with a letter.

Since I'm not sure exactly what you're trying to do, it's hard to know what to suggest to solve it. You might try doing a new layout without using tables -- unless you have tabular data, this is probably the way to go. Otherwise, you could try nesting your form inside a table element and then have a table inside this form that actually contains your columnar data, though you'll probably have to fix the column widths for this to look like a single table of data.

As far as the id collisions goes, you might want to prepend a string like "row_" or "form_" to the id to differentiate them.

If you could provide more information on what you are trying to accomplish I may be able to improve this answer.

Answer 2

What i am supposed to do: i have a lots of rows in my table. these rows contains information about an item. say like this: < td>< input type="text" id="item_ ">
< input type="text" id="date_
< input type="submit" value="submit"/>

While the user blurs out of the "datefield", a Javascript will check if there are any items with the same date that exists in the database. (Not all data is represented in the rows, some is still in the database)

if an item with same date already exists, i want to copy an element and change its childelements' properties and values to the item we found already existing.

the new row should also be able to submit edited data.

But since the < form> closes itself, i can't submit any data.

Difficult to explain, but i hope you understand

Answer 3

Quite a few problems here.

<tr id="500">
    <form id="500" onsubmit="DoThis()">

You can't have an ‘id’ beginning with a number. You can't have two identical ‘id’ values in the same document. You can't have <form> directly inside a <tr>, which is what's causing the problem here. For me, even the first form doesn't work.

var TrElement = document.getElementById("500")

Which one?

var parent    = TrElement.parent;

Should be parentNode.

var NewTr     = TrElement.cloneNode(true);
parent.appendChild(NewTr);

You now have another two elements with id="500"! You should change the IDs of cloned elements before appending them to the document.

There are a few approaches you can take here. If all the form fields are in a single cell, you can just put the form inside the cell. If, however, you need fields across multiple cells then the form has to go outside the table.

In that case you could either have a single form outside the entire table, or one form pre row, each containing a separate <table>. You can make all the tables' columns line up by using specified-width columns and the CSS rule “table-layout: fixed”.

(Do you even need a form at all? There may be code missing in your example, but as it is you're not even using the form to submit to anywhere. If your page is supposed to be purely javascript, you can completely omit the form and just put onclick events on buttons.)

Assuming you do need multiple forms, here's some example code:

<div>
    <form method="post" action="setThing.script" class="setform" id="setform-500">
        <table><tr>
            <td>Info</td>
            <td><input type="text" name="setting" value="" /></td>
            <td><input type="submit" value="Set" /></td>
        </tr></table>
     </form> 
</div>
<button id="addrow">Another one, please!</button>

<script type="text/javascript">
    function doThing() {
        alert('validating form or something');
        return false;
    }

    var rownum= 500;
    document.getElementById('setform-'+rownum).onsubmit= doThing;

    document.getElementById('addrow').onclick= function() {
        var f500= document.getElementById('setform-'+rownum);
        var fnew= f500.cloneNode(true);
        rownum++;
        fnew.id= 'setform-'+rownum;
        fnew.onsubmit= doThing;
        f500.parentNode.appendChild(fnew);
    }
</script>