HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์
Moderator: mindphp
-
fonfonn
- PHP VIP Members
- โพสต์: 4983
- ลงทะเบียนเมื่อ: 11/07/2022 9:28 am
โพสต์ที่ยังไม่ได้อ่าน
โดย fonfonn »
ในการออกแบบหน้าของ HTML ที่มีการสร้างฟอร์มไว้หลายฟอร์ม แต่อยากให้โชว์แค่ฟอร์มที่เราต้องการใช้งาน
หลักการทำงานคือ เมื่อเปิดใช้งานหน้า HTML ฟอร์มจะถูกซ่อนไว้ก่อน แต่เมื่อเรากดปุ่มใดปุ่มหนึ่งหรือที่ข้อความใดข้อความหนึ่ง ฟอร์มที่กำหนดจะปรากฎขึ้น
ตัวอย่างเช่น
- เราต้องการซ่อนฟอร์มในการ Input ชื่อ โดยเมื่อเปิดหน้า HTML ขึ้นมาครั้งแรกจะไม่เห็นช่อง Input ชื่อ แต่จะเห็นเพียงปุ่มหรือข้อความ เมื่อทำการกดที่ปุ่มหรือข้อความนั้น ฟอร์มจะโชว์ขึ้นมา อยากสอบถามว่า เราสารมารถใช้ตัวไหนหรือโค้ดไหนเข้ามาช่วยในการทำงานลักษณะนี้ ถ้ามีขอตัวอย่างการใช้งานด้วยค่ะ
you're the only one treasure
-
mindphp
- ผู้ดูแลระบบ MindPHP
- โพสต์: 41251
- ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
-
ติดต่อ:
-
fonfonn
- PHP VIP Members
- โพสต์: 4983
- ลงทะเบียนเมื่อ: 11/07/2022 9:28 am
โพสต์ที่ยังไม่ได้อ่าน
โดย fonfonn »
จากการศึกษาและลองนำ
toggle มาทดลองประยุคใช้ ผลลัพธ์ที่ได้ คือ
โค้ด: เลือกทั้งหมด
<script language="javascript">
function toggle(targetId) {
target = document.all(targetId);
if (target.style.display == "none"){
target.style.display="";
} else {
target.style.display="none";
}
}
//-->
</script>
<a href="javascript:toggle('input1')"><input type="button" id="button1" value="ใส่ลายน้ำแบบข้อความ"class="btn btn-primary"></input></a>
<a href="javascript:toggle('input2')"><input type="button" id="button2" value="ใส่ลายน้ำแบบรูปภาพ"class="btn btn-primary"></input></a>
<div id="input1" style="display: none">
<label for="text-name" class="col-sm-2 col-form-label" >ข้อความ </label>
<div class="col-7">
<input type="text" id="text-watermark" class="form-control"><br><br>
</div>
</div>
</div>
</div>
<div id="input2" style="display: none">
<label for="text-name" class="col-sm-2 col-form-label" >เลือกรูป </label>
<div class="col-7">
<input type="file" id="text-watermark" accept="image/x-png,image/jpeg" class="form-control"><br><br>
</div>
</div>
</div>
</div>
- เมื่อเปิดใช้งานจะโชว์แค่ปุ่มและซ่อนฟอร์มไว้
- เมื่อเปิดใช้งาน.png (32.69 KiB) Viewed 1375 times
- เมื่อกดปุ่มแรกแบบข้อความ ฟอร์มที่1 จะปรากฎขึ้น
- เมื่อกดปุ่มแบบข้อความ.png (2.88 KiB) Viewed 1375 times
- เมื่อกดปุ่มที่2แบบรูปภาพ ฟอร์มที่2 จะปรากฎขึ้น
- เมื่อกดปุ่มแบบรูปภาพ.png (39.48 KiB) Viewed 1375 times
- แต่เมื่อเรากดทั้ง 2 ปุ่ม ฟอร์มจะขึ้นมาทั้ง 2 ฟอร์ม
- ฟอร์มขึ้นทั้ง2ฟอร์ม.png (34.77 KiB) Viewed 1375 times
คำถามเพิ่มเติมคือ เราสามารถทำให้ฟอร์มขึ้นโชว์เพียงฟอร์มเดียวได้หรือไม่ เช่น
- เมื่อเรากดปุ่มแรกแบบข้อความ ฟอร์มที่1 จะปรากฎขึ้น แต่ถ้าเรากดปุ่มที่ 2 แบบรูปภาพ ฟอร์มที่ 1 จะถูกซ่อนทันที และ ฟอร์มที่ 2 จะขึ้นโชว์แทน
ถ้ามีตัวอย่าง ขอตัวอย่างการใช้งานด้วยนะคะ
you're the only one treasure
-
MBMoo
- PHP VIP Members
- โพสต์: 25635
- ลงทะเบียนเมื่อ: 04/06/2020 10:05 am
โพสต์ที่ยังไม่ได้อ่าน
โดย MBMoo »
ลองดูตามนี้นะคะ
โค้ด: เลือกทั้งหมด
<script language="javascript">
form_old = ''
function toggle(targetId) {
target = document.all(targetId);
if (target.style.display == "none"){
target.style.display="";
if (form_old ){
form_old .style.display="none";
}
} else {
target.style.display="none";
}
form_old = target
}
</script>
-
fonfonn
- PHP VIP Members
- โพสต์: 4983
- ลงทะเบียนเมื่อ: 11/07/2022 9:28 am
โพสต์ที่ยังไม่ได้อ่าน
โดย fonfonn »
ลองนำ โค้ดที่แนะนำมาไปใช้แล้วค่ะ ได้ผลลัพธ์แบบที่ต้องการค่ะ คือ เมื่อเรากดปุ่มแรกแบบข้อความ ฟอร์มที่1 จะปรากฎขึ้น แต่ถ้าเรากดปุ่มที่ 2 แบบรูปภาพ ฟอร์มที่ 1 จะถูกซ่อนทันที และ ฟอร์มที่ 2 จะขึ้นโชว์แทน ขอบคุณค่ะ
- เมื่อเปิดใช้งาน จะขึ้นเพียง 2 ปุ่ม และซ่อนฟอร์มไว้
- เมื่อเปิดใช้งาน.png (32.69 KiB) Viewed 1351 times
- เมื่อกดปุ่มมแรก ฟอร์มแรกจะโชว์ขึ้นมา
- เมื่อกดปุ่มมแรก.png (36.93 KiB) Viewed 1351 times
- เมื่อกดปุ่มที่2 ฟอร์มที่2 จะโชว์ และฟอร์มแรกจะซ่อนทันที
- เมื่อกดปุ่มที่2.png (43.17 KiB) Viewed 1351 times
และเมื่อกลับไปกดปุ่แรกอีกครั้ง ฟอร์มแรกจะโชว์ขึ้นมา และฟอร์ม2จะซ่อนเช่นเดียวกัน
ขอบคุณมากค่ะ
you're the only one treasure
-
fonfonn
- PHP VIP Members
- โพสต์: 4983
- ลงทะเบียนเมื่อ: 11/07/2022 9:28 am
โพสต์ที่ยังไม่ได้อ่าน
โดย fonfonn »
bolue เขียน: ↑02/08/2022 6:31 pm
ใช้งานได้มั้ยคะ
ใช้งานได้แล้วค่ะ ขอบคุณค่ะ
you're the only one treasure
-
-
- 3 ตอบกลับ
- 4193 แสดง
-
โพสต์ล่าสุด โดย Sirayu
25/06/2020 3:49 pm
-
-
- 0 ตอบกลับ
- 2011 แสดง
-
โพสต์ล่าสุด โดย adinan49
06/01/2022 10:25 pm
-
-
- 0 ตอบกลับ
- 965 แสดง
-
โพสต์ล่าสุด โดย NickAriya12
08/08/2016 4:25 pm
-
-
- 0 ตอบกลับ
- 2494 แสดง
-
โพสต์ล่าสุด โดย hayatee
22/04/2021 3:08 pm
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 5