เนื้อหาในส่วนนี้ จะเป็นการทบทวนความรู้เก่า เป็นตัวอย่างการใช้งาน ajax
ในลํกษณะของการส่งข้อมูลจาก form แบบ ajax หรือไม่มีการ refresh หน้าเพจ
หลักการทดสอบ สร้างไฟล์ php สำหรับรับข้อมูลในตัวอย่างที่นี้ใช้ชื่อว่า getdata.php
โค้ดไฟล์ getdata.php
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
if(count($_POST)){
echo "<pre>";
print_r($_POST);
echo "</pre>";
}
?>
โค้ดไฟล์ myform.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test form</title>
<style type="text/css">
.mylabel{
display: inline-block;
width: 150px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<br><br>
<div style="margin:auto;width:700px;">
<form name="myform1" id="myform1" action="" method="post">
<span class="mylabel">Name: </span>
<input type="text" name="myname" id="myname" value="">
<br>
<span class="mylabel">Password: </span>
<input type="password" name="mypass" id="mypass" value="">
<br>
<span class="mylabel">Sex: </span>
<input type="radio" name="myradio" id="myradio1" value="male"> Male
<input type="radio" name="myradio" id="myradio2" value="female"> female
<br>
<span class="mylabel">occupation: </span>
<select name="myselect" id="myselect">
<option value="">Select occupation</option>
<option value="programmer">programmer</option>
<option value="designer">designer</option>
</select>
<br>
<span class="mylabel">Description: </span>
<textarea name="mydesc" id="mydesc" cols="30" rows="5"></textarea>
<br>
<span class="mylabel">newsletter: </span>
<input type="checkbox" name="mycheckbox" id="mycheckbox" value="1"> via email
<br>
<span class="mylabel"></span>
<input type="submit" name="mysubmit" id="mysubmit" value="Save">
<input type="reset" name="myreset" id="myreset" value="Reset">
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
โค้ดไฟล์ script.js
$(function(){
// เมื่อ submit form id myform1
$("#myform1").on("submit",function(){
// เก็บชุดข้อมูลที่ต้องการส่งทั้งหมดไว้ในตัวแปร str
var str=$("#myform1").serialize();
$.post("getdata.php",str,function(data){ // ส่งข้อมูลแบบ post
console.log(data); // คืนค่า data จากข้อมูลที่แสดงในไฟล์ getdata.php
});
return false; // ปิดการใช้งานการ submit form แบบปกติ
});
});
จากรูปแบบการใช้งานข้างต้น เราจะเห็นว่าเป็นการส่งข้อมูลแบบ ajax เมื่อทำงาน
สำเร็จแล้ว เราสามารถกำหนดให้ทำงานเพิ่มเติม
ต่อไปจะแนะนำการ reset form หลังจาก submit ข้อมูลแบบ ajax เราจะใช้คำสั่ง
$("#myform1")[0].reset();
หรือแทรกในโค้ด script.js ได้ดังนี้
$(function(){
// เมื่อ submit form id myform1
$("#myform1").on("submit",function(){
// เก็บชุดข้อมูลที่ต้องการส่งทั้งหมดไว้ในตัวแปร str
var str=$("#myform1").serialize();
$.post("getdata.php",str,function(data){ // ส่งข้อมูลแบบ post
console.log(data); // คืนค่า data จากข้อมูลที่แสดงในไฟล์ getdata.php
$("#myform1")[0].reset(); // reset form
});
return false; // ปิดการใช้งานการ submit form แบบปกติ
});
});
การ reset form นอกจากใช้คำสั่งดังกล่าวแล้ว เรายังสามารถใช้งาน
<input type="reset" name="myreset" id="myreset" value="Reset">
ทดสอบ ลองพิมพ์ข้อมูลลงใน form จากนั้นกดปุ่ม reset
จากตัวอย่างจะเห็นว่า เมื่อเรากดปุ่ม reset ค่าข้อมูลจะถูกล่างค่า สำหรับการกรอกข้อมูลใหม่
ทีนี้มาดูกรณีที่สอง เงื่อนไขจะแตกต่างไป คือ ข้อมูลใน form บางรายการ มีการกำหนด
ค่ามาตั้งแต่ต้น การ reset ข้อมูลแบบปกติจะไม่สามารถใข้งานได้
โค้ดไฟล์ myform.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test form</title>
<style type="text/css">
.mylabel{
display: inline-block;
width: 150px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<br><br>
<div style="margin:auto;width:700px;">
<form name="myform2" id="myform2" action="" method="post">
<span class="mylabel">Name: </span>
<input type="text" name="myname" id="myname" value="ninenik">
<br>
<span class="mylabel">Password: </span>
<input type="password" name="mypass" id="mypass" value="ninenik">
<br>
<span class="mylabel">Sex: </span>
<input type="radio" name="myradio" id="myradio1" value="male" checked> Male
<input type="radio" name="myradio" id="myradio2" value="female"> female
<br>
<span class="mylabel">occupation: </span>
<select name="myselect" id="myselect">
<option value="">Select occupation</option>
<option value="programmer" selected>programmer</option>
<option value="designer">designer</option>
</select>
<br>
<span class="mylabel">Description: </span>
<textarea name="mydesc" id="mydesc" cols="30" rows="5">ninenik.com</textarea>
<br>
<span class="mylabel">newsletter: </span>
<input type="checkbox" name="mycheckbox" id="mycheckbox" value="1" checked> via email
<br>
<span class="mylabel"></span>
<input type="submit" name="mysubmit" id="mysubmit" value="Save">
<input type="reset" name="myreset" id="myreset" value="Reset">
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
ทดสอบ กดปุ่ม reset ซึ่งจะไม่มีอะไรเกิดขึ้นในการ reset form
ดังนั้นในส่วนนี้ เราจะมาประยุกต์สร้างฟังก์ชั่นสำหรับ reset กรณีพิเศษนี้
โดยสามารถกำหนดการทำงานให้กับการ reset form เพิ่มเตืมเข้าไปได้ดังนี้
$(function(){
// เมื่อ submit form id myform1
$("#myform1").on("submit",function(){
// เก็บชุดข้อมูลที่ต้องการส่งทั้งหมดไว้ในตัวแปร str
var str=$("#myform3").serialize();
$.post("getdata.php",str,function(data){ // ส่งข้อมูลแบบ post
console.log(data); // คืนค่า data จากข้อมูลที่แสดงในไฟล์ getdata.php
$("#myform3")[0].reset(); // reset form
});
return false; // ปิดการใช้งานการ submit form แบบปกติ
});
// เมื่อ form ถูก reset ด้วยปุ่ม reset
$("#myform3").on("reset",function(){
// ค้นหา input ทั้งหมดใน form
$(this).find(":input").each(function(i,k){
var typeObj=$(k)[0].type; // หาประเภทของ รnput
if(typeObj=="text" || typeObj=="password"){
$(k).removeAttr("value");
}
if(typeObj=="select-one"){
$(k).find("option:selected").removeAttr("selected");
}
if(typeObj=="radio" || typeObj=="checkbox"){
$(k).removeAttr("checked");
}
if(typeObj=="textarea"){
$(k).text("");
}
// console.log(typeObj);
});
});
});
ทดสอบ กดปุ่ม reset จะเห็นการทำงานของ การประยุกต์
