ป้องกันไม่ให้เว็บฟอร์มส่งเมื่อคลิกปุ่มในส่วนประกอบมาร์กอัป

ฉันมีเว็บฟอร์มที่ซับซ้อนมากในเว็บไซต์ Drupal 7 ที่ฉันสืบทอดมา ฉันได้เพิ่มส่วนประกอบมาร์กอัปซึ่งสร้างปุ่มและเพิ่ม JS บางตัวที่เชื่อมโยงปุ่มนี้เพื่อทริกเกอร์หน้าต่างโมดอลให้เปิดขึ้น ในโมดอล บล็อกจะปรากฏขึ้นซึ่งมีมุมมองที่แสดงรายการโปรไฟล์ผู้ใช้บางส่วน

เมื่อฉันไปที่เว็บฟอร์ม ทุกอย่างทำงานได้ตามปกติ และฉันสามารถคลิกปุ่มเพื่อเปิดโมดอลได้ แต่เมื่อกลับมาที่การส่งร่างอีกครั้ง ปุ่มจะทริกเกอร์เว็บฟอร์มให้ส่ง ฉันได้ค้นหาคำตอบและลองทำสิ่งต่าง ๆ มากมาย แต่ดูเหมือนจะไม่มีอะไรหยุดปุ่มส่งแบบฟอร์มได้ หากฉันเปลี่ยนมาร์กอัปเพื่อใช้แท็กอื่น เช่น แท็ก span ก็จะไม่ส่ง มาร์กอัปจะเหมือนกันทุกประการในแบบฟอร์มทั้งสอง (การส่งครั้งแรกและการแก้ไขแบบร่าง) แต่ลักษณะการทำงานต่างกัน!

คำถามคือ มีใครทราบวิธีป้องกันไม่ให้ปุ่มในส่วนประกอบมาร์กอัปส่งแบบฟอร์มที่อยู่ข้างในหรือไม่

แบบฟอร์มมีขนาดใหญ่มาก ดังนั้นฉันไม่คิดว่ามันมีประโยชน์ที่จะโพสต์มาร์กอัปของสิ่งทั้งหมดที่นี่ แต่ปุ่มมีลักษณะดังนี้:

<button id="ref-1-modal-trigger" class="ref-modal-trigger button--gold" data-ref-number="1">Button Name</button>

และ JS มีลักษณะดังนี้:

// รับปุ่มที่เปิด modal
        var btnRef1 = document.getElementById("ref-1-modal-ทริกเกอร์");
// เมื่อผู้ใช้คลิกที่ปุ่ม ให้เปิด modal
        btnRef1.onclick = ฟังก์ชัน () {
            refNumber = btnRef1.getAttribute("ข้อมูล-ref-number");
            modalRef1.style.display = "บล็อก";
            modalRef1.setAttribute('data-ref-number', refNumber);
        }

พื้นฐานของโครงการ:

• ดรูพัล 7
• โมดูลเว็บฟอร์ม

ขอบคุณล่วงหน้า!