How can i include add row feature in my PHP form and insert additionally added rows into the database? I havetried using the HTML code for button to insert additional rows but it does not work. Do i need to use javascript?? Please help me This is my HTML code. Row is not added after hitting add button.
<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
var tbl = document.getElementById('table2');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'activityname_' + i;
el.id = 'activityname_' + i;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'unit_' + i;
el2.id = 'unit_' + i;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'weightage_' + i;
el3.id = 'weightage_' + i;
thirdCell.appendChild(el3);
var thirdCell = row.insertCell(3);
var el4 = document.createElement('input');
el4.type = 'text';
el4.name = 'per100_' + i;
el4.id = 'per100_' + i;
fourthCell.appendChild(el4);
var thirdCell = row.insertCell(4);
var el5 = document.createElement('input');
el5.type = 'text';
el5.name = 'per75_' + i;
el5.id = 'per75_' + i;
fifthCell.appendChild(el5);
var thirdCell = row.insertCell(5);
var el6 = document.createElement('input');
el6.type = 'text';
el6.name = 'per50_' + i;
el6.id = 'per50_' + i;
sixthCell.appendChild(el6);
var thirdCell = row.insertCell(6);
var el7 = document.createElement('input');
el7.type = 'text';
el7.name = 'per75_' + i;
el7.id = 'per75_' + i;
seventhCell.appendChild(el7);
// alert(i);
i++;
frm.h.value=i;
// alert(i);
}
</script>
<?php
error_reporting(0);
include ('includes/workplan_func.php');
?>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Workplan Detail Form </title>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/logo.jpg" width="305" height="108" />
</div>
<div id="Box">
<ul>
<li><a href="workplan.php">Workplan Detail</a></li>
<li><a href="workprogress.php">Workplan Progress</a></li>
<li><a href="pbis_form.php">PBIS</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</div>
<div id="rightcol">
<div id="Content" align="center">
<h1 align="center">Workplan Detail Form</h1>
<div id="table1" class="container" align="left">
//<form name="frm" id="frm" action="includes/workplan_func.php" method="post">
<table width="398" height="118" border="0" align="left" >
<td>
<tr>
<td > <p>Division Name:</p> </td>
<td><input name="divisionname" type="text" /></td>
</tr>
<tr>
<td><p>Division Chief: </p></td>
<td>
<input type="text" name="divisionchief" /></td>
</tr>
<tr>
<td><p> Period: </p> </td>
<td>
<input type="text" name="period" /></td>
</tr>
<tr>
<td><p> Month:</p> </td>
<td>
<input type="month" name="month" /> </td>
</tr>
</table>
</td>
</table>
</div>
<div id="table2">
<table border="1" align="center" cellpadding="1" cellspacing="1">
<tr>
<td rowspan="2" align="center"> SN </td>
<td rowspan="2" align="center"> Activity Name </td>
<td rowspan="2" align="center" > Unit </td>
<td rowspan="2" align="center"> Weightage </td>
<td colspan="4" align="center"> Performance Indicators(Percentage)
</td>
<tr>
<td align="center">100 </td>
<td align="center"> 75</td>
<td align="center"> 50 </td>
<td align="center"> <50 </td>
</tr>
<form name="frm" id="frm" action="includes/workplan_func.php" method="post">
<table border="1" align="center" cellpadding="1" cellspacing="1" id="table2">
<tr>
<td width:50px > </td>
<td> <input type="text" name="activityname_0" id="activityname_0" style="width:130px"/> </td>
<td> <input type="text" name="unit_0" id="unit_0" style="width:50px" /> </td>
<td> <input type="text" name="weightage_0" id="weightage_0" style="width:130px" /> </td>
<td> <input type="text" name="per100_0" id="per100_0" style="width:50px" /> </td>
<td> <input type="text" name="per75_0" id="per75_0" style="width:50px" /> </td>
<td> <input type="text" name="per50_0" ="per50_0" style="width:50px" /> </td>
<td> <input type="text" name="perless50_0" id="perless50_0" style="width:50px" /> </td>
</tr>
</table>
</div>
<div id="button">
<div align="center"> <input type="button" value="Add" onclick="addRow();" />
<input name="submit" type="submit" value="Submit" />
</div>
</div>
</div>
<label>
<input name="h" type="hidden" id="h" value="0" />
</label>
</form>
</body>
</html>
