การส่งค่าตัวแปร ระหว่าง javascript และ php (2)

การส่งค่าจาก Javascript  ไปยังไฟล์ Php

ถ้าต้องการสร้างปุ่มกด ใน Javascript เพื่อให้ส่งค่าไปยัง ไฟล์ php สามารถทำได้ โดย ใช้คำสั่ง window.location.herf เช่น

ตัวอย่างไฟล์ html ส่งค่าตัวแปร Javascript ไปยังไฟล์ php

<!DOCTYPE html>
<html>
<body>
<p>การส่งค่าตัวแปร จาก Javascript ไปยังไฟล์ php ด้วย query string</p>
<button type="button" onclick="myFunction()"  onmouseover="this.style.cursor='pointer';">ส่งค่าตัวแปร</button>

<script>
function myFunction()
{
  var myJsVar = "สมศักดิ์";
  window.location.href = "my_php.php?name=" + myJsVar;
}
</script>

</body>
</html>

ตัวอย่างข้างต้น ส่งตัวแปร Javascript ชื่อ myJsVar ไปยังไฟล์ php ชื่อ my_php.php
ข้อสังเกต
ปกติปุ่มของ Javascript จะไม่แสดงรูปนิ้วมือเมื่อนำเมาส์ไปวางที่ปุ่ม ถ้าต้องการให้เคอร์เซอร์เปลี่ยนเป็นรูปมือ ให้ใช้คำสั่ง onmouseover="this.style.cursor='pointer' เพิ่มเข้าไปที่ปุ่ม นอกจากรูปมือ ยังสามารถเปลี่ยนเป็นรูปอื่น ๆ ได้อีก เช่น default (รูปลูกศร) help (รูปลูกศร+เครื่องหมายคำถาม) เป็นต้น


ไฟล์ my_php.php มีดังนี้

<?php
$thisName = $_GET['name'];
echo"name: $thisName";
?>

แสดงผล ไฟล์ html ส่งค่าตัวแปร Javascript ไปยังไฟล์ php


แสดงผล ไฟล์ my_php.php รับค่าตัวแปรที่เป็น Javascript




การส่งค่าตัวแปรจาก php ไปยัง Javascript ในไฟล์เดียวกัน (ไฟล์ PHP)

การส่งค่าจากตัวแปร php ในไฟล์ PHP ไปยังตัวแปร Javascript สามารถทำได้โดยตรง โดยใช้ฟังก์ชัน print หรือ echo ให้แสดงค่าตัวแปร ในรูปแบบของ Javascript เช่น

<script>
var myJavascriptVar = "<? print myPhpVar ?>";
</script>

ตัวอย่างข้างล่างนี้ เป็นไฟล์ php ที่มีการส่งค่าตัวแปรจาก php ไปแสดง โดยใช้ Javascript รับค่าจากต้วแปร php และนำมาแสดงในตำแหน่งที่กำหนด

<html>
<body>
<?php
 $username = "สมทรง";
?>
<script>
 var username = "<?php print $username ?>";
</script>
ชื่อ
<p id="thisName">.............</p>
<script>
function showName ()
{
document.getElementById('thisName').innerHTML= username;
}
</script>
<button type="button" onclick="showName()"  onmouseover="this.style.cursor='pointer';">ส่งค่าตัวแปร</button>
</body>
</html>

แสดงผลก่อนกดปุ่มส่ง (ไฟล์ PHP)


แสดงผลหลังกดปุ่มส่ง (ไฟล์ PHP เดียวกัน)






ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

อุปมา อุปไมย สำนวนการเปรียบเทียบ ของไทย

แนวข้อสอบ เงื่อนไขสัญลักษณ์

ความสามารถทั่วไปด้านเหตุผล การหาความสัมพันธ์จาก ภาพ สัญลักษณ์