adding new rows in table using ajax - php

Question

i'm trying to get next rows in my multiple table using ajax and php. my concept is that on changing my year and type selection, table has to re_appears.
if i change type as year third table hides and if semester third table appears. it works fine,. but if i change no of year table rows also have to added according to that.
for example if no of years 4 means then i have to get fou rows in each table.
i dono where i struck here?
my code:
<table>
<tr><td><label><span class="required">*</span>No of Year</label></td>
<td>
<select name="no_of_year" id="no_no_year" onchange="change_row()">
<option value="">--Year--</option>
<?php for($i=1;$i<=$year;$i++) { ?>
<option value="<?php echo $i; ?>" <?php if($_POST['no_of_year']==$i) { echo "selected"; } ?>><?php echo $i; ?></option>
<?php } ?>
</select> <span class="required"><?php echo $msg_year;?></span>
</td>
</tr>
<tr> <td><label><span class="required">*</span>Type</label> </td>
<td><select name="type" onchange="change_col(this.value);"><option value="">--Type--</option> <option value="2" <?php if($_POST['type']=='2') { echo "selected"; } ?>>Semester</option> <option value="1" <?php if($_POST['type']== '1') { echo "selected"; } ?>> Year </option> </select>
<span class="required"><?php echo $msg_type;?></span></td></tr>
<tr> <td><label><span class="required">*</span>Fees Per Year/Semester:</label> </td> </tr>
<tr>
<table class="fees_dets" border="1px solid" cellpadding="1" cellspacing="1">
<tr>
<td>
<table id="year_tab" cellpadding="1" cellspacing="1">
<tr style="height:37px;"> <th > Year </th> </tr>
<tr> <td align="center"> <input type="text" name="year1" value="1" /> </td> </tr>
</table>
</td>
<td>
<table id="sem1_tab" cellpadding="1" cellspacing="1">
<tr> <th colspan="2"> Semester-1 </th> </tr>
<tr> <th> Due date</th> <th > Fees</th> </tr>
<tr> <td > <input type="text" name="y1_fees1" /> </td><td> <input type="text" name="y1_due1" /> </td> </tr>
</table>
</td>
<td id="donshow">
<table id="sem2_tab" cellpadding="1" cellspacing="1">
<tr> <th colspan="2" > Semester-2</th> </tr>
<tr> <th> Due date</th> <th > Fees</th> </tr>
<tr> <td > <input type="text" name="y1_fees2" /> </td><td > <input type="text" name="y1_due2" /> </td> </tr>
</table>
</td>
</tr>
</table>
</tr>
</table>
script:
<script type="text/javascript">
function change_col(type)
{
if(type == 1 ) {
document.getElementById("donshow").style.display = 'none';
}
else if(type == 2 ) {
document.getElementById("donshow").style.display = 'block';
}
}
function change_row(year)
{
$.ajax({
type: 'POST',
url: 'ajax_redirect.php',
data:{
type : 'year_tab',
year : year
},
success: function(msg){
//alert(msg);
document.getElementByClassName('fees_dets').innerHTML = msg;
}
});
}
</script>
ajax_redirect.php
<?
$n= $_POST['year'];
if($_POST['type'] == 'year_tab')
{
for($i=2;$i<=$n;$i++)
{
?>
<table class="fees_dets" border="1px solid" cellpadding="1" cellspacing="1">
<tr>
<td>
<table id="year_tab" cellpadding="1" cellspacing="1">
<tr style="height:37px;"> <th > Year </th> </tr>
<tr> <td align="center"> <input type="text" name="year<?=$i?>" value="<?=$i?>" /> </td> </tr>
</table>
</td>
<td>
<table id="sem1_tab" cellpadding="1" cellspacing="1">
<tr> <th colspan="2"> Semester-1 </th> </tr>
<tr> <th> Due date</th> <th > Fees</th> </tr>
<tr> <td > <input type="text" name="y<?=$i?>_fees1" /> </td><td> <input type="text" name="y<?=$i?>_due1" /> </td> </tr>
</table>
</td>
<td id="donshow">
<table id="sem2_tab" cellpadding="1" cellspacing="1">
<tr> <th colspan="2" > Semester-2</th> </tr>
<tr> <th> Due date</th> <th > Fees</th> </tr>
<tr> <td > <input type="text" name="y<?=$i?>_fees2" /> </td><td > <input type="text" name="y<?=$i?>_due2" /> </td> </tr>
</table>
</td>
</tr>
</table>
<? }
}
?>
can anyone help?

Answer 1

You need to hit the ajax_redirect.php every time you change the 'no. of years', your ajax_redirect.php must execute the select query to associated table with changing where clause. Whatever HTML element you are using, must be replaced with new value(s) accordingly.
NOTE: Here I assume you are fetching data from DB thats why I have
asked you to use select query on asssociated table with changing where
clause.
UPDATE: Your Problem is with document.getElementByClassName('fees_dets') because there no such function as getElementByClassName... you should your table in a DIV with a attribute ID and use getElementById