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


138

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

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();
  });

12
ทำงานได้ดีที่นี่ คุณสามารถโพสต์ข้อมูลเพิ่มเติมในคำถามของคุณ? หากคุณalert()อยู่ในตัวจัดการการส่งจะถูกเรียก? ถ้าไม่เช่นนั้นอาจเป็นไปได้ว่ามีข้อผิดพลาดในสคริปต์ของคุณที่ป้องกันไม่ให้ตัวจัดการเหตุการณ์เชื่อมต่ออย่างถูกต้อง มีอะไรในคอนโซลข้อผิดพลาดบ้าง
เมือง

3
ลิงค์นั้นเป็นสิ่งภายในและไม่เป็นประโยชน์ต่อเรา
Steve Robbins

อาจเป็นรุ่นที่เก่ากว่าแคช ดูเหมือนว่าจะทำงานตอนนี้
djreed


2
! ตรวจสอบให้แน่ใจว่าโค้ดจาวาสคริปต์ทำงานหลังจากที่ DOM พร้อม
Towry

คำตอบ:


175

ลองสิ่งนี้:

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

12
มันใช้งานได้ แต่ทำไมวิธีที่ต้องการของ PreventDefault ไม่ทำงาน
MikeJ

26
ดูคำถามนี้สำหรับคำอธิบายที่ดีกว่า: stackoverflow.com/questions/1357118/…
Jordan Brown

8
นี่คือคำตอบที่ผิด e.preventDefault()ทำงานได้ดีกับการส่งแบบฟอร์มปัญหาอยู่ที่อื่นในรหัสของ OP การใช้return false อาจส่งผลให้เกิดผลที่ไม่ตั้งใจ
Chuck Le Butt

58

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

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

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


2
สวัสดี มันไม่ได้ผลสำหรับฉัน (ใช่ฉันใส่รหัสของฉัน$(document).ready()) ฉันจะทำให้มันทำงานอย่างไร
Gui Imamura

1
@GuiImamura ต้องการข้อมูลเพิ่มเติม คุณตั้งค่าตัวแปรที่ถูกต้องเป็นtrueหรือfalse? คุณสามารถสร้างรหัสของคุณใหม่ใน jsfiddle.net และส่งลิงค์ได้หรือไม่ ลองเพิ่มalert()เพื่อยืนยันว่าฟังก์ชันกำลังเริ่มทำงาน บางคนรายงานว่าการเพิ่มe.stopPropagation();หลังจากe.preventDefault();หยุดเหตุการณ์ที่ถูกล่ามโซ่อื่น ๆ จากการยิง
scarver2

สวัสดีฉันใช้$('#myFormID').validationEngine('validate')จากjQuery validationEngineเป็นตัวแปรvalidในการตรวจสอบสภาพอากาศเข้าเป็นที่อยู่อีเมลที่ถูกต้อง อย่างไรก็ตามฉันต้องการให้มันป้องกันพฤติกรรมเริ่มต้นด้วยวิธีใดวิธีหนึ่ง จะpreventDefaultต้องอยู่ข้างในบล็อก if ไม่ใช่ก่อนหรือไม่
Gui Imamura

@GuiImamura ดีใจที่ได้ยินว่าคุณใช้งานได้ preventDefaultอยู่ภายในถ้าไม่ถูกต้องบล็อกที่จะหยุดการส่งของแบบฟอร์ม กล่าวอีกนัยหนึ่งถ้าถูกต้องใช้พฤติกรรมเริ่มต้นของแบบฟอร์ม
scarver2

13

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

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

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


11

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

คุณสามารถแก้ปัญหานี้ได้สองวิธี ครั้งแรกกับ 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เพื่อแก้ปัญหานี้


ฉันแทนที่ฟังเหตุการณ์ js ดั้งเดิมแทนฟังเหตุการณ์ jquery และใช้งานได้ ขอบคุณสำหรับความคิด
Orhan Gazi

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

สิ่งนี้ทำงานได้อย่างสมบูรณ์แบบสำหรับฉันบนหน้าเว็บที่ฉันมีแบบฟอร์มฝั่งไคลเอ็นต์ภายในแบบฟอร์มฝั่งเซิร์ฟเวอร์
Liknes


2

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

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

คำแนะนำนี้มีให้โดยคำตอบอื่น ๆ โปรดลบคำตอบนี้เพื่อลดการขยายหน้า คุณสามารถโหวตคำตอบอื่น ๆ ที่แสดงถึงความรู้สึกเดียวกันได้
mickmackusa

2

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

คุณสามารถลองใช้รหัสนี้ได้เช่นหากคุณเพิ่มฟอร์มแบบไดนามิกในภายหลัง ตัวอย่างเช่นคุณโหลดหน้าต่าง 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           
    })
});

7
.live()เลิกใช้ตั้งแต่ jQuery 1.7 และถูกลบตั้งแต่ 1.9 ใช้.on()แทน
แฮงค์

0

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

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

0

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


0

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

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

<script defer src="">

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.