dynamic row with text box

[tokcy]

Hi,

I have created dynamic row with text box i.e. initialy i have only one text box and add button when i clicked on add button it create another text box. and i want to append the values of dynamic text box in hidden field but its not working properly
when i am appending the values of text box it appends again and again same value mean suppose in 1st text box the value is 1 and in second the value is 2 and so on... then when i am trying to append the values in hidden field it store like this 1,1,2,1,2,3 and so on.. and i want to append only last three value if i have three text box.like 1,2,3...

<script language="Javascript" type="text/javascript">
     function addRow()
     {
          var tbl = document.getElementById('mySampleTable');
          var lastRow = tbl.rows.length;
          var iteration = lastRow;
          var row = tbl.insertRow(lastRow);
          var cellLeft = row.insertCell(0);
          var textNode = document.createTextNode(iteration);
          cellLeft.appendChild(textNode);
          var cellRight = row.insertCell(1);
          var el = document.createElement('input');
          el.type = 'text';
          el.name = 'txtRow' + iteration;
          el.id = 'txtRow' + iteration;
          //alert(el.id);
          el.size = 40;
          cellRight.appendChild(el);
          test(lastRow);
          var cellRightSel = row.insertCell(2);
          var sel = document.createElement('select');
          sel.name = 'selRow' + iteration;
          sel.options[0] = new Option('0', '0');
          sel.options[1] = new Option('1', '1');
          sel.options[2] = new Option('2', '2');
           sel.options[3] = new Option('3', '3');
            sel.options[4] = new Option('4', '4');
             sel.options[5] = new Option('5', '5');
          cellRightSel.appendChild(sel);
 
 
     }
 
     function removeRow()
     {
          var tbl = document.getElementById('mySampleTable');
          var lastRow = tbl.rows.length;
          if (lastRow > 2) tbl.deleteRow(lastRow - 1);
     }
 
function test(lastRow)
{
 for(var i=1;i<lastRow;i++)
  {
        var tname= String('txtRow' + i);
        document.getElementById('item').value=document.getElementById('item').value + ',' + document.getElementById(tname).value;
  }
  document.getElementById('item').value='';
}
 
</script>
 
<tr>
                                        <td>
                                             1
                                        </td>
                                        <td>
                                             <input type="text" name="txtRow1" id="txtRow1" size="40" /><input type="text" name="item" id="item" size="40" /></td>
                                        <td>
                                             <select name="selRow" id="selRow">
                                                  <option value="0">0</option>
                                                  <option value="1">1</option>
                                                  <option value="2">2</option>
                                                  <option value="3">3</option>
                                                  <option value="4">4</option>
                                                  <option value="5">5</option>
                                             </select>
                                        </td>
                                   </tr>
 

[acoder]

Rather than appending values to the item field, reset it to the new values, but not in the loop. Create a new variable to store the values and set the item field value to that variable value outside the loop.

[tokcy]

i have done this and its working fine but there is a problem with removing the value on click of remove button from text field i dont have any idea about this could you please to help me out!

[acoder]

If you run test() again when you remove a row, it should work as long as you pass the correct lastrow number.