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

27 October 2014 เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee

jquery ajax

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

เนื้อหาในส่วนนี้ จะเป็นการทบทวนความรู้เก่า เป็นตัวอย่างการใช้งาน 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">
&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

$(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">
&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

ดังนั้นในส่วนนี้ เราจะมาประยุกต์สร้างฟังก์ชั่นสำหรับ 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 จะเห็นการทำงานของ การประยุกต์

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

Tags:: ajax jquery

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

ขอบคุณทุกการสนับสนุน