คือผมต้องการคลิ๊ก link แล้วไปเรียกหน้าอื่นมาแสดงใน <div> ครับผมต้องทำอย่างไร

wave
North Anuwat
5,684
สังคมนักพัฒนาระบบ (Community)
คือผมต้องการคลิ๊ก link แล้วไปเรียกหน้าอื่นมาแสดงใน

แล้วก็อีกเรื่องนึงนะครับ ผมต้องการเลือก radio พอเลือกแล้วให้นำค่าไป + กับ ตัวแปร i แล้วแสดงออกมาตามภาพเลยครับ แล้วก็อีกอย่างทำเป็น button กด + ก็จะบวกทีละ 1 กดลบ ก็จะลบทีละ 1 ครับ ขอบคุณสำหรับคำแนะนำนะครับเพิ่งเรียนรู้ครับ

 

17 ความคิดเห็น

  • มานพ กองอุ่น

  • North Anuwat

  • Weanich Sanchol

<?php

if(!isset($_POST["i"])){                        // ตรวจสอบว่ามีค่าเริ่มต้นหรือยัง ไม่มี ให้เป็น 0
    $i=0;
}
else{
    $i = $_POST["i"];                           // อ่านค่า i จาก form
    if(!empty($_POST["choice"])){        // ตรวจสอบว่ากด ที่ choice หรือไม่ถ้าใช่ทำตาม choice
        $c = $_POST["choice"];
        $i = $i+$c;
    }
    else{                                           //  ถ้าไม่ได้กด choice แสดงว่ากดปุ่ม เพิ่ม/ลด
        if(!empty($_POST["add"])){
            $i++;
        }else{
            $i--;
        }
    }
}

/// ส่วนแสดงผลตามรูป 
echo 'show i = ' . $i;
echo '<form action="test.php" method="post">';
echo '<input type="radio" onChange="this.form.submit();" name="choice" value="1">1 (i+1)<br>';
echo '<input type="radio" onChange="this.form.submit();" name="choice" value="2">2 (i+2)<br>';
echo '<input type="radio" onChange="this.form.submit();" name="choice" value="3">3 (i+3)<br>';
echo '<input type="hidden" name="i" value="'. $i . '">'; 
echo '<button onClick="this.form.submit();" name="add" value="1">+</button>1
<button onClick="this.form.submit();" name="minus" value="1">-</button> show i =' .$i;
echo '</form>';


?>

 

code ด้านบนเป็นการทำงานฝั่ง server-side โดยใช้ form มาช่วย ถ้าอยากให้เป็น client-side ให้ใช้ javascript ตรวจสอบ onClick หรือ onChange ตรงส่วนแสดงผลแล้วเรียกไปทำงานในฟังก์ชันแทนการ submit  เช่น onClick="increment();" แล้ว ใช้ DOM ช่วยในการแสดงผล ส่วน คลิก link ให้แสดงผล ลองศึกษา ajax แล้วใช้ DOM แสดงผล (ส่ง request แล้วนำ content มาโชว์ใน div)  

ที่ผมต้องการคือ แบบนี้นะครับ

ต้องการกด Menu ทางซ้าย แล้ว ตรงด้าน jumbotron ก็เปลี่ยนไปตาม Menu ที่เรากดอะไรแบบนี้ครับผม ขอบคุณครับ

ใช้ framework หรือเปล่าครับ

อันนี้ผมก็ไม่แน่ใจเหมือนกันนะครับคือผมเพิ่งเรียนรู้อ่าครับ แนะนำหน่อยนะครับ TT ทำตาม youtube มาอีกทีนึงเหมือนกันครับ

สี่เหลี่ยมเทาๆ นี่อยู่ใน .php อีกไฟล์หรือเปล่าครับกับหน้า menu

อยู่คนละไฟล์กันครับผม

ลองมองหน้านั้น แยกออกแบบนี้นะครับ

ที่เป็น menu bar สมมติเป็นไฟล์ menu.php ไฟล์หนึ่ง ที่มีกล่อง div id="show" อยู่

ส่วนอีกไฟล์เป็น data.php ไฟล์ที่มี data ที่ต้องการแสดงผลใน div หน้าที่มี menu bar สมมติในนั้นมีสคริปต์แบบนี้

<?php
echo "<h1>TEST HEADING STYLE</h1><p>This is paragraph in the page that you want to show</p><button class="btn btn-primary">Learn more</button>";
?>

ให้เพิ่ม onclick ลงบน tag a ของลิ้งค์ใน menu.php <a onclick="send();"> แล้วเพิ่ม javascript 

<script>
		function send(){
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.onreadystatechange = function(){
				if(this.readyState == 4 && this.status == 200){
					document.getElementById("show").innerHTML = this.responseText;
				}
			};
			xmlhttp.open("GET","http://localhost/test/data.php",true);
			xmlhttp.send();
		}
</script>

ตรง /test/data.php ระบุ path ให้ตรงกับที่เก็บไฟล์นะครับ 

หลังจากนั้นลองรันแล้วคลิกที่ ลิ้ง นั้นดู data ที่อยู่ใน data.php จะไปโชว์อยู่ในกล่อง div id="show" ในไฟล์ menu.php

ได้ผลอย่างไรบอกด้วยนะ

ขอบคุณสำหรับโค้ดนะครับผมคือมันไม่ขึ้นอะไรเลยครับ เว็บนี้มันแบ่งหัวท้ายครับ ส่วนหัวจะรวม menu ไปด้วย

หน้า index.php

<?php
include 'html_head.php';    (ส่วน menu จะอยู่หน้านี้ครับ)
?>



ส่วนเนื้อหา



<?php
include 'html_foot.php';
?>

ผมสามารถก๊อปหน้านี้แล้วไปเปลี่ยนตรงส่วนเนื้อหาทำอีกหน้า แล้วใส่ลิ้งค์ตามปกติเลยจะดีไหมครับ?

ถ้าไม่ขึ้น ลองเปิด console (google chorme กด F12 ) แล้วคลิกลิ้งใหม่ดู ตรง console มันน่าจะมี error แจ้งนะครับ  ถ้ามีคืออะไรเผื่อแก้ไขได้ครับ

แบบนั้นก็ได้ครับ ก็คือเหมือนใส่ code เข้าไปในทุกหน้า .php 

โห้ยยย มาแล้วครับผม ขอบคุณมากๆนะครับผมก็เพิ่งรู้ว่าเปิด console ได้ TT ขอบคุณนะครับผม

มาแล้ว คือ ใช้ code แบบ include หรือ ajax ครับ  console เวลามันมีปัญหามันใช้เช็ค error ได้ ถ้ามี error ตอนทำ ajax อยากรู้ว่ามันขึ้นอะไรครับ เผื่อแก้ได้ 

<script> function send(){ 
var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function(){ 
if(this.readyState == 4 && this.status == 200){ 
document.getElementById("show").innerHTML = this.responseText; 
} 
};
 xmlhttp.open("GET","http://localhost/test/data.php",true); xmlhttp.send(); } 
</script> 

ตามนี้เลยครับผม แต่ตอนนี้ menu ที่อยู่ใน <?php include 'html_head.php'; ?> หาวิธี active มันไม่ได้ครับ

ถ้าให้มันขึ้นสีต่างจากเพื่อนในแถบ menu พวก javascript css ก็ทำได้ครับ 

อ่อครับพอดีผมไม่รู้เรื่องนี้เลยอ่าครับ = ='' นั่งหามาหลายเว็บแล้ว

ตอนนี้ทำได้หรือยังครับ