ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: Design-View ที่ 28 สิงหาคม 2018, 07:42:58



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

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

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


หัวข้อ: Re: สอบถามเกี่ยวกับฟอร์มติดต่อเราและบันทึกในไฟล์เดียวกันครับ
เริ่มหัวข้อโดย: sinomoney ที่ 28 สิงหาคม 2018, 09:50:18
Bootstrap Modal  ครับ
https://getbootstrap.com/docs/4.0/components/modal/


หัวข้อ: Re: สอบถามเกี่ยวกับฟอร์มติดต่อเราและบันทึกในไฟล์เดียวกันครับ
เริ่มหัวข้อโดย: sputtaro ที่ 28 สิงหาคม 2018, 12:25:57
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>

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