Mencegah Default pada Pengiriman Formulir jQuery

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

Coba ini:

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

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/

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 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.

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

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

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

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

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

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

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

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.