<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<p>
<input type="button" value="Add Passenger" onClick="addRow('dataTable')" />
<input type="button" value="Remove Passenger" onClick="deleteRow('dataTable')" />
<p>(All acions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="dataTable" class="form" border="1">
<tbody>
<tr>
<p>
<td >
<input type="checkbox" name="chk[]" checked="checked" />
</td>
<td>
<label>Name</label>
<input type="text" name="BX_NAME[]">
</td>
<td>
<label for="BX_age">Age</label>
<input type="text" class="small" name="BX_age[]">
</td>
<td>
<label for="BX_gender">Gender</label>
<select id="BX_gender" name="BX_gender">
<option>....</option>
<option>Male</option>
<option>Female</option>
</select>
</td>
<td>
<label for="BX_birth">Berth Pre</label>
<select id="BX_birth" name="BX_birth">
<option>....</option>
<option>Window</option>
<option>No Choice</option>
</select>
</td>
*Note: I can't seem to get the 'Remove passengers' to work.help!*
*http://techstream.org/Web-Development/PHP/Dynamic-Form-Processing-with-PHP*
</p>
</tr>
</tbody>
</table>
</div>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 5){ // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i <colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("Maximum Passenger per ticket is 5");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all the Passenger.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
