รบกวนช่วยแนะนำเรื่องการส่งค่าจากปุ่ม button ไปอีกหน้านึงหน่อยคะ

ช่วยแนะนำเรื่องการส่งค่าจากปุ่ม button ไปอีกหน้านึงหน่อยคะ จะเขียนโค๊ดยังไงให้เมื่อเราเลือกวันที่แล้ว พอกดเลือกเวลาให้มันส่งค่าวันที่และเวลาที่เราเลือกไว้จากหน้าที่แล้วไปอีกหน้านึง รบกวนขอตัวอย่างการเขียนหน่อยคะ 

<table width="80%" border="0" align="center">
                <tr class="aqua_treatment_text_header">
                    <td height="29" colspan="2" bgcolor="#85c30b">เพิ่มชั่วโมงการเรียน</td>
                    </tr>
                    <tr>
                    <td width="50%" align="center" bgcolor="#FFFFFF">เลือกวันที่และช่วงเวลา</td>
                    <td height="34" align="center" bgcolor="#FFFFFF">
                    <input name="dateBook" type="text" id="dateBook" readonly="readonly" />
                    </td>
                    </tr>
                    <tr>
                    <td  align="center" bgcolor="#FFFFFF">08.00น.-09.00น.</td>
                    <td height="34" align="center" bgcolor="#FFFFFF"><input type="button" name="sel1" id="sel1" value="เลือก" /></td>
                    </tr>
                    <tr>
                    <td  align="center" bgcolor="#FFFFFF">09.00น.-10.00น.</td>
                    <td height="34" align="center" bgcolor="#FFFFFF"><input type="button" name="sel2" id="sel2" value="เลือก" /></td>
                    </tr>
                    <tr>
                    <td  align="center" bgcolor="#FFFFFF">10.00น.-11.00น.</td>
                    <td height="34" align="center" bgcolor="#FFFFFF"><input type="button" name="sel3" id="sel3" value="เลือก" /></td>
                    </tr>
                    <tr>
                    <td  align="center" bgcolor="#FFFFFF">11.00น.-12.00น.</td>
                    <td height="34" align="center" bgcolor="#FFFFFF"><input type="button" name="sel4" id="sel4" value="เลือก" /></td>
                    </tr>
                    <tr>
                    <td  align="center" bgcolor="#FFFFFF">12.00น.-13.00น.</td>
                    <td height="34" align="center" bgcolor="#FFFFFF"><input type="button" name="sel5" id="sel5" value="เลือก" /></td>
                    </tr>
                    <tr>
                    <td  align="center" bgcolor="#FFFFFF">13.00น.-14.00น.</td>
                    <td height="34" align="center" bgcolor="#FFFFFF"><input type="button" name="sel6" id="sel6" value="เลือก" /></td>
                    </tr>
                    <tr>
                    <td  align="center" bgcolor="#FFFFFF">14.00น.-15.00น.</td>
                    <td height="34" align="center" bgcolor="#FFFFFF"><input type="button" name="sel7" id="sel7" value="เลือก" /></td>
                    </tr>
                    <tr>
                    <td  align="center" bgcolor="#FFFFFF">15.00น.-16.00น.</td>
                    <td height="34" align="center" bgcolor="#FFFFFF"><input type="button" name="sel8" id="sel8" value="เลือก" /></td>
                    </tr>
                </table>

ใช้ input hidden เก็บค่าเวลาที่ต้องการส่ง กำหนดชื่อ input hidden เป็น array เพื่อให้สามารถใช้ key อ้างอิงได้
แล้วกำหนดปุ่ม เป็น ปุ่ม submit แทน button แล้วกำหนดใช้เป็น array ให้มี key เหมือนกับ key ของ input hidden

ดูตัวอย่างนี้เป็นแนวทาง

<form name="form1" method="post" action="">
  <p>
    <input type="text" name="data1" id="data1">
  </p>
  <ul>
  	<li>
    12:00 
      <input name="arr_time[t1]" type="hidden" value="12:00">
<input type="submit" name="btn_t[t1]"  value="เลือก">
    </li>
  	<li>
    13:00 
      <input name="arr_time[t2]" type="hidden"  value="13:00">
<input type="submit" name="btn_t[t2]" value="เลือก">
    </li>
  	<li>
    14:00 
      <input name="arr_time[t3]" type="hidden" value="14:00">
<input type="submit" name="btn_t[t3]"  value="เลือก">
    </li>        
  </ul>

</form>
<pre>
<?php // print_r($_POST); ?>
<?php
if(isset($_POST['btn_t'])){
	print_r($_POST); 
	$key_arr =  key($_POST['btn_t']);
	$select_time = $_POST['arr_time'][$key_arr];
	echo $select_time;
}
?>
</pre>

ขอบคุณคะ เพิ่มช่วงเวลาได้แล้วคะ แต่ต้องการคลิกเลือกช่วงเวลาให้มาแสดงในแถวอีก จนครบ 4 ชั่วโมงคะ  ช่วยแนะนำการเขียนหน่อยคะ คือได้เพิ่มโค๊ดแถวตารางใน function showTime แต่ตารางไม่เพิ่ม ไม่รู้ผิดตรงไหน ช่วยหน่อยนะคะ

 <script>
 function showButton() {
	if ($('#dateBook').val() != "") {
		document.getElementById('btn_t[t1]').style.display = "";
		document.getElementById('btn_t[t2]').style.display = "";
		document.getElementById('btn_t[t3]').style.display = "";
		document.getElementById('btn_t[t4]').style.display = "";
		document.getElementById('btn_t[t5]').style.display = "";
		document.getElementById('btn_t[t6]').style.display = "";
		document.getElementById('btn_t[t7]').style.display = "";
		document.getElementById('btn_t[t8]').style.display = "";
		document.getElementById('tblShowtime').style.display = "";
	}
}

function hideButton() {
	document.getElementById('dateBook').value = "";
	document.getElementById('btn_t[t1]').style.display = "none";
	document.getElementById('btn_t[t2]').style.display = "none";
	document.getElementById('btn_t[t3]').style.display = "none";
	document.getElementById('btn_t[t4]').style.display = "none";
	document.getElementById('btn_t[t5]').style.display = "none";
	document.getElementById('btn_t[t6]').style.display = "none";
	document.getElementById('btn_t[t7]').style.display = "none";
	document.getElementById('btn_t[t8]').style.display = "none";
	document.getElementById('tblShowtime').style.display = "none"; 
}

function showTime() {
    var bookDate = document.getElementById('dateBook');
    var table = document.getElementById('tblShowtime');
    var rowCount = table.rows.length;
    var row = table.insertRow(1);
    row.outerHTML = "<tr bgcolor='#FFF' height='30'><td width='150' align='center'>" + document.getElementById('dateBook').value + "</td><td width='150' align='center'></td><td width='150' align='center'></td><td width='150' align='center'></td></tr>";
}
 </script>
 <link rel="stylesheet" type="text/css" href="js/jquery.datetimepicker.css">
 
  <?php
if(isset($_POST['btn_t'])){
	//print_r($_POST); 
	$key_arr =  key($_POST['btn_t']);
	$select_time = $_POST['arr_time'][$key_arr];
//	echo $select_time;
}
?>
            <form action="" method="post" id="frmReserve" name="frmReserve">
               <table width="80%" border="0" align="center">
                <tr class="aqua_treatment_text_header">
                  <td height="29" colspan="2" bgcolor="#85c30b">เพิ่มชั่วโมงการเรียน</td>
                </tr>
                <tr>
                  <td width="50%" align="center" bgcolor="#FFFFFF">เลือกวันที่และช่วงเวลา</td>
                  <td height="34" align="center" bgcolor="#FFFFFF"><input name="dateBook" type="text" id="dateBook" readonly="readonly" onchange="return showButton();" /></td>
                </tr>
                <tr>
                  <td  align="center" bgcolor="#FFFFFF">08.00น.-09.00น.
                    <input name="arr_time[t1]" type="hidden" value="08:00-09.00" /></td>
                  <td height="34" align="center" bgcolor="#FFFFFF"><input type="submit" name="btn_t[t1]" id="btn_t[t1]"  value="เลือก"  style="display: none;" onclick="return showTime()" /></td>
                </tr>
                <tr>
                  <td  align="center" bgcolor="#FFFFFF">09.00น.-10.00น.
                    <input name="arr_time[t2]" type="hidden" value="09:00-10.00" /></td>
                  <td height="34" align="center" bgcolor="#FFFFFF"><input type="submit" name="btn_t[t2]" id="btn_t[t2]" value="เลือก" style="display: none;" /></td>
                </tr>
                <tr>
                  <td  align="center" bgcolor="#FFFFFF">10.00น.-11.00น.
                    <input name="arr_time[t3]" type="hidden" value="10:00-11.00" /></td>
                  <td height="34" align="center" bgcolor="#FFFFFF"><input type="submit" name="btn_t[t3]" id="btn_t[t3]" value="เลือก" style="display: none;" /></td>
                </tr>
                <tr>
                  <td  align="center" bgcolor="#FFFFFF">11.00น.-12.00น.
                    <input name="arr_time[t4]" type="hidden" value="11:00-12.00" /></td>
                  <td height="34" align="center" bgcolor="#FFFFFF"><input type="submit" name="btn_t[t4]" id="btn_t[t4]" value="เลือก" style="display: none;" /></td>
                </tr>
                <tr>
                  <td  align="center" bgcolor="#FFFFFF">12.00น.-13.00น.
                    <input name="arr_time[t5]" type="hidden" value="12:00-13.00" /></td>
                  <td height="34" align="center" bgcolor="#FFFFFF"><input type="submit" name="btn_t[t5]" id="btn_t[t5]" value="เลือก" style="display: none;" /></td>
                </tr>
                <tr>
                  <td  align="center" bgcolor="#FFFFFF">13.00น.-14.00น.
                    <input name="arr_time[t6]" type="hidden" value="13:00-14.00" /></td>
                  <td height="34" align="center" bgcolor="#FFFFFF"><input type="submit" name="btn_t[t6]" id="btn_t[t6]" value="เลือก" style="display: none;" /></td>
                </tr>
                <tr>
                  <td  align="center" bgcolor="#FFFFFF">14.00น.-15.00น.
                    <input name="arr_time[t7]" type="hidden" value="14:00-15.00" /></td>
                  <td height="34" align="center" bgcolor="#FFFFFF"><input type="submit" name="btn_t[t7]" id="btn_t[t7]" value="เลือก" style="display: none;" /></td>
                </tr>
                <tr>
                  <td  align="center" bgcolor="#FFFFFF">15.00น.-16.00น.
                    <input name="arr_time[t8]" type="hidden" value="15:00-16.00" /></td>
                  <td height="34" align="center" bgcolor="#FFFFFF"><input type="submit" name="btn_t[t8]" id="btn_t[t8]" value="เลือก" style="display: none;" /></td>
                </tr>
                <tr>
                  <td height="34" colspan="2"  align="center" bgcolor="#FFFFFF"><input type="button" id="btnReset" name="btnReset" value="ล้างค่า" onclick="return hideButton()" /></td>
                  </tr>
              </table>
              <br />
              <form action="" method="post" id="frmShowReserve" name="frmShowReserve">
              <table id="tblShowtime" cellpadding="0" cellspacing="0" width="80%" align="center" border="0" bgcolor="#000">
        <tr bgcolor="#FFF" height="30">
          <td height="36" colspan="3" align="center" bgcolor="#85c30b">ข้อมูลการจองเวลาเรียน</td>
          </tr>
        <tr bgcolor="#FFF" height="30">
          <td height="31" align="center">วันที่</td>
          <td align="center">เวลาเรียน</td>
          <td align="center">จำนวนชั่วโมง</td>
        </tr>
        <tr bgcolor="#FFF" height="30" id="trShowtime" style="display: none;">
          <td width="150" align="center"></td>
          <td width="150" align="center"></td>
          <td width="150" align="center"></td>
        </tr>
        <tr bgcolor="#FFF" height="30">
          <td height="28" align="center"><?php echo $dateBook?></td>
          <td align="center"><?php echo $select_time?></td>
          <td align="center"></td>
        </tr>
        <tr bgcolor="#FFF" height="30">
            <td width="150" height="29" colspan="2" align="right">ชั่วโมงทั้งหมด</td>
            <td width="150" align="center"></td>
        </tr>
        <tr bgcolor="#FFF" height="30">
            <td width="150" height="30" colspan="2" align="right">ชั่วโมงรวม</td>
            <td width="150" align="center"></td>
        </tr>
        <tr bgcolor="#FFF" height="30">
            <td width="150" height="31" colspan="2" align="right">ชั่วโมงที่เหลือ</td>
            <td width="150" align="center"></td>
        </tr>
    </table>
            </show>

แนะนำให้ใช้เป็น form เดียวส่งข้อมูล ทั้งหมดไปพร้อมกัน โดยส่งไปอีกหน้าหนึ่ง
แนวทางตามความเห็นที่ 1 นอกเหนือจากนั้น ต้องทำความเข้าไป และประยุกต์เองเพิ่มเติม