Jquery

โดยปรกติแล้วเราจะคุ้นเคยกับการใช้ Jquery ส่งตัวแปรผ่าน Form อยู่แล้ว แต่ก็มีอีกวิธีหนึ่งที่ง่ายกว่าและการเขียนโค้ดก็สั่นกว่าด้วย โดยการใช้วิธีส่งค่าตัวแปรผ่าน a link ไปเลยครับ แต่เดี๋ยวก่อน! ไม่ใช่ว่าจะใช้วิธีนี้ได้หมดนะครับ การส่งค่าผ่าน link จะเหมาะกับการส่งแบบไม่ต้องกรอกค่าใน input ซะมากกว่า เรามาดูตัวอย่างด้านล่างกันครับ

ตัวอย่างเดิมตอนใช้ Form

<form>
<input type="hidden" name="id" value="<? echo $id; ?>">
<input type="hidden" name="user" value="<? echo $user; ?>">
<input type="hidden" name="work" value="<? echo $work; ?>">
</form>

ตัวอย่างส่งค่าแบบใช้ a link

<a href="#" id="link" data_id="<? echo $id; ?>" data_user="<? echo $user; ?>" data_work="<? echo $work; ?>">

เห็นไหมครับว่าการเขียน code ง่ายและสั่นกว่ามาก เรามาดูส่วนของ Jquery กันบ้าง

<script type="text/javascript">
$(document).ready(function() {	

$('.link').click(function() {

var id= $(this).attr('data_id');     
var user= $(this).attr('data_user');     
var work= $(this).attr('data_work');  

$.ajax({
    type: "POST",
    url: "http://localhost/process.php",
    data: {'id':id, 'user':user, 'work':work},

})
    .done(function(data){
    alert('Ajax Submit Success ...');	
    })
    .fail(function(){
      alert('Ajax Submit Failed ...');	
    });

});


});
</script>

จะเห็นว่ามีการรับค่าตัวแปรจาก link และแปลงค่าผ่าน var ก่อนการส่งค่าไปยัง POST ครับ

var id= $(this).attr('data_id');
var user= $(this).attr('data_user');
var work= $(this).attr('data_work');

จบแล้วครับ สำหรับบทความ การส่งตัวแปรผ่านลิ้งโดยไม่ต้องใช้ Form มันก็เป็นอีกวิธีที่ช่วยเราส่งค่าตัวแปร และการทำแบบนี้ยังช่วยให้เราไม่ต้องกังวนเรื่อง Form ซ้อนกันอีกด้วย เพราะโดยปรกติแล้วเมื่อ Form ซ้อนกันเช่น <form><form></form></form> มันจะส่งค่าไม่ผ่าน แต่เมื่อใช้ <form><a></a></form> สามารถทำได้ ไครที่ติดปัญหานี้อยู่หวังว่าบทความนี้จะพอช่วยได้นะครับ

LEAVE A REPLY

Please enter your comment!
Please enter your name here