Mencegah Default pada Pengiriman Formulir jQuery


143

Ada apa dengan ini?

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
Bekerja dengan baik di sini . Bisakah Anda memposting lebih banyak informasi dalam pertanyaan Anda? Jika Anda alert()dalam penangan kirim, apakah itu dipanggil? Jika tidak, maka bisa jadi ada kesalahan dalam skrip Anda yang mencegah pengendali kejadian terhubung dengan benar. Apa saja di konsol kesalahan?
Kota

3
Tautan itu bersifat internal dan tidak berguna bagi kami.
Steve Robbins

Mungkin versi yang lebih lama di-cache. Sepertinya bekerja sekarang.
djreed


2
! Pastikan kode javascript dijalankan setelah DOM siap.
Towry

Jawaban:


180

Coba ini:

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

13
Ini berfungsi, tetapi mengapa metode preventDefault yang disukai tidak berfungsi?
MikeJ

26
Lihat pertanyaan ini untuk penjelasan yang lebih baik: stackoverflow.com/questions/1357118/…
Jordan Brown

9
Ini jawaban yang salah. e.preventDefault()berfungsi dengan baik dengan penyerahan formulir, masalahnya terletak di tempat lain di kode OP. Penggunaan return false dapat mengakibatkan konsekuensi yang tidak diinginkan.
Chuck Le Butt

60

Gunakan sintaks acara "on" yang baru.

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

Kutip: https://api.jquery.com/on/


2
Hai. Ini tidak berhasil untuk saya. (ya, saya memasukkan kode saya $(document).ready()) Bagaimana cara membuatnya bekerja?
Gui Imamura

1
@GuiIamura Butuh info lebih lanjut. Apakah Anda menetapkan variabel valid ke trueatau false? Dapatkah Anda membuat ulang kode Anda di jsfiddle.net dan mengirimkan tautannya? Coba tambahkan alert()untuk mengonfirmasi bahwa fungsi sedang aktif. Beberapa orang telah melaporkan bahwa menambahkan e.stopPropagation();setelah e.preventDefault();menghentikan peristiwa yang dirantai lainnya agar tidak menembak.
scarver2

Halo, saya menggunakan $('#myFormID').validationEngine('validate')dari jQuery validationEngine sebagai variabel valid, untuk memeriksa apakah masukan adalah alamat email yang valid. Namun demikian, saya ingin mencegah perilaku default; apakah preventDefaultharus berada di dalam blok if, bukan sebelumnya?
Gui Imamura

@GuiImamura Senang mendengar Anda membuatnya bekerja. Ada preventDefaultdi dalam blok jika tidak valid untuk menghentikan pengiriman formulir. Dengan kata lain, jika valid , gunakan perilaku default formulir.
scarver2

14

Ini adalah pertanyaan kuno, tetapi jawaban yang diterima di sini tidak benar-benar sampai ke akar masalahnya.

Anda bisa menyelesaikannya dengan dua cara. Pertama dengan jQuery:

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

     e.preventDefault();

  });
})

Atau tanpa 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();

});

Anda tidak perlu menggunakan return falseuntuk memecahkan masalah ini.


Saya mengganti pendengar acara js asli dan bukan pendengar acara jquery dan itu berfungsi. terima kasih atas ide.
Orhan Gazi

13

Saya percaya bahwa jawaban di atas semuanya benar, tetapi itu tidak menunjukkan mengapa submitmetode tersebut tidak berhasil.

Nah, submitmetode ini tidak akan berfungsi jika jQuery tidak bisa mendapatkan formelemennya, dan jQuery tidak memberikan kesalahan apa pun tentang itu. Jika naskah Anda ditempatkan di kepala dokumen, pastikan kode berjalan setelah DOMini siap . Jadi, $(document).ready(function () { // your code here // });akan menyelesaikan masalah.

Praktik terbaiknya adalah, selalu letakkan skrip Anda di bagian bawah dokumen.


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

Ini berfungsi sempurna untuk saya di halaman di mana saya memiliki formulir sisi klien di dalam formulir sisi server.
Suka


2

Kode Anda Baik-Baik saja, Anda hanya perlu menempatkannya di dalam fungsi ready.

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

Nasihat ini sudah disediakan oleh jawaban lain. Hapus jawaban ini untuk mengurangi pembengkakan halaman. Anda dapat memberi suara positif pada jawaban lain yang mewakili sentimen yang sama.
mickmackusa

2

TIDAK DIGUNAKAN LAGI - bagian ini sudah usang, jadi jangan gunakan.

Anda juga dapat mencoba kode ini, jika Anda memiliki misalnya nanti menambahkan formulir dinamis. Misalnya Anda memuat jendela async dengan ajax dan ingin mengirimkan formulir ini.

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

UPDATE - Anda harus menggunakan metode jQuery on () untuk mencoba mendengarkan DOM dokumen jika Anda ingin menangani konten yang ditambahkan secara dinamis.

Kasus 1, versi statis: Jika Anda hanya memiliki sedikit pendengar dan formulir yang harus ditangani adalah hardcode, maka Anda dapat mendengarkan langsung di "level dokumen". Saya tidak akan menggunakan pendengar pada level dokumen tetapi saya akan mencoba lebih dalam di pohon malapetaka karena dapat menyebabkan masalah kinerja (tergantung pada ukuran situs web Anda dan konten Anda)

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

ATAU

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

Kasus 2, versi dinamis: Jika Anda sudah mendengarkan dokumen dalam kode Anda, maka cara ini akan baik untuk Anda. Ini juga akan berfungsi untuk kode yang ditambahkan kemudian melalui DOM atau dinamis dengan AJAX.

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

ATAU

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

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

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

ATAU

$(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()tidak digunakan lagi sejak jQuery 1.7 dan dihapus sejak 1.9. Gunakan .on()sebagai gantinya.
Hank

1

Halo mencari solusi untuk membuat formulir Ajax berfungsi dengan Google Tag Manager (GTM), pengembalian salah mencegah penyelesaian dan mengirimkan aktivasi acara secara real time di solusi analitik google adalah mengubah pengembalian palsu oleh e.preventDefault () ; yang bekerja dengan benar mengikuti kode:

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

0

e.preventDefault () berfungsi dengan baik hanya jika Anda tidak memiliki masalah pada javascripts Anda, periksa javascripts Anda jika e.preventDefault () tidak berfungsi kemungkinan beberapa bagian lain dari JS Anda tidak berfungsi juga


0

Saya mengalami masalah serupa. Masalahnya bagi saya adalah file JS dimuat sebelum rendering DOM terjadi. Jadi pindahkan Anda <script>ke akhir <body>tag.

atau gunakan penundaan.

<script defer src="">

jadi yakinlah e.preventDefault()harus bekerja.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.