ทบทวนการใช้งาน submit ข้อมูลแบบ ajax และการ reset form

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
ajax jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ajax jquery

ดูแล้ว 24,218 ครั้ง


เนื้อหาในส่วนนี้ จะเป็นการทบทวนความรู้เก่า เป็นตัวอย่างการใช้งาน ajax
ในลํกษณะของการส่งข้อมูลจาก form แบบ ajax หรือไม่มีการ refresh หน้าเพจ
หลักการทดสอบ สร้างไฟล์ php สำหรับรับข้อมูลในตัวอย่างที่นี้ใช้ชื่อว่า getdata.php
 
โค้ดไฟล์ getdata.php
 
1
2
3
4
5
6
7
8
9
10
<?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
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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">
&nbsp;&nbsp;
<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
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(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 เราจะใช้คำสั่ง
 
1
$("#myform1")[0].reset();
 
หรือแทรกในโค้ด script.js ได้ดังนี้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(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 นอกจากใช้คำสั่งดังกล่าวแล้ว เรายังสามารถใช้งาน 
 
1
<input type="reset" name="myreset" id="myreset" value="Reset">
 
ทดสอบ ลองพิมพ์ข้อมูลลงใน form จากนั้นกดปุ่ม reset 
 


Name:
Password:
Sex: Male female
occupation:
Description:
newsletter: via email
  
 
จากตัวอย่างจะเห็นว่า เมื่อเรากดปุ่ม reset ค่าข้อมูลจะถูกล่างค่า สำหรับการกรอกข้อมูลใหม่
 
ทีนี้มาดูกรณีที่สอง เงื่อนไขจะแตกต่างไป คือ ข้อมูลใน form บางรายการ มีการกำหนด
ค่ามาตั้งแต่ต้น การ reset ข้อมูลแบบปกติจะไม่สามารถใข้งานได้
 
โค้ดไฟล์ myform.php
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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">
&nbsp;&nbsp;
<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
 


Name:
Password:
Sex: Male female
occupation:
Description:
newsletter: via email
  
 
ดังนั้นในส่วนนี้ เราจะมาประยุกต์สร้างฟังก์ชั่นสำหรับ reset กรณีพิเศษนี้
โดยสามารถกำหนดการทำงานให้กับการ reset form เพิ่มเตืมเข้าไปได้ดังนี้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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 จะเห็นการทำงานของ การประยุกต์
 
Name:
Password:
Sex: Male female
occupation:
Description:
newsletter: via email
  


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: jquery ajax







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ