how can I fetch dynamic rows (drop down's database values) using ajax?

**helalreza** · May 17 '16, 04:57 AM

My javaScript.

Code:

<script language="javascript" type="text/javascript">
var i=0;
function addRow(table1)
{
i++;
frm.reza.value=i;

var tbl = document.getElementById('table1');
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 = 'title' + i;
el.id = 'title' + i;
el.size = 20;
el.maxlength = 20;
firstCell.appendChild(el);

var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'time';
el2.name = 'start_time' + i;
el2.id = 'start_time' + i;
el2.size = 20;
el2.maxlength = 20;
secondCell.appendChild(el2);

var thirdCell = row.insertCell(2);
var el3 = document.createElement('input');
el3.type = 'time';
el3.name = 'end_time' + i;
el3.id = 'end_time' + i;
el3.size = 20;
el3.maxlength = 20;
thirdCell.appendChild(el3);

var forthCell = row.insertCell(3);
var el4 = document.createElement("select");
el4.name ='program_name'+i;
el4.id = 'program_name' + i;
var option = document.createElement("option");
option.value='';
option.innerHTML='';
el4.appendChild(option);
forthCell.appendChild(el4);
 
var fifthCell = row.insertCell(4);
var el5 = document.createElement("select");
el5.name ='peak_offpeak'+i;
var option1 = document.createElement("option");
option1.value='';
option1.innerHTML='';
el5.appendChild(option1);
  
var option2 = document.createElement("option");
option1.value='peak';
option1.innerHTML='peak';
el5.appendChild(option1);
 								
var option3 = document.createElement("option");
option2.value='off_peak';
option2.innerHTML='off_peak';              
el5.appendChild(option2);
fifthCell.appendChild(el5);

var sixthCell = row.insertCell(5);
var el6 = document.createElement("select");
el6.name ='sub_brand_name'+i;
el6.id = 'sub_brand_name' + i;
var option = document.createElement("option");
option.value='';
option.innerHTML='txt';
el6.appendChild(option);
sixthCell.appendChild(el6);


								
var seventhCell = row.insertCell(6);
var el7 = document.createElement('input');
el7.type = 'text';
el7.name = 'sponsor' + i;
el7.id = 'sponsor' + i;
el7.size = 20;
el7.maxlength = 20;
seventhCell.appendChild(el7);	

var eighthCell = row.insertCell(7);
var el8 = document.createElement("select");
el8.name ='product_name'+i;
el8.id = 'product_name' + i;
var option = document.createElement("option");
option.value='';
option.innerHTML='+i+';
el8.appendChild(option);
eighthCell.appendChild(el8);
	
}
</script>

My HTML and PHP code.

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title></head>

<body>
<header><ul><tr><li><a href="https://bytes.com/submit/mediasourcebd_reza/home.php">Home</a></li></tr></ul></header>
<form action="action_entry_history.php" method="post" name="frm" id="frm">
<table width="100%" border="0"  id="table1" class="table">
<tr align="justify">
<td><strong>Title</strong></td>
<td><strong>Start Time</strong> </td>
<td><strong>End Time</strong> </td>
<td><strong>Program</strong> </td>
<td><strong>Peak Off-Peak</strong> </td>
<td><strong>Sub-Brand</strong> </td>
<td><strong>Sponsor</strong> </td>
<td><strong>Product</strong> </td>
</tr>
<tr>
<td><input name="title" type="text" id="title" size="20" maxlength="20" /></td>
<td><input name="start_time" type="time" id="start_time" size="20" maxlength="20" /></td>
<td><input name="end_time" type="time" id="end_time" size="20" maxlength="20" /></td>
<td><?php 
						$sql ="SELECT program_name FROM program";
						$result = mysql_query($sql);
						echo "<select name='program_name' id='ss' class='s' >";
						while ($row = mysql_fetch_array($result)) {
    					echo "<option value='" .$row['program_name'] ."'>" .$row['program_name'] ."</option>";
						}
						echo "</select>";		
						?></td>
<td><select name="peak_offpeak"><option value="peak">peak</option><option value="off_peak">off_peak</option></select></td>
<td><?php 
						$sql = "SELECT sub_brand_name FROM sub_brand";
						$result = mysql_query($sql);
						echo "<select name='sub_brand_name' >";
						while ($row = mysql_fetch_array($result)) {
    					echo "<option value='" . $row['sub_brand_name'] ."'>".$row['sub_brand_name']."</option>";
						}
						echo "</select>";		
						?></td>

<td><input name="sponsor" type="text" id="sponsor" size="20" maxlength="20" /></td>
<td><?php 
						$sql = "SELECT product_name FROM product";
						$result = mysql_query($sql);
						echo "<select name='product_name' >";
						while ($row = mysql_fetch_array($result)) {
    					echo "<option value='".$row['product_name'] ."'>".$row['product_name']."</option>";
						}
						echo "</select>";		
						?></td>
			
</tr>

</table>
<input type="button" value="Add Rows" onclick="addRow();" />
<input name="Save" type="submit" value="Save Rows" />
<input type="hidden" name="reza" id="reza" value="0" />
</form>