add new row to table with 2 drop down list- how do i change the name of the select

Question

I would really appreciate if someone could help me. for two days I've tried to figure this out alone but its not working.

I'm writing a shopping list to my project at school. I have a table (shopinglist) that contains the form.

In the form I have 2 drop down lisst, one (product) is getting the values from my database and the second one (quantity) is constant numners. Next to these two I have 2 buttons add and remove.

When pressing add I want to add a new row with the same stuff.

The problem is that I can't (or maybe don't know how to) change the select name according to the row number. I mean like

One last thing- the row will be added only if the user choose from both selection, not only from one.

here is my code: the javascript add and remove functions:

 function addRow(tableID) {

if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value!="zero") 
{
            var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

            var colCount = table.rows[0].cells.length;

            for(var i=0; i<=colCount; i++) {
             var newcell = row.insertCell(i);
                 newcell.innerHTML = table.rows[1].cells[i].innerHTML;
              switch(newcell.childNodes[1].type) {
                case "text":
                        newcell.childNodes[1].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[1].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[1].selectedIndex = 0;
                        break;

                }
            }
              newcell.childNodes[1].visible = true;
              table.rows[rowCount-1].cells[2].style.visibility="hidden" ;
            }
            else
          {
            if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value=="zero") 

                 alert("please choose quantity") ;
               if (document.getElementById("product").value=="dafult" && document.getElementById("quantity").value!="zero") 
                alert("please choose product") ; 
               if (document.getElementById("product").value=="dafult" && document.getElementById("quantity").value=="zero") 
                    alert("please choose product and qantity") ;
           }
            }

        function deleteRow(i){
        if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value!="zero") 
            document.getElementById('shopinglist').deleteRow(i)
        else
            alert("you can't delete row before adding it");
}

---

and the HTML and ASP

<table border="0" id="shopinglist">
<caption valign="top" style="width:90%;height:35px; color:green ;"/> your order 
<tr><td></td><td> product</td> <td> quantity</td></tr>
<tr>
<form name="juices">
    <%      
    set rs=Server.CreateObject("ADODB.recordset")
    rs.open "SELECT ID, [Product-Name] ,[size-liter],[Customer price] FROM Product GROUP BY  ID,[Product-Name] ,[Product].[size-liter],[Product].[Customer price] ", conn
    %>
<td>
<select name="product" id="product" width="10" >
<option value="dafult" selected>בחר מוצר מהרשימה</option>
<%
do while not rs.EOF %>
<option value=<%=rs("Product-Name")%> > juice<%=rs("Product-Name")%>   <%=rs("size-liter")%>  liter<%=rs("Customer price")%>  $</option>
<%
rs.MoveNext()
loop
rs.close %> 
</select>
</td>
<td>
<select name="quantity" id="quantity">
<option value="zero" selected="selected">0</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
<option value="six">6</option>
<option value="seven">7</option>
<option value="eight">8</option>
<option value="nine">9</option>
<option value="ten">10</option>
</select>
</td>
<td>
<input type="button" value="add" onclick="addRow('shopinglist')" id="addbutton"/>
</td>
<td>
    <input type="button" value="delete"onclick="deleteRow(this.parentNode.parentNode.rowIndex)" id="remove"/>
</td>
</tr>
         </form>

Answer 1

IE will not let you change the name of an element after you add it to the page. The way this is written, you would have to actually alter the string containing the select before setting innerHTML

newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(/(\<select.+?name=".+?)"/, $1 + rowCount + i + "\"");

NOT TESTED... something like that...

Answer 2

Here is an example https://gist.github.com/957827 that you could start with. It is radically different but simpler than yours.

I don't have a IE6,7,8 to test it properly but it should be something like the example.

One more comment, id's must be unique. And you shouldn't use them on a row of a table that you will copy.