สอบถามเกี่ยวกับฟอร์มติดต่อเราและบันทึกในไฟล์เดียวกันครับ

[Design-View]

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

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

ขอบคุณมากครับ

[sinomoney]

Bootstrap Modal  ครับ
https://getbootstrap.com/docs/4.0/components/modal/

[sputtaro]

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

ลองดูที่นี่นะครับ เผื่อเอาไปปรับใช้ (ผมค้นเจอ อ่านโค๊ด แล้วมาบอกคุณ)
http://reusableforms.com/d/p4/contact-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>

หวังว่ามันจะได้ผลนะครับ