ค้นหาเสร็จแล้ว insert ในตารางในหน้าเดียวกันโดยใช้ Ajax

usericon somsri63

ดิฉันทำโปรแกรมยืม คืนหนังสือคะ ตอนนี้กำลังเขียนโปแกรมอยู่ จะให้หน้านั้นค้นหาและ insert ในหน้าเดียวแล้วโดยใช้ Ajax
ต้องทำยังไงดีค่ะ งงเรื่องการส่งค่าใน POST น่ะคะ ตอนนี้ทำถึง ค้นหาได้แล้วแต่ยัง insert ไม่ได้น่ะคะ

//------------------------------------ตัวนี้เป็นไฟล์ชื่อ borrowbook.php ค่ะโพสไปยัง search2.php----------------------------------------------//
ความต้องการคือให้ฟอร์มนี้ส่งค่ารหัสนักเรียนด้วยน่ะคะ แต่ตอนนี้ส่งได้แค่ค่าของรหัสหนังสือค่ะ   แล้วพอเรียกใช้ search2.php
อยากให้เมื่อกดปุ่ม submit แล้ว  insert รหัสหนังสือ กับรหัสนักเรียนเข้าไปอยู่อีกตารางหนึ่งค่ะ แล้วให้แสดงออกมาข้างล่าง Form
เดืม แบบต่อ ๆ กันไปไม่เกิน 20 เล่มน่ะคะ พอจะปรึกษาได้ไหมค่ะ ไม่ค่อยเก่ง Ajax อ่ะคะ กำลังเริ่มใช้ แก้มาหลายอาทิตย์แล้วอ่ะคะ
ยังเอ๋ออยู่ค่ะตอนนี้  

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>โปรแกรมยืม/คืนหนังสือเรียนวิทยาลัยเทคนิค*********</title>

<style type="text/css">
<!--
.borrow {
 font-family: Tahoma;
 font-size: 24px;
 font-style: normal;
 font-weight: bold;
 color: #003333;
}
.style1 {color: #FFFFFF}
body {
 background-image: url(images/bg.gif);
}
.borrow2 {
 font-family: Tahoma;
 font-size: 12px;
 font-weight: bold;
 color: #000033;
}
.bor2 {
 font-family: Tahoma;
 font-size: 16px;
 font-weight: bold;
 color: #CC0033;
}
.style2 {
 font-size: 14px;
 color: #FFFFFF;
}
-->
</style>


<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>

<script language="JavaScript">
    var HttPRequest = false;

    function doCallAjax(Search) {
    HttPRequest = false;
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
    HttPRequest = new XMLHttpRequest();
    if (HttPRequest.overrideMimeType) {
    HttPRequest.overrideMimeType('text/html');
    }
    } else if (window.ActiveXObject) { // IE
    try {
    HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
       HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
    }
    }
   
    if (!HttPRequest) {
    alert('Cannot create XMLHTTP instance');
    return false;
    }
   
            var url = 'search2.php';
   var pmeters = 'mySearch='+Search;
            var pmeters = "mySearch=" + Search;

   HttPRequest.open('POST',url,true);

   HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   HttPRequest.setRequestHeader("Content-length", pmeters.length);
   HttPRequest.setRequestHeader("Connection", "close");
   HttPRequest.send(pmeters);
   
   
   HttPRequest.onreadystatechange = function()
   {

     if(HttPRequest.readyState == 3)  // Loading Request
      {
       document.getElementById("mySpan").innerHTML = "Now is Loading...";
      }

     if(HttPRequest.readyState == 4) // Return Request
      {
       document.getElementById("mySpan").innerHTML = HttPRequest.responseText;
     
      }
    
   }

    }
 </script>

</head>


<body  Onload="JavaScript:doCallAjax('','');>
<p align="center" class="borrow">
<div align="center"><strong>ยืม/คืนหนังสือเรียน วิทยาลัยเทคนิค........</strong>
  </p>
 
</div>
<form id="frmMain" name="frmMain"  method="post" action="" onsubmit="return check();">
  <table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#003300" bgcolor="#CCFF99">
    <tr>
      <th colspan="2" bgcolor="#006600" scope="col"><span class="style1">กรอกข้อมูลนักศึกษา</span></th>
    </tr>
    <tr>
      <th width="46%" bordercolor="#99CC99" bgcolor="#99CC99" class="borrow2" scope="col">รหัสนักศึกษา</th>
      <th width="54%" bordercolor="#99CC99" bgcolor="#99CC99" scope="col"><input name="search" type="text" id="search" />
  
        <input type="submit" name="Submit" value="ตกลง" />
      <input type="reset" name="Submit4" value="ยกเลิก" /></th>
    </tr>
 <?php
    if(!isset($_POST['search']))
 {
     echo '<center><strong><font color="red">กรุณากรอกข้อมูลรหัสนักศึกษาด้วยค่ะ</font></strong></center>';
 }
 else
 {
   include_once 'config.php';
   dbconnect();
   $query = mysql_query('SELECT * FROM `student` WHERE code LIKE "'. $_POST['search'] .'%" ORDER BY code ASC') or die(mysql_error());
 
   $num = mysql_num_rows($query);
  
    if($num <= 0)
       {
        echo'<font color="red" size="4"><center>ไม่พบรหัสนักศึกษาที่ต้องการค้นหา!!!</center></font>';
 }
 else
 {
     list($code, $name, $tell1, $tell2, $std_level, $depwork) = mysql_fetch_row($query)   
?>
 <tr>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="borrow2"><div align="right">รหัสนักศึกษา : </div></td>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="bor2"><?php echo $code; ?></td>
    </tr>
    <tr>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="borrow2"><div align="right">ชื่อ-นามสกุล : </div></td>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="bor2"><?php echo $name; ?></td>
    </tr>
    <tr>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="borrow2"><div align="right">เบอร์โทร 1 :  </div></td>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="bor2"><?php echo $tell1; ?></td>
    </tr>
    <tr>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="borrow2"><div align="right">เบอร์โทร2 : </div></td>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="bor2"><?php echo $tell2; ?></td>
    </tr>
    <tr>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="borrow2"><div align="right">ระดับชั้น : </div></td>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="bor2"><div align="left"><?php echo $std_level; ?></div></td>
    </tr>
 <tr>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="borrow2"><div align="right">สาขางาน : </div></td>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="bor2"><div align="left"><?php echo $depwork; ?></div></td>
    </tr>
    <tr>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="borrow2"><div align="right">ห้องเรียน : </div></td>
      <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><div align="center">
        <select name="select">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
        </select>
        <span class="borrow2">     
        <input type="submit" name="Submit6" value="Submit" />
        *ถ้าแสดงห้องเรียนแล้วไม่ต้องเลือก</span></div></td>
    </tr>
    <tr>
      <td colspan="2" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><div align="center"></div></td>
    </tr>
  </table>
  <div align="center"></div>
</form>
<div align="center">
  <? } ?>
  <? } ?>
 

  <form name="frmbook"  action="" method="post">
 

 
  <table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#003300" bgcolor="#CCFF99">
    <tr>
      <th colspan="2" bgcolor="#006600" class="style1" scope="col">กรอกข้อมูลหนังสือเรียนที่ยืม</th>
    </tr>
    <tr>
      <th bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="borrow2" scope="col"><div align="right">กำหนดส่ง : </div></th>
      <th bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="borrow2" scope="col"><div align="left">
        <input name="txtappointdate" type="text" id="txtappointdate" />
      </div></th>
    </tr>
    <tr>
      <th width="279" bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="borrow2" scope="col"><div align="right">วันที่ยืม : </div></th>
      <th width="315" bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="borrow2" scope="col"><div align="left">
        <input name="txtborrowdate" type="text" id="txtborrowdate" />
      </div></th>
    </tr>
    <tr>
      <th colspan="2" bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="borrow2" scope="col">รหัสหนังสือ:
        <input name="txtSearch" type="text" id="txtSearch" />
         

        <span id="mySpan"></span></th>
      </tr>
  </table>
  <input type="button" name="btnSearch" id="btnSearch" value="ตกลง" OnClick="JavaScript:doCallAjax(document.getElementById('txtSearch').value,'1');">
 
 
  <br>
  <br>
  </form>
</div>
</body>
</html>

//------------------------------------ไฟล์ search2.php----------------------------------------------//

<?php

 $strSearch = $_POST["mySearch"];
 
 $objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("borrowbook");
mysql_query("SET NAMES UTF8");
$strSQL = "SELECT * FROM runbook WHERE runbookID LIKE '".$strSearch."%' ORDER BY runbookID ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$Num_Rows = mysql_num_rows($objQuery);

$objQuery  = mysql_query($strSQL);

$objResult = mysql_fetch_array($objQuery);
$sbookID   =  $objResult["runbookID"];

?>
<style type="text/css">
<!--
.b1 {
 font-family: Tahoma;
 font-size: 10px;
 font-weight: bold;
 color: #003300;
}
-->
</style>

<table width="99%" border="1" bordercolor="#003300" class="b1">
  <tr>
    <th width="84" bgcolor="#99CC00" class="b1"> <div align="center">รหัสหนังสือ</div></th>
    <th width="143" bgcolor="#99CC00" class="b1"> <div align="center">ชื่อหนังสือ</div></th>
    <th width="53" bgcolor="#99CC00" class="b1"> <div align="center">จำนวนเล่ม</div></th>
    <th width="166" bgcolor="#99CC00" class="b1"> <div align="center">ชื่อผู้แต่ง</div></th>
    <th width="133" bgcolor="#99CC00" class="b1"> <div align="center">สำนักพิมพ์</div></th>
    <th width="51" bgcolor="#99CC00" class="b1"> <div align="center">ราคา</div></th>
 <th width="72" bgcolor="#99CC00" class="b1"> <div align="center">บันทึก</div></th>
  </tr>
 
  <tr>
    <td align="right" bordercolor="#99CC00" class="b1"><?=$objResult["runbookID"];?></td>
    <td align="right" bordercolor="#99CC00" class="b1"><?=$objResult["bookname"];?></td>
    <td align="right" bordercolor="#99CC00" class="b1"><?=$objResult["runbookNum"];?></td>
    <td align="right" bordercolor="#99CC00" class="b1"><?=$objResult["authorname"];?></div></td>
    <td align="right" bordercolor="#99CC00" class="b1"><?=$objResult["copyname"];?></td>
    <td align="right" bordercolor="#99CC00" class="b1"><?=$objResult["bookprice"];?></td>
  <td align="right" bordercolor="#99CC00" class="b1">
    <div align="center">
      <input name="insertbook" type="button" id="insertbook" value="บันทึก" />
       </div></td></tr>

</table>
<br>
<?
mysql_close($objConnect);
?>
 

08 มิ.ย. 2552 3 7,191
usericon goragod

สรุปใจความสำคัญมานิดนึงได้มั้ย ถ้าอยากได้คำตอบ และก็ลงเฉพาะโค้ดที่เกี่ยวข้องก็พอ ลองเดานิดนึง ว่าอะไรที่เกี่ยวข้อง

ตั้งคำถามดี ก็ได้คำตอบ คำถามยาวๆ ดูไม่ค่อยรู้เรื่อง
#1
usericon somsri63@hotmail.com



คือตอนนี้ฟอร์มที่รับค่าจะเป็นแบบนี้น่ะคะ ในส่วนของฟอร์มที่กรอกข้อมูลนักศึกษานั้นอยากให้ส่งค่ารหัส
นักศึกษาไปคะ  ส่วนฟอร์มที่กรอกข้อมูลหนังสือเรียนที่ยืมนั่นให้ส่งวันกำหนดส่ง , วันที่ยืม , รหัสหนังสือ
ไปบันทึกในตาราง returnbook ค่ะ ที่ประกอบด้วยฟิลด์ ReturnID,AppointDate,BorrowDate,BookID,studentID
เมื่อกดปุ่มบันทึกเสร็จให้บันทึกข้อมูลลงในตาราง returnbook น่ะคะแล้วพอกดปุ่มก็ให้ให้แสดงข้อมูลที่เพิ่ง insert
ไปต่อ ๆ กันไปน่ะคะตอนนี้ยังไม่ได้ทำส่งค่ารหัสนักศึกษา วันกำหนดส่ง วันที่ยืม ค่ะอยากทราบวิธีการ
-1. ส่งค่าที่อยู่ใน textbox -txtappointdate กำหนดส่ง
-2. ส่งค่าที่อยู่ใน textbox -txtborrowdate วันที่ยืม
-3. ส่งค่า code รหัสนักศึกษา
ให้เป็น code ajax แสดงผลในหน้าเดียวกัน

#2
usericon goragod

การส่งค่าด้วย AJAX สามารถทำการส่งค่าไปพร้อมๆกันหลายๆค่าเหมือนการส่งหน้าเพจด้วยฟอร์มครับ

ในกรณีของ AJAX ค่าที่ส่งไปจะอยู่ในรูปของข้อความที่แต่ละค่า ถูกเชื่อม ด้วย & (เหมือนการส่งผ่านฟอร์มด้วย GET) เช่น

index.php?appointdate=14/05/52&borrowdate=14/08/52&bookid=000478&code=4721010079

เวลารับค่าก็อ่านเอาจาก $_POST หรือ $_GET เหมือนฟอร์มทุกอย่างครับ

ส่วน การแสดงข้อมูลที่เพิ่ง Add เข้าไปใหม่อาจยากสักหน่อย แต่หลักๆก็คือใช้ Javascript สร้างแต่ละ Element ขึ้นมา แล้วกำหนดค่าและ property ต่างๆที่จำเป็นให้กับมันครับ

ลองดูตัวอย่างการสร้าง ตาราง ครับ
#3
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^