ป้องกันค่าเริ่มต้นในการส่งแบบฟอร์ม jQuery

เกิดอะไรขึ้นกับสิ่งนี้?

HTML:

<form action="http://localhost:8888/bevbros/index.php/test" method="post" accept-charset="utf-8" id="cpa-form" class="forms">        
      <input type="text" name="zip" value="Zip code" id="Zip" class="required valid">      
      <input type="submit" name="Next" value="Submit" class="forms" id="1">
  </form>

jQuery:

$("#cpa-form").submit(function(e){
    e.preventDefault();
  });

ลองสิ่งนี้:

$("#cpa-form").submit(function(e){
    return false;
});

ใช้ไวยากรณ์เหตุการณ์ "กับ" ใหม่

$(document).ready(function() {
  $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });
});

อ้างอิง: https://api.jquery.com/on/

ฉันเชื่อว่าคำตอบข้างต้นนั้นถูกต้องทั้งหมด แต่นั่นไม่ได้ชี้ให้เห็นว่าทำไมsubmitวิธีการไม่ทำงาน

ดีsubmitวิธีจะไม่ทำงานถ้า jQuery ไม่สามารถรับformองค์ประกอบและ jQuery ไม่ได้ให้ข้อผิดพลาดเกี่ยวกับเรื่องนั้น หากสคริปต์ของคุณจะอยู่ในหัวของเอกสารให้ตรวจสอบรหัสวิ่งหลังจากDOMเป็นพร้อม ดังนั้น$(document).ready(function () { // your code here // });จะแก้ปัญหา

แนวปฏิบัติที่ดีที่สุดคือวางสคริปต์ของคุณไว้ด้านล่างของเอกสารเสมอ

นี่เป็นคำถามโบราณ แต่คำตอบที่ยอมรับได้ที่นี่ไม่ได้เป็นต้นเหตุของปัญหา

คุณสามารถแก้ปัญหานี้ได้สองวิธี ครั้งแรกกับ jQuery:

$(document).ready( function() { // Wait until document is fully parsed
  $("#cpa-form").on('submit', function(e){

     e.preventDefault();

  });
}

หรือไม่มี jQuery:

// Gets a reference to the form element
var form = document.getElementById('cpa-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {

  e.preventDefault();

});

คุณไม่จำเป็นต้องใช้return falseเพื่อแก้ปัญหานี้

$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});

$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});

รหัสของคุณใช้ได้เพียงคุณวางมันไว้ในฟังก์ชั่นที่พร้อมใช้งาน

$(document).ready( function() {
  $("#cpa-form").submit(function(e){
     e.preventDefault();
  });
}

เลิกใช้แล้ว - ส่วนนี้ล้าสมัยดังนั้นโปรดอย่าใช้

คุณสามารถลองใช้รหัสนี้ได้เช่นหากคุณเพิ่มฟอร์มแบบไดนามิกในภายหลัง ตัวอย่างเช่นคุณโหลดหน้าต่าง async ด้วย ajax และต้องการส่งแบบฟอร์มนี้

$('#cpa-form').live('submit' ,function(e){
    e.preventDefault();      
    // do something
});

อัพเดท - คุณควรใช้วิธี jQuery on () และลองฟัง DOM เอกสารหากคุณต้องการจัดการเนื้อหาที่เพิ่มเข้ามาแบบไดนามิก

กรณีที่ 1 รุ่นคงที่: หากคุณมีผู้ฟังเพียงไม่กี่คนและรูปแบบการจัดการของคุณคือฮาร์ดโค้ดคุณสามารถฟังได้โดยตรงที่ "ระดับเอกสาร" ฉันจะไม่ใช้ผู้ฟังในระดับเอกสาร แต่ฉันจะพยายามทำให้ลึกลงไปในแผนภูมิการลงโทษเนื่องจากอาจนำไปสู่ปัญหาด้านประสิทธิภาพ (ขึ้นอยู่กับขนาดของเว็บไซต์และเนื้อหาของคุณ)

$('form#formToHandle').on('submit'... 

หรือ

$('form#formToHandle').submit(function(e) {
    e.preventDefault();      
    // do something
});

กรณีที่ 2 รุ่นไดนามิก:หากคุณได้ฟังเอกสารในรหัสของคุณแล้ววิธีนี้จะดีสำหรับคุณ สิ่งนี้จะทำงานกับรหัสที่เพิ่มในภายหลังผ่าน DOM หรือไดนามิกด้วย AJAX

$(document).on('submit','form#formToHandle',function(){
   // do something like e.preventDefault(); 
});

หรือ

$(document).ready(function() {
    console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

หรือ

$(function() { // <- this is shorthand version
   console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

สวัสดีหาวิธีแก้ปัญหาเพื่อให้แบบฟอร์ม Ajax ทำงานร่วมกับ Google เครื่องจัดการแท็ก (GTM) ผลตอบแทนเท็จป้องกันไม่ให้เสร็จสมบูรณ์และส่งการเปิดใช้งานของเหตุการณ์ในเวลาจริงในโซลูชันการวิเคราะห์ของ Google คือการเปลี่ยนผลตอบแทนเท็จโดย e.preventDefault () ; ที่ทำงานอย่างถูกต้องตามรหัส:

 $("#Contact-Form").submit(function(e) {
    e.preventDefault();
   ...
});

e.preventDefault () ทำงานได้ดีเฉพาะในกรณีที่คุณไม่มีปัญหาเกี่ยวกับจาวาสคริปต์ตรวจสอบจาวาสคริปต์ของคุณหาก e.preventDefault () ใช้งานไม่ได้โอกาสที่ส่วนอื่น ๆ ของ JS ของคุณไม่ทำงานด้วย

ฉันเจอปัญหาที่คล้ายกัน ปัญหาสำหรับฉันคือไฟล์ JS โหลดก่อนที่การเรนเดอร์ DOM จะเกิดขึ้น ดังนั้นเลื่อนคุณ<script>ไปที่ท้าย<body>แท็ก

หรือเลื่อนการใช้งาน

<script defer src="">

ดังนั้นโปรดมั่นใจได้ว่าe.preventDefault()ควรทำงาน