สอบถามการซ่อนฟอร์ม ใน HTML

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

สอบถามการซ่อนฟอร์ม ใน HTML

โพสต์ที่ยังไม่ได้อ่าน โดย fonfonn »

ในการออกแบบหน้าของ HTML ที่มีการสร้างฟอร์มไว้หลายฟอร์ม แต่อยากให้โชว์แค่ฟอร์มที่เราต้องการใช้งาน
หลักการทำงานคือ เมื่อเปิดใช้งานหน้า HTML ฟอร์มจะถูกซ่อนไว้ก่อน แต่เมื่อเรากดปุ่มใดปุ่มหนึ่งหรือที่ข้อความใดข้อความหนึ่ง ฟอร์มที่กำหนดจะปรากฎขึ้น
ตัวอย่างเช่น
  • เราต้องการซ่อนฟอร์มในการ Input ชื่อ โดยเมื่อเปิดหน้า HTML ขึ้นมาครั้งแรกจะไม่เห็นช่อง Input ชื่อ แต่จะเห็นเพียงปุ่มหรือข้อความ เมื่อทำการกดที่ปุ่มหรือข้อความนั้น ฟอร์มจะโชว์ขึ้นมา อยากสอบถามว่า เราสารมารถใช้ตัวไหนหรือโค้ดไหนเข้ามาช่วยในการทำงานลักษณะนี้ ถ้ามีขอตัวอย่างการใช้งานด้วยค่ะ
you're the only one treasure💎
ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

Re: สอบถามการซ่อนฟอร์ม ใน HTML

โพสต์ที่ยังไม่ได้อ่าน โดย 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
    เมื่อเปิดใช้งาน.png (32.69 KiB) Viewed 1375 times
  • เมื่อกดปุ่มแรกแบบข้อความ ฟอร์มที่1 จะปรากฎขึ้น
    เมื่อกดปุ่มแบบข้อความ.png
    เมื่อกดปุ่มแบบข้อความ.png (2.88 KiB) Viewed 1375 times
  • เมื่อกดปุ่มที่2แบบรูปภาพ ฟอร์มที่2 จะปรากฎขึ้น
    เมื่อกดปุ่มแบบรูปภาพ.png
    เมื่อกดปุ่มแบบรูปภาพ.png (39.48 KiB) Viewed 1375 times
  • แต่เมื่อเรากดทั้ง 2 ปุ่ม ฟอร์มจะขึ้นมาทั้ง 2 ฟอร์ม
    ฟอร์มขึ้นทั้ง2ฟอร์ม.png
    ฟอร์มขึ้นทั้ง2ฟอร์ม.png (34.77 KiB) Viewed 1375 times
คำถามเพิ่มเติมคือ เราสามารถทำให้ฟอร์มขึ้นโชว์เพียงฟอร์มเดียวได้หรือไม่ เช่น
  • เมื่อเรากดปุ่มแรกแบบข้อความ ฟอร์มที่1 จะปรากฎขึ้น แต่ถ้าเรากดปุ่มที่ 2 แบบรูปภาพ ฟอร์มที่ 1 จะถูกซ่อนทันที และ ฟอร์มที่ 2 จะขึ้นโชว์แทน
ถ้ามีตัวอย่าง ขอตัวอย่างการใช้งานด้วยนะคะ
you're the only one treasure💎
ภาพประจำตัวสมาชิก
MBMoo
PHP VIP Members
PHP VIP Members
โพสต์: 25635
ลงทะเบียนเมื่อ: 04/06/2020 10:05 am

Re: สอบถามการซ่อนฟอร์ม ใน HTML

โพสต์ที่ยังไม่ได้อ่าน โดย 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>
ภาพประจำตัวสมาชิก
MBMoo
PHP VIP Members
PHP VIP Members
โพสต์: 25635
ลงทะเบียนเมื่อ: 04/06/2020 10:05 am

Re: สอบถามการซ่อนฟอร์ม ใน HTML

โพสต์ที่ยังไม่ได้อ่าน โดย MBMoo »

ใช้งานได้มั้ยคะ
ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

Re: สอบถามการซ่อนฟอร์ม ใน HTML

โพสต์ที่ยังไม่ได้อ่าน โดย fonfonn »

ลองนำ โค้ดที่แนะนำมาไปใช้แล้วค่ะ ได้ผลลัพธ์แบบที่ต้องการค่ะ คือ เมื่อเรากดปุ่มแรกแบบข้อความ ฟอร์มที่1 จะปรากฎขึ้น แต่ถ้าเรากดปุ่มที่ 2 แบบรูปภาพ ฟอร์มที่ 1 จะถูกซ่อนทันที และ ฟอร์มที่ 2 จะขึ้นโชว์แทน ขอบคุณค่ะ
  • เมื่อเปิดใช้งาน จะขึ้นเพียง 2 ปุ่ม และซ่อนฟอร์มไว้
    เมื่อเปิดใช้งาน.png
    เมื่อเปิดใช้งาน.png (32.69 KiB) Viewed 1351 times
  • เมื่อกดปุ่มมแรก ฟอร์มแรกจะโชว์ขึ้นมา
    เมื่อกดปุ่มมแรก.png
    เมื่อกดปุ่มมแรก.png (36.93 KiB) Viewed 1351 times
  • เมื่อกดปุ่มที่2 ฟอร์มที่2 จะโชว์ และฟอร์มแรกจะซ่อนทันที
    เมื่อกดปุ่มที่2.png
    เมื่อกดปุ่มที่2.png (43.17 KiB) Viewed 1351 times
และเมื่อกลับไปกดปุ่แรกอีกครั้ง ฟอร์มแรกจะโชว์ขึ้นมา และฟอร์ม2จะซ่อนเช่นเดียวกัน
ขอบคุณมากค่ะ
you're the only one treasure💎
ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

Re: สอบถามการซ่อนฟอร์ม ใน HTML

โพสต์ที่ยังไม่ได้อ่าน โดย fonfonn »

bolue เขียน: 02/08/2022 6:31 pm ใช้งานได้มั้ยคะ
ใช้งานได้แล้วค่ะ ขอบคุณค่ะ
you're the only one treasure💎
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 5