Menggunakan JQuery - mencegah formulir mengirimkan

177

Bagaimana cara mencegah formulir mengirimkan menggunakan jquery?

Saya mencoba semuanya - lihat 3 opsi berbeda yang saya coba di bawah ini, tetapi semuanya tidak bekerja:

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

Apa yang salah?

Perbarui - ini html saya:

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

Apa ada yang salah di sini?

jquery forms

— Lucy Weatherford
sumber

Perlihatkan HTML Anda karena tidak ada yang salah dengan preventDefault atau return false saat Anda mempostingnya, selain pemilih Anda yang sepenuhnya salah.

— Sparky

1

return false;setelah .submit()bekerja untukku! Saya mengalami masalah yang sama

— d -_- b

Jika ada kesalahan JavaScript yang terjadi di handler e.preventDefault();kode tidak tercapai / dieksekusi.

— Tom

263

Dua hal yang menonjol:

Mungkin saja nama formulir Anda tidak form. Lebih baik merujuk ke tag dengan menjatuhkan #.

Juga e.preventDefaultsintaks JQuery yang benar, misalnya

    //option A
    $("form").submit(function(e){
        e.preventDefault();
    });

Opsi C juga harus berfungsi. Saya tidak terbiasa dengan opsi B

Contoh lengkap:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>

— Philip Fourie
sumber

2

Sesuatu yang lain salah. Saya menggunakan teknik ini setiap hari. Tebakan terbaik adalah bahwa ada kesalahan JavaScript pada halaman tersebut, mungkin periksa dengan FireBug?

— Philip Fourie

@ LucyWeatherford, saya telah memperbarui jawaban saya dengan contoh yang berfungsi. Mungkin Anda menemukan sesuatu.

— Philip Fourie

Dalam html pembaruan Anda, saya perhatikan bahwa Anda memiliki atribut kelas untuk formulir Anda. Ubah pemilih JQuery Anda dari $('#form')menjadi $('.form')untuk atribut kelas.

— Philip Fourie

1

Terima kasih! Saya akhirnya menggunakan kode Anda pada halaman yang sama, dan itu berhasil, masih tidak yakin apa yang salah, tetapi sekarang semuanya baik-baik saja. Terima kasih!

— Lucy Weatherford

1

@ ÂngeloRigo e hanyalah nama yang Anda berikan pada parameter, dalam hal ini adalah ajukan acara.

— squall3d

34

Anda mungkin memiliki beberapa formulir di halaman dan menggunakan $ ('formulir') .mohon () menambahkan acara ini ke kemunculan pertama formulir di halaman Anda. Gunakan pemilih kelas sebagai gantinya, atau coba ini:

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
})

atau versi yang lebih baik:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});

— Artem Kiselev
sumber

1

Dalam kasus saya, mengembalikan false adalah kuncinya.

— elquimista

19

Untuk mencegah default / mencegah penggunaan pengiriman formulir

e.preventDefault();

Untuk menghentikan penggunaan acara bubbling

e.stopPropagation();

Untuk mencegah pengiriman formulir, 'return false' juga harus berfungsi.

— Alfa
sumber

Lihat jawaban ini karena jQuery menangani ini secara berbeda. stackoverflow.com/questions/1357118/…

— Sparky

1

Periksa ini untuk memahami acara bubling quirksmode.org/js/events_order.html

— The Alpha

2

The jQuery di negara API: "Kembali palsu dari sebuah event handler secara otomatis akan memanggil event.stopPropagation()dan event.preventDefault()A. falseNilai juga dapat ditularkan untuk handler sebagai singkatan untuk function(){ return false; }."

— Paul

7

Saya juga punya masalah yang sama. Saya juga telah mencoba apa yang telah Anda coba. Lalu saya mengubah metode saya untuk tidak menggunakan jquery tetapi dengan menggunakan atribut "onsubmit" di tag formulir.

<form onsubmit="thefunction(); return false;">

Berhasil.

Tetapi, ketika saya mencoba untuk menempatkan nilai pengembalian palsu hanya di "thefunction ()", itu tidak menghalangi proses pengiriman, jadi saya harus meletakkan "return false;" dalam atribut onsubmit. Jadi, saya menyimpulkan bahwa aplikasi formulir saya tidak bisa mendapatkan nilai balik dari fungsi Javascript. Saya tidak tahu tentang itu.

— Luki B. Subekti
sumber

1

Inilah perbedaan antara false;dan return false;. Anda harus memilikionsubmit="return thefunction();"

— xr280xr

4

Saya memiliki masalah yang sama dan saya menyelesaikannya dengan cara ini (tidak elegan tetapi berfungsi):

$('#form').attr('onsubmit','return false;');

Dan itu memiliki keuntungan, menurut pendapat saya, bahwa Anda dapat memulihkan situasi kapan saja Anda inginkan:

$('#form').attr('onsubmit','return true;');

— vinxxe
sumber

Mungkin akan sedikit lebih nyaman untuk hanya menghapus atribut ketika mengembalikan formulir kirim pencegahan$('#form').removeAttr('onsubmit');

— barbieswimcrew

4

Lampirkan acara ke elemen kirim bukan ke elemen formulir. Misalnya di html Anda lakukan seperti ini

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});

— M Weiss
sumber

2

Anda cukup memeriksa apakah formulir itu valid jika ya jalankan ajukan logika jika tidak tampilkan kesalahan.

HTML

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

Javascript

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });

— Kode Mata-mata
sumber

1

Ketika saya menggunakan <form>tag tanpa atribut id="form"dan memanggilnya dengan nama tag-nya secara langsung di jquery berfungsi dengan saya.
kode Anda dalam file html:

<form action="page2.php" method="post">

dan dalam skrip Jquery:

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });

— Noha Salah
sumber

1

$('#form')mencari elemen dengan id="form".

$('form') mencari elemen bentuk

— Rahul
sumber

0

Anda lupa form id, dan itu berfungsi

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});

— Shintadoniku Alyssa
sumber

0

// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

dari sini: https://api.jquery.com/submit-selector/ (halaman menarik tentang jenis pengiriman)

— Chris Strong
sumber

0

Ini juga berfungsi dan mungkin sedikit lebih sederhana:

$('#Form').on('submit',function(){
    return false;
})

— Ukuser32
sumber

0

Menggunakan jQuery, Anda dapat melakukan hal berikut:

1- Gunakan formulir asli ajukan acara dengan tombol Kirim, sambil mencegah acara memecat, kemudian

2- Periksa formulir Properti yang valid Ini dapat diimplementasikan sebagai berikut:

1- HTML:

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- Javascript

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });

— Mohamed Nagieb
sumber