วิธีการสร้าง form เมื่อกดปุ่ม โดยใช้ javascript


Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 3176
Joined: 19/09/2018 10:33 am

วิธีการสร้าง form เมื่อกดปุ่ม โดยใช้ javascript

Post by Ittichai_chupol » 19/11/2019 6:09 pm

ในการพัฒนาเว็บไซต์ให้ดูมีความน่าสนใจ ในการใช้งานนั้นควรที่จะใช้ภาษาในการพัฒนามากกว่า 1 ภาษาเข้ามาช่วยในการพัฒนา เพื่อทั้งนี้ให้ผู้ที่พัฒนานั้นลดขั้นตอนการทำงานลงได้ ร่วมทั้งยังจะสามารถที่จะเพิ่มลูกเล่น อำนวยความสะดวกให้แก่ผู้ที่ใช้งานด้วย โดยภาษาคอมพิวเตอร์ที่จะใช้ในสวนความส่วนงามนั้น ส่วนใหญ่ก็คือ css แล้วส่วนภาษาที่จะนำมาแสดงผลนั้นก็คือ html หรือภาษาที่จะเป็นส่วนการทำงานด้านข้อมูลต่างๆ ก็คือ php หรือ ภาษาอื่นๆ ซึ่งทั้งนี้ในส่วนของภาษาที่นำมาช่วยเพิ่มลูกเล่นหรือฟังชั่นการทำงานต่างๆให้กับเว็บไซต์ของเรานั้นดูดั ขึ้น ก็คือ javascript

javascript นั้นสามารถที่จะมาช่วยเพิ่มการทำงานและการพัฒนาเว็บไซต์ ของเราได้มากมาย และหนึ่งในนั้นก็คือ การสร้าง form เพิ่มเข้าเสริมให้ ในกรณีที่ได้กดปุ่ม โดยการสร้างโคดก็มีตัวอย่างดังนี้

1.ส่วนที่เป็นปุ่มสำหรับการคลิก เพื่อสร้าง form

Code: Select all

       
         <div class="sub_style"> 

                        <div class="action-bar bar-bottom">

                            <a  class="reply_sub_com2 buttom button" title="Replied Posts">
                                <span>{L_RETURN_SUB}</span> <i class="icon fa-reply fa-fw" aria-hidden="true"></i>
                            </a>

                        </div>
                    </div>
                    
2.สร้างของ javascript จะสร้าง form เพิ่มซึ่งจะทำงานเมื่อมีการคลิก

Code: Select all

    $(document).on('click', '.reply_sub_com2', function () {
        var post = $(this).closest('.post.has-profile2');
        $(post).after('<div class="box-sub-comment" ></div>');
        var box = $('.box-sub-comment');
        var html = '<br> ' + title + '<br><div class="box-sub-comment-inner" >
        <form action=" "> <textarea rows="12" cols="75" name="message"> </textarea> <br><br>  <input type="submit" value="">  <input class="sub_com_closed"  type="button" value=" "> </form></div> <br>';
        $(box).append(html);

        $(box).slideDown();

    });
ตัวอย่างผลลัพธ์
วิธีการสร้าง form เมื่อกดปุ่ม โดยใช้ javascript ezgif.com-video-to-gif (3).gif
ezgif.com-video-to-gif (3).gif (62.17 KiB) Viewed 40 times

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 2 guests