การส่งค่าตัวแปร ระหว่าง 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 เดียวกัน)
ถ้าต้องการสร้างปุ่มกด ใน 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 เดียวกัน)
ความคิดเห็น
แสดงความคิดเห็น