Thursday, July 29

Add Rows with Unique Name

A table of input boxes will be put into a database. The user may need to add more to the table.

HTML:
<table id="infotable">
<tr>
<th>Individual Name</th>
<th>Type</th>
<th>Number</th>
<th>Expires</th>
</tr>
<tr>
<td><input type='text' name='info[0][indname]' /></td>
<td><input type='text' name='info[0][type]' /></td>
<td><input type='text' name='info[0][num]' /></td>
<td><input type='text' name='info[0][exp]' /></td>
</tr>
<tr>
<td><input type='text' name='info[1][indname]' /></td>
<td><input type='text' name='info[1][type]' /></td>
<td><input type='text' name='info[1][num]' /></td>
<td><input type='text' name='info[1][exp]' /></td>
</tr>
</table>
JQuery:
$('#addinfo').click(function(){
var getcount = $('input[name^="info"]:last').attr('name');
var ncount = parseInt(getcount.substring(4,getcount.length-6))+1;
$("#infotable > tbody").append("<tr><td><input type='text' name='info["+ncount+"][indname]' size='28' /></td><td><input type='text' name='info["+ncount+"][type]' </td><td><input type='text' name='info["+ncount+"][num]' /></td><td><input type='text' name='info["+ncount+"][exp]' class='datepicker' /></td></tr>");
});
The added tr has to be all on one like because javascript doesn't like like breaks.