detail without ajax

<?php
/*********************************
FILENAME   : detail.php
CREATE BY  : CAHYA DSN
CREATE DATE: 2013-09-23
NOTES      : native javascript, client side only
**********************************
USE test;

DROP TABLE IF EXISTS `tbl_test`;
CREATE TABLE IF NOT EXISTS `tbl_test` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `nama` VARCHAR(25)NOT NULL,
  `alamat` VARCHAR(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

INSERT INTO tbl_test(`id`,`nama`,`alamat`)
VALUES
(1,'Adam','Hogwart'),
(2,'Budi','Black Lake'),
(3,'Carlie','Forbidden Forest'),
(4,'Dona','Diagon Alley');
**********************************
//--- DATABASE CONFIGURATION
$dbhost='localhost';
$dbuser='root';
$dbpass='';
$dbname='test';
//--- DATABASE CONNNECTION (MYSQLI)
$db=new mysqli ($dbhost,$dbuser,$dbpass,$dbname);
$sql="SELECT * FROM tbl_test"
$data=array();
if($result=$db->query($sql))
{
  while($record=$result->fetch_object())
  {
    $data[]=array($record->id,$record->nama,$record->alamat);
  }
  $result->close();
}
*/
?>
<!DOCTYPE html>
<html>
  <head>
    <script>
      function detail(no){
        document.getElementById('detail').style.display='block';
        document.getElementById('no').value=no;
        document.getElementById('id').value=document.getElementById('id'+no).value;
        document.getElementById('nama').value=document.getElementById('nama'+no).value;
        document.getElementById('alamat').value=document.getElementById('alamat'+no).value;
      }
      function batal(){
        document.getElementById('detail').style.display='none';
      }
      function simpan(){
        var no=document.getElementById('no').value
        document.getElementById('id'+no).value=document.getElementById('id').value;
        document.getElementById('nama'+no).value=document.getElementById('nama').value;
        document.getElementById('alamat'+no).value=document.getElementById('alamat').value;
        document.getElementById('detail').style.display='none';
      }
    </script>
  </head>
  <body>
    <table>
      <tr>
        <th>ID</th>
        <th>Nama</th>
        <th>Alamat</th>
      </tr>
      <?php
      $i=0;
      foreach($data as $dt){
        echo "<tr>"
            ."<td><input type='text' id='id".++$i."' value='{$dt[0]}' readonly='readonly'/></td>"
            ."<td><input type='text' id='nama$i' value='{$dt[1]}' readonly='readonly'/></td>"
            ."<td><input type='text' id='alamat$i' value='{$dt[2]}' readonly='readonly'/></td>"
            ."<td><input type='button' onclick='detail($i)' value='detail'/></td>"
            ."</tr>";
      }
      ?>
    </table>
    <div id="detail" style='display:none'>
      <input type="hidden" id='no' name="no"/>
      <table>
        <tr><td>ID</td><td><input type="text" id='id' name="id" readonly="readonly"/></td></tr>
        <tr><td>Nama</td><td><input type="text" id='nama' name="nama"/></td></tr>
        <tr><td>Alamat</td><td><input type="text" id='alamat' name="alamat"/></td></tr>
        <tr>
          <td colspan="2" align="right">
            <input type="button" value="simpan" onclick="simpan()"/>
            <input type="button" value="batal" onclick="batal()"/>
          </td>
        </tr>
    </div>
  </body>
</html>