Adding input fields

[davidannis]

I have a website with a variable number of inputs in various categories. I want to allow the user to add rows to the table with the input lines in every category.  The table looks like this:

<tr><th>Working Capital Changes</th></tr><tr><td><input type="hidden" name="category_code[]" value="WORK"><input type="text" name="description[]" value="Increase (decrease) in working capital" size="60"></td>
        <td><input type="text"  name="amount[1][]" value="" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr>
<tr><td><input type="hidden" name="category_code[]" value="WORK"><input type="text" name="description[]" value="" size="60"></td>
        <td><input type="text"  name="amount[1][]" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr>
<tr><th>Depreciation and Amortization</th></tr><tr><td><input type="hidden" name="category_code[]" value="DEPR"><input type="text" name="description[]" value="Depreciation and Amortization (for taxes)" size="60"></td>
        <td><input type="text"  name="amount[1][]" value="" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr>
<tr><td><input type="hidden" name="category_code[]" value="DEPR"><input type="text" name="description[]" value="" size="60"></td><td><input type="text"  name="amount[1][]" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr>

I tried adding the following near the top of the page:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        var count = 0;
$(function(){
    alert ('wow');
	$('tr#add_field').click(function(){
            alert ('whee');
		count += 1;
		$('#container').append('<table><tr><td><input id="field_' + count + 'type="hidden" name="category_code[]" value="DEPR"><input type="text" name="description[]" value="" size="60"></td><td><input type="text"  name="amount[1][]" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr></table>' );
	});
});

I get the wow alert on page load and whee when I click the link:

<tr id="add_field"><th><a href="#">Click to add another line</a></th></tr>

that I added to the bottom of the table before the </table> but I do not get an additional line

 

I have tried moving the add_field line outside of the table and changing the <tr></tr> to a <p></p> but that does not help. 

[davidannis]

Edit: I have tried it without the <table></table> tags in the string argument to the append function. That was left over from troubleshooting.

[Psycho]

Some examples that may help:

 

http://www.quirksmode.org/dom/domform.html

http://jsfiddle.net/jaredwilli/tZPg4/4/

http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/

[davidannis]

Those examples were very helpful in understanding, but since the input fields are in a table I need to insert not just the fields but a whole row and getting the row outside of the cell that the add a row button was in was proving challenging, so I decided to try a different tactic. I now have something that comes very close to working. The table looks like this:

<table id="INCO"><thead><tr><th>Income</th></tr></thead><tr><td><input type="hidden" name="category_code[]" value="INCO"><input type="text" name="description[]" value="Sales" size="60"></td>
        <td><input type="text"  name="amount[1][]" value="" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr>
<tr><td><input type="hidden" name="category_code[]" value="INCO"><input type="text" name="description[]" value="Interest Income" size="60"></td>
        <td><input type="text"  name="amount[1][]" value="" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr>
<tr><td><input type="hidden" name="category_code[]" value="INCO"><input type="text" name="description[]" value="" size="60"></td>
        <td><input type="text"  name="amount[1][]" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr></tbody></table>
<a href="#" onClick="addRow('INCO');">Add another line</a><br><table id="EXPE"><thead><tr><th>Expense</th></tr></thead><tr><td><input type="hidden" name="category_code[]" value="EXPE"><input type="text" name="description[]" value="Operating Expenses (excluding Depreciation and Amortization)" size="60"></td>
        <td><input type="text"  name="amount[1][]" value="" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr>
<tr><td><input type="hidden" name="category_code[]" value="EXPE"><input type="text" name="description[]" value="Interest expense" size="60"></td>
        <td><input type="text"  name="amount[1][]" value="" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr>
<tr><td><input type="hidden" name="category_code[]" value="EXPE"><input type="text" name="description[]" value="" size="60"></td>
        <td><input type="text"  name="amount[1][]" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr></tbody></table>
<a href="#" onClick="addRow('EXPE');">Add another line</a><br><table id="CAPX"><thead><tr><th>Capital Expenditures</th></tr></thead><tr><td><input type="hidden" name="category_code[]" value="CAPX"><input type="text" name="description[]" value="Capital Expenditure" size="60"></td>
        <td><input type="text"  name="amount[1][]" value="" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr>
<tr><td><input type="hidden" name="category_code[]" value="CAPX"><input type="text" name="description[]" value="" size="60"></td>
        <td><input type="text"  name="amount[1][]" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr></tbody></table>
<a href="#" onClick="addRow('CAPX');">Add another line</a><br><table id="WORK"><thead><tr><th>Working Capital Changes</th></tr></thead><tr><td><input type="hidden" name="category_code[]" value="WORK"><input type="text" name="description[]" value="Increase (decrease) in working capital" size="60"></td>
        <td><input type="text"  name="amount[1][]" value="" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr>
<tr><td><input type="hidden" name="category_code[]" value="WORK"><input type="text" name="description[]" value="" size="60"></td>
        <td><input type="text"  name="amount[1][]" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr></tbody></table>

and the js looks like this

function addRow(tableID) {
  var table = document.getElementById(tableID);

  if (!table) return;

   var newRow = table.rows[1].cloneNode(true);

  // Now get the inputs and modify their names 
  var inputs = newRow.getElementsByTagName('input');

  for (var i=0, iLen=inputs.length; i<iLen; i++) {
    // Update inputs[i]
  }

  // Add the new row to the tBody (required for IE)
  var tBody = table.tBodies[0];
  tBody.insertBefore(newRow, tBody.lastChild);
}  

the problem is that the cloned row contains the value in the description field, so I tried to replace the line that assigns the cloned row to newRow with:

  var newRow = '<tr><td><input type="hidden" name="category_code[]" value="'+tableID+'"><input type="text" name="description[]" value="Sales" size="60"></td><td><input type="text"  name="amount[1][]" value="" onblur="this.value = formatNumber2Comma(this.value);" ></td></tr>';

but when I do that the script appears to do nothing when I click add a row.

[davidannis]

I think I have identified the problems:

  // Now get the inputs and modify their names 
  var inputs = newRow.getElementsByTagName('input');

  for (var i=0, iLen=inputs.length; i<iLen; i++) {
    // Update inputs[i]
  }

do nothing and ought to go. Also, trying to use a string where an object is required.

TypeError: Argument 1 of Node.insertBefore is not an object.
tBody.insertBefore(newRow, tBody.lastChild);

Now just need to figure out how to create a tr object in js

[davidannis]

I think I have it now. For anyone who may want to see my script looks like this:

function addRow(tableID) {
  var table = document.getElementById(tableID);
  
  if (!table) return;

        var row = table.insertRow();
        cell = row.insertCell();
        cell.innerHTML = '<input type="hidden" name="category_code[]" value="'+tableID+'"><input type="text" name="description[]" size="60">' ;
        cell2 = row.insertCell(1);
        cell2.innerHTML = '<input type="text"  name="amount[1][]" value="" onblur="this.value = formatNumber2Comma(this.value);" >' ;  

  // Add the new row to the tBody (required for IE)
  var tBody = table.tBodies[0];
  tBody.insertBefore(row, tBody.lastChild);