inserting form with insertRow

[buck1107]

Hi,
I'm working on an insertRow script to add a new table row at the click of the button. The row is now being added successfully, but I'm trying to get the entire new row enclosed in a form. I've managed to get individual forms in each cell, but I need to the single form for each row.
Is it possible to somehow add the form before the new row?

Here's my code - thanks for any help.

function addRowToTable()
{
 var tbl = document.getElementById('tblSample').tBodies[0];
 var row = tbl.insertRow(-1); 

// goal number cell
var newCell0 = row.insertCell(0);
txtNumber = "<b><%=strGoalNum%></b>";
newCell0.innerHTML = txtNumber;
newCell0.style.backgroundColor="#999999";
newCell0.style.verticalAlign = "top";

//goal
var newCell1 = row.insertCell(1);
txtGoal = "<form action='strategic_plan_c.asp?GoalIDFromPage=<%=strGoalIDFromPage%>' method='post' name='SP_Input' id='SP_Input' onSubmit='return checkAnswers1()'>";
txtGoal += "<%'strGoalPrefix="E.S1." %>";
txtGoal += "<%strGoalPrefix=strGoalCategory%>";
txtGoal += "<%strGoalDot="."%>";
txtGoal += "<strong>";
txtGoal += "<%response.write(strGoalPrefix)%>"; 
txtGoal +="<%Set objRS = Server.CreateObject("ADODB.Recordset")%>";
txtGoal +="<%objRS.Open "SELECT GoalNum FROM AMS_StrategicPlanGoal WHERE left(GoalNum,5) = 'E.S1.';", objConnection, 2, 2 %>";
txtGoal +="<%If Not objRS.EOF Then%>";
txtGoal +="<%aTable1Values = objRS.GetRows()%>";
txtGoal +="<%objRS.Close%>";
txtGoal +="<%set objRS=nothing%>";
txtGoal += "<input type='hidden' name='strGoalCategory' id='strGoalCategory' value='<%=strGoalCategory%>'>";
txtGoal += "<select name='strGoalNum_goal_line' id='strGoalNum_goal_line' onchange=goal_change1(this)>";

//action
var newCell2 = row.insertCell(2);
txtAction += "<input name='strGoalCategory2' type='hidden' value='E.S2.'>";
txtAction += "<input name='strGoalCount' type='hidden' value='<%=strGoalCount%>'>";
txtAction += "<input type='submit' name='frmSaveLine' value='Save Line'>";
txtAction += "<br>";
txtAction += "Note: This action will save all records in this goal.";
txtAction += "</form>";
newCell2.innerHTML = txtAction;
newCell2.style.verticalAlign = "top";
}

[Fotiman]

As you're probably discovered, the following markup would be invalid:

<table>
 <tr>
  <form>
   <td>...</td>
   <td>...</td>
   <td>...</td>
  </form>
 </tr>
</table>
<table>
 <form>
  <tr>
   <td>...</td>
   <td>...</td>
   <td>...</td>
  </tr>
 </form>
</table>

You might be able to do something like this:

<table>
 <tr>
  <td>
   <form>
    <table>
     <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
     </tr>
    </table>
   </form>
  </td>
 </tr>
</table>

That has it's own drawbacks. For example, you probably want all of the columns of each nested subtable to line up, but because they're all individual tables in this example, it becomes much harder to enforce.

An alternative might be to wrap your table in a form, and then give each row's form elements a unique id prefix that gets passed along with whichever submit button is pressed. For example:

<form>
 <table>
  <tr>
   <td>...</td>
   <td><input name="rowId1_strGoalCategory" ...></td>
   <td><input type="submit" name="frmSaveLine_rowId1" ...></td>
  </tr>
  <tr>
   <td>...</td>
   <td><input name="rowId2_strGoalCategory" ...></td>
   <td><input type="submit" name="frmSaveLine_rowId2" ...></td>
  </tr>
 </table>
</form>

The downside here is that you are then submitting ALL of the inputs to the form (bandwidth), and you'll need to add some server side logic to determine which ones are the ones to use by looking for frmSaveLine_* and then parsing the end part of that (ie - "rowId2"), and then using that to examine the form elements begining with "rowId2_".

You'd think there'd be an easier way though.

[buck1107]

Thanks for your input and help!
Each row in the table will be from a loop through the database table. I was wondering if wrapping the <tr>...</tr> in a form is valid markup? I did it in the 'static' (non javascript) version of this same table, and it worked fine across browsers.
The challenge is what to use to put the form tags in there? I'm using addRow and addColumn, but I'm not sure how to add something that will occur just before the table tag.
Thanks again for any leads.

<table>

<form>
<tr>
<td>

[Fotiman]

I was wondering if wrapping the <tr>...</tr> in a form is valid markup?

No, it is not because the DTD defines the TABLE element as:

<!ELEMENT TABLE - -
   (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

[w3.org...]

The TBODY has optional start and end tags, which means it's implicitly included around your rows if you don't explicitly include it. The the DTD defines the TBODY element as:

<!ELEMENT TBODY  O O (TR)+      -- table body -->

[w3.org...]

The TBODY can only have TR children, therefore, you can't (validly) have a form element wrapping a the TR. It may still work in browsers, but it's technically not valid.

Likewise, the DTD defines the TR element as:

<!ELEMENT TR    - O (TH|TD)+    -- table row -->

[w3.org...]

So it can only have TH or TD children.

If you still want to go ahead and generate invalid markup with the hopes that future browsers will continue to support it, then I don't think you'll be able to use the insertRow and insertCell methods, but will instead need to create DOM elements. As in:

var f = document.createElement('form');
var tr = document.createElement('tr');
var td = document.createElement('td');
f.appendChild(tr);
tr.appendChild(td);