PHP/Javascript: Dynamic add row from table

[red_ruewei]

Hi,
I try to search related title but can't find any match.
Here my case. I'm planning to allow user to insert record. If user put 3, mean 3 row of table will expand. Each row have textfield, select menu. Can refer to attachment. I'm using javascript to do that.

But i'm having problem on select menu becoz data from select is populated from database. This 3 select menu is related which is country, state and city. If country Malaysia is selected, then state of Malaysia is display on second select and so on for city.

Can anyone suggest how to do it cause i think there is no way use php code to call record for country,state and city from database using javascript.

thanks in advance.

here code for add row (javascript)

function AddTableLot()
{
  var tbl = document.getElementById('tbl_lot');
  var count_lot = document.form1.count_lot.value;
  var lastRow = tbl.rows.length;

  for (var j=tbl.tBodies[0].rows.length-1; j>=1; j--)
   {
    tbl.tBodies[0].deleteRow(j);
  }
 

  for(var i=1;i<=count_lot;i++)
  {
  
	  var lastRow = tbl.rows.length;
	  var row = tbl.insertRow(lastRow);
  
  		//bil
	  var cellLeft = row.insertCell(0);
	  var textNode = document.createTextNode(i);
	  cellLeft.appendChild(textNode);
	  
		//lot no
	  var cellLot_no = row.insertCell(1);
	  var el_lot_no = document.createElement('input');
	  el_lot_no.type = 'text';
	  el_lot_no.name = 'lot_no' + i;
	  el_lot_no.id = 'lot_no' + i;
	  el_lot_no.size = 20;
	  cellLot_no.appendChild(el_lot_no);
	  
		//negeri
	  var cellNegeri = row.insertCell(2);
	  var el_negeri = document.createElement('select');
	  el_negeri.name = 'negeri' + i;
	  el_negeri.id = 'negeri' + i;
	  el_negeri.options[0] = new Option('--Pilih Negeri--', ' ');
	  cellNegeri.appendChild(el_negeri);
	
		//daerah
	  var cellDaerah = row.insertCell(3);
	  var el_daerah = document.createElement('select');
	  el_daerah.name = 'daerah' + i;
	  el_daerah.id = 'daerah' + i;
	  el_daerah.options[0] = new Option('--Pilih Daerah--', ' ');
	  cellDaerah.appendChild(el_daerah);		  

		//mukim_bandar
	  var cellMukimBandar = row.insertCell(4);
	  var el_mukim_bandar = document.createElement('select');
	  el_mukim_bandar.name = 'daerah' + i;
	  el_mukim_bandar.id = 'daerah' + i;
	  el_mukim_bandar.options[0] = new Option('--Pilih Mukim/Bandar--', ' ');
	  cellMukimBandar.appendChild(el_mukim_bandar);		 
		  
	  //luas n kod luas
	  var cellLuas = row.insertCell(5);
	  var el_luas = document.createElement('input');
	  el_luas.type = 'text';
	  el_luas.name = 'luas_tanah' + i;
	  el_luas.id = 'luas_tanah' + i;
	  el_luas.size = 3;
	  
	  var el_k_luas = document.createElement('select');
	  el_k_luas.name = 'kod_luas_tanah' + i;
	  el_k_luas.id = 'kod_luas_tanah' + i;
	  el_k_luas.options[0] = new Option('--Pilih Luas--', ' ');
	  el_k_luas.options[1] = new Option('Depa', '1');
	  el_k_luas.options[2] = new Option('Ekar(Acre)', '2');
	  el_k_luas.options[3] = new Option('Hektar(Hectar)', '3');
	  el_k_luas.options[4] = new Option('Jemba', '4');
	  el_k_luas.options[5] = new Option('Kaki Persegi(Square Feet)', '5');
	  el_k_luas.options[6] = new Option('Meter Persegi(Square Meter)', '6');
	  el_k_luas.options[7] = new Option('Pole', '7');
	  el_k_luas.options[8] = new Option('Relong', '8');
	  el_k_luas.options[9] = new Option('Rood', '9');                
	  cellLuas.appendChild(el_luas);
	  cellLuas.appendChild(el_k_luas);
	   
	  //nilaian jabatan
	  var cellnilaian_jabatan = row.insertCell(6);
	  var el_nilaian_jabatan = document.createElement('input');
	  el_nilaian_jabatan.type = 'text';
	  el_nilaian_jabatan.name = 'nilaian_jabatan' + i;
	  el_nilaian_jabatan.id = 'nilaian_jabatan' + i;
	  el_nilaian_jabatan.size = 20;
	  cellnilaian_jabatan.appendChild(el_nilaian_jabatan); 
	  
	  //analisa
	  var cellAnalisa = row.insertCell(7);
	  var el_Analisa = document.createElement('textarea');
	  el_Analisa.name = 'analisa' + i;
	  el_Analisa.id = 'analisa' + i;
	  el_Analisa.cols = 20;
	  el_Analisa.rows = 3;  
	  cellAnalisa.appendChild(el_Analisa);	   
	 
  }
}

[metalix]

Hi there, Do you have experience with AJAX?
You can have the select menu refresh from the ajax file.

and the ajax file will use a while loop to select all the rows from the database based on the supplied input

input might be:
"ajax.php?map_from="+map_from+"&map_to="+map_to+"&content_from="+content;
where
-map_from can be country
-map_to can be state
-content can be malaysia

if you get what i mean

[red_ruewei]

Hi there, Do you have experience with AJAX?
You can have the select menu refresh from the ajax file.

and the ajax file will use a while loop to select all the rows from the database based on the supplied input

input might be:
"ajax.php?map_from="+map_from+"&map_to="+map_to+"&content_from="+content;
where
-map_from can be country
-map_to can be state
-content can be malaysia

if you get what i mean

thanks for the reply. I didnt have any experience with ajax. So u mean, ajax can handle this problem?...

I try to google about ajax

[metalix]

Try going to w3schools.com,
I will possibly have some ajax video tutorials on metalix.co.nz later next week
(just need to do javascript, then ajax!)
What ajax is is a javascript method of just refreshing part of a page.
e.g:
<div id="content">content here</div> just this div will change

If you like video tutorials pm me and I'll make one