Need Help with Javascript adding form items
I am trying to set up a form where the user can select to enter one or multiple items.. for instance:
One row with the form input items is displayed for say, an item order like so:
<table id="items">
<TR>
<TD ALIGN="CENTER" width="12%"><b>QTY</b></TD>
<TD ALIGN="CENTER" width="15%"><b>UM</b></TD>
<TD ALIGN="CENTER" width="35%"><b>Description</b></TD>
<TD ALIGN="CENTER" width="20%"><b>Part Number</b></TD>
<TD ALIGN="CENTER" width="20%"><b>Cost</b></TD>
</TR>
</table>
<table id="item1">
<tr>
<TD ALIGN="CENTER"><INPUT TYPE="TEXT" NAME="Qty" SIZE="4" /></TD>
<TD ALIGN="CENTER"><SELECT NAME="UM" SIZE="1">
<OPTION VALUE="Each"SELECTED>Each
<OPTION VALUE="Box">Box
<OPTION VALUE="Case">Case
<OPTION VALUE="Dozen">Dozen
</SELECT></td>
<TD ALIGN="CENTER"><INPUT TYPE="TEXT" NAME="Description" size="20" /></TD>
<TD ALIGN="CENTER"><INPUT TYPE="TEXT" NAME="PartNumber" size="10" /></TD>
<TD ALIGN="CENTER"><INPUT TYPE="TEXT" NAME="Cost" size="8" /></TD>
</tr>
</table>
What I would like to do is give the user the option to add more items. That is where I am stuck. I am thinking that the best approach would be to have 20 or so of these pre-built but hidden (display:none), and have the new rows appear under the initial one depending on how many are selected via a selection box or direct input.
I spent waaaay too long yesterday trying to figure this out so I'm hoping someone here can help me.
|