สอบถามเกี่ยวการใช้งาน event.preventDefault();

[flook]

เบื้องต้นผมต้องการ ให้ เข้าใช้งาน setimagebase64() เสร็จค่อย submit(); แต่หลังจากที่เขียนแบบนี้ทำให้ ไม่มีการโหลด submit ครับมีวิธีแก้ไขไหมครับ

โค้ด: เลือกทั้งหมด

<form id="ucp" method="post" action="./ucp.php?i=ucp_profile&amp;mode=reg_details" enctype="multipart/form-data">
  <input type="submit" name="submit" id="submit1" value="บันทึก" class="button1 default-submit-action">
</form>

 <script>
                $('#submit1').on('click', function (event) {
                        console.log('test');
                        event.preventDefault();
                        setimagebase64()
                        $('#ucp').submit();
                });
 </script>
 

[eange08]

เปลี่ยนจากเรียก element เป็น id ของ form แทนก็ได้ค่ะ

โค้ด: เลือกทั้งหมด

postform.submit();

[flook]

เปลี่ยนจากเรียก element เป็น id ของ form แทนก็ได้ค่ะ

โค้ด: เลือกทั้งหมด

postform.submit();

ผมใช้ id ของ form เรียกใช้ submit อยู่ครับ

โค้ด: เลือกทั้งหมด

$('#ucp').submit();

[eange08]

เปลี่ยนจากเรียก element เป็น id ของ form แทนก็ได้ค่ะ

โค้ด: เลือกทั้งหมด

postform.submit();

ผมใช้ id ของ form เรียกใช้ submit อยู่ครับ

โค้ด: เลือกทั้งหมด

$('#ucp').submit();

จากตัวอย่างที่ให้ไปจะเป็น form ในหน้าโพสต์ ส่วนนี้เรียกใช้แบบนี้ค่ะ

โค้ด: เลือกทั้งหมด

ucp.submit();

[flook]

เปลี่ยนจากเรียก element เป็น id ของ form แทนก็ได้ค่ะ

โค้ด: เลือกทั้งหมด

postform.submit();

ผมใช้ id ของ form เรียกใช้ submit อยู่ครับ

โค้ด: เลือกทั้งหมด

$('#ucp').submit();

จากตัวอย่างที่ให้ไปจะเป็น form ในหน้าโพสต์ ส่วนนี้เรียกใช้แบบนี้ค่ะ

โค้ด: เลือกทั้งหมด

ucp.submit();

ลองเขียนตามขึั้น

โค้ด: เลือกทั้งหมด

  $('#submit1').on('click', function (event) {
                        console.log('test');
                        event.preventDefault();
                        setimagebase64();
                      
                       ucp.submit();
                });

ขึ้น error ครับ

โค้ด: เลือกทั้งหมด

ucp.php?i=ucp_profile&mode=reg_details:505 Uncaught TypeError: ucp.submit is not a function
    at HTMLInputElement.<anonymous> (ucp.php?i=ucp_profile&mode=reg_details:505:29)
    at HTMLInputElement.dispatch (jquery.min.js:2:43090)
    at v.handle (jquery.min.js:2:41074)

[eange08]

ลองใช้จาก on click เป็น on submit ที่ฟอร์มแทน
และเอา event.preventDefault(); ออกเพราะจะเป็นตัวหยุดไม่ให้ submit ต่อค่ะ

โค้ด: เลือกทั้งหมด

$('#ucp').on('submit', function () {
    example();
});
function example(){
    $('input[name="submit"]').hide();
}

[flook]

ลองใช้จาก on click เป็น on submit ที่ฟอร์มแทน
และเอา event.preventDefault(); ออกเพราะจะเป็นตัวหยุดไม่ให้ submit ต่อค่ะ

โค้ด: เลือกทั้งหมด

$('#ucp').on('submit', function () {
    example();
});
function example(){
    $('input[name="submit"]').hide();
}

ลองทำตามแล้ว ฟั่งชั่น setimagebase64 ทำงานยังไม่เสร็จ เกิดการ โหลดหน้าใหม่ก่อนมีวิธีแก้ไขไหมครับ

โค้ด: เลือกทั้งหมด

$('#ucp').on('submit', function () {
    setimagebase64();
});

[flook]

ลองใช้จาก on click เป็น on submit ที่ฟอร์มแทน
และเอา event.preventDefault(); ออกเพราะจะเป็นตัวหยุดไม่ให้ submit ต่อค่ะ

โค้ด: เลือกทั้งหมด

$('#ucp').on('submit', function () {
    example();
});
function example(){
    $('input[name="submit"]').hide();
}

ลองทำตามแล้ว ฟั่งชั่น setimagebase64 ทำงานยังไม่เสร็จ เกิดการ โหลดหน้าใหม่ก่อนมีวิธีแก้ไขไหมครับ

โค้ด: เลือกทั้งหมด

$('#ucp').on('submit', function () {
    setimagebase64();
});

ผมต้องการให้ ฟั่งชั่น setimagebase64 ทำงานเสร็จก่อนค่อยมีการโหลดหน้าครับ สามารถทำอย่างไรได้บ้างครับ

[flook]

สอบถามเพิ่มเติมครับ
ผมเขียน code แบบนี้

โค้ด: เลือกทั้งหมด

        var form = document.querySelector("#ucp");
        form.addEventListener("submit", function (evt) {
               evt.preventDefault();
                form.submit();
     
        });

ทำให้ เกิด error แบบนี้ครับ

Screenshot 2023-09-19 151214.png (25.04 KiB) Viewed 3159 times

โค้ด: เลือกทั้งหมด

ucp.php?i=ucp_profile&mode=reg_details:482 Uncaught TypeError: form.submit is not a function
    at HTMLFormElement.<anonymous> (ucp.php?i=ucp_profile&mode=reg_details:482:22)

โดยเป็นเฉพาะใช้ evt.preventDefault();

ทำไมหลังใช้งาน evt.preventDefault(); ถึงเกิด TypeError ส่วนนี้ขึั้นครับ พอทราบสาเหตุไหมครับ

[flook]

สอบถามเพิ่มเติมครับ
ผมเขียน code แบบนี้

โค้ด: เลือกทั้งหมด

        var form = document.querySelector("#ucp");
        form.addEventListener("submit", function (evt) {
               evt.preventDefault();
                form.submit();
     
        });

ทำให้ เกิด error แบบนี้ครับ
Screenshot 2023-09-19 151214.png

โค้ด: เลือกทั้งหมด

ucp.php?i=ucp_profile&mode=reg_details:482 Uncaught TypeError: form.submit is not a function
    at HTMLFormElement.<anonymous> (ucp.php?i=ucp_profile&mode=reg_details:482:22)

โดยเป็นเฉพาะใช้ evt.preventDefault();

ทำไมหลังใช้งาน evt.preventDefault(); ถึงเกิด TypeError ส่วนนี้ขึั้นครับ พอทราบสาเหตุไหมครับ

เพื่อแก้ไขปัญหาส่วนนี้
ผมปรับวิธีการเขียนใหม่ ไม่ใช้งาน event.preventDefault(); เลย
เปลี่ยนเป็นใช้งานสร้างปุ่มมา 1 ปุ่มเพื่อคลิกสำหรับไปทำงานฟั่งชั่นที่เราต้องการให้ทำ
หลังจากนั้นค่อยใช้งานคำสั่ง click เพื่อกด submit หลังจากที่ทำงาน ฟั่งชั่นที่เราต้องการให้ทำงานเสร็จ