ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingสอบถามเกี่ยวกับฟอร์มติดต่อเราและบันทึกในไฟล์เดียวกันครับ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: สอบถามเกี่ยวกับฟอร์มติดต่อเราและบันทึกในไฟล์เดียวกันครับ  (อ่าน 977 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
Design-View
Newbie
*

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 10



ดูรายละเอียด
« เมื่อ: 28 สิงหาคม 2018, 07:42:58 »

ผมสร้าง contact form ใน bootstrap แล้ว ต้องการกด Submit แล้วเด้งหน้าประมาณ fancybox (พื้นหลังมืดจางๆ) แล้วมีข้อความหรือกล่องข้อความขึ้น่า บันทึกเรียบร้อยแล้ว ไม่น่าจะเกิน 2 วิ ห็หายไปแล้วรีเฟรซหน้า contact form หน้าเดิม เคลียร์ช่อง input ให้ว่าง

ขอทราบแนวทางและแนการเขียนทีคับ

ขอบคุณมากครับ
 wanwan017 wanwan017
บันทึกการเข้า
sinomoney
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 202
ออฟไลน์ ออฟไลน์

กระทู้: 2,534



ดูรายละเอียด
« ตอบ #1 เมื่อ: 28 สิงหาคม 2018, 09:50:18 »

Bootstrap Modal  ครับ
https://getbootstrap.com/docs/4.0/components/modal/
บันทึกการเข้า

โปรแกรมโพสเว็บบอร์ด ระบบโพสบน Server ไม่ต้องติดตั้ง ทดลองฟรี
โปรแกรมทำ Backlink CommentBlog ใช้งานบนเว็บ ทดลองฟรี
sputtaro
สมุนแก๊งเสียว
*

พลังน้ำใจ: 139
ออฟไลน์ ออฟไลน์

กระทู้: 910



ดูรายละเอียด
« ตอบ #2 เมื่อ: 28 สิงหาคม 2018, 12:25:57 »

Bootstrap modal ตามที่ท่านด้านบนบอกเลยครับ

ลองดูที่นี่นะครับ เผื่อเอาไปปรับใช้ (ผมค้นเจอ อ่านโค๊ด แล้วมาบอกคุณ)
http://reusableforms.com/d/p4/...ontact-form-in-bootstrap-modal


ผมลองทดสอบ preview the form ลองดูแล้ว ตรง success_message เมื่อแสดงแล้ว มันไม่ปิดเอง นอกจากคุณคลิ๊กที่อื่นๆ มันถึงจะกลับมาที่ฟอร์ม
หากคุณต้องการให้มันแสดง แล้วปิดเอง ลองใส่โค๊ดนี้ดู เผื่อได้ (ผมยังไม่ได้ลองนะ เพราะเครื่องที่ผมใช้งานตอนนี้ มันไม่สะดวก)

ให้เพิ่ม $('#success_message').hide(); ต่อจาก

            $('form#reused_form').hide();
            $('#success_message').show();
            $('#error_message').hide();

ซึ่งจะกลายเป็น

            $('form#reused_form').hide();
            $('#success_message').show();
            $('#error_message').hide();
            $('#success_message').hide();

คำสั่ง $('#success_message').hide(); จะใช้ในการปิด element id="success_message" ซึ่งอยู่ใน HTML Code ตรงใต้ </form>
ที่เขียนว่า

<div id="success_message" style="width:100%; height:100%; display:none; ">
        <h3>Sent your message successfully!</h3>
    </div>

หวังว่ามันจะได้ผลนะครับ
« แก้ไขครั้งสุดท้าย: 28 สิงหาคม 2018, 20:28:33 โดย sputtaro » บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์