JQuery kullanma - formun gönderilmesini önleme

178

Bir formun jquery kullanarak gönderilmesini nasıl önleyebilirim?

Her şeyi denedim - aşağıda denediğim 3 farklı seçeneğe bakın, ancak hepsi işe yaramaz:

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

Ne yanlış olabilir?

Güncelleme - işte benim html:

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

Burada yanlış bir şey var mı?

jquery forms

— Lucy Weatherford
kaynak

HTML'nizi gösterin, çünkü önleyici ile yanlış bir şey yoktur veya yayınladığınız gibi false döndürür, seçicinizin tamamen yanlış olması dışında.

— Sparky

1

return false;.submit()benim için çalıştıktan sonra ! Aynı sorunu yaşıyordum

— d -_- b

İşleyicide bir JavaScript hatası oluşursa, e.preventDefault();koda ulaşılmaz / kod çalıştırılmaz.

— Tom

263

İki şey öne çıkıyor:

Form adınız olmayabilir form. Bunun yerine, # işaretini bırakarak etikete bakın.

Ayrıca e.preventDefaultdoğru JQuery sözdizimi, ör.

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

C seçeneği de çalışmalıdır. B seçeneğine aşina değilim

Tam bir örnek:

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

2

Başka bir şey yanlış. Bu tekniği günlük olarak kullanıyorum. En iyi tahmin, sayfada JavaScript hataları olması olabilir, belki FireBug ile kontrol edin?

— Philip Fourie

@ LucyWeatherford, cevabımı çalışan bir örnekle güncelledim. Belki birţeyi farkedersin.

— Philip Fourie

Güncellemenizde html formunuz için sınıf özniteliğiniz olduğunu fark ettim. Adresinin JQuery seçici değiştirme $('#form')için $('.form')sınıf özellikleri için.

— Philip Fourie

1

Teşekkürler! Kodunuzu aynı sayfada kullandım ve işe yaradı, yine de neyin yanlış olduğundan emin değilim, ama şimdi hepsi iyi. Teşekkürler!

— Lucy Weatherford

1

@ GelongeloRigo e, parametreye verdiğiniz addır, bu durumda gönderme olayıdır.

— squall3d

34

Muhtemelen sayfada çok az formunuz var ve $ ('form'). Bunun yerine sınıf seçiciyi kullanın veya şunu deneyin:

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

veya daha iyi bir sürümü:

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

— Artem Kiselev
kaynak

1

Benim durumumda, yanlış döndürmek bir anahtardı.

— elquimista

19

Varsayılanı önlemek / form gönderilmesini önlemek için

e.preventDefault();

Olay köpürmeyi durdurmak için

e.stopPropagation();

Form gönderilmesini önlemek için 'return false' da çalışmalıdır.

— Alfa
kaynak

Bu cevaba bakınız çünkü jQuery bunları farklı işlemektedir. stackoverflow.com/questions/1357118/…

— Sparky

1

Olay kabarcıklaşmasını anlamak için bunu işaretleyin quirksmode.org/js/events_order.html

— Alfa

2

JQuery API devletler: "Bir olay işleyicisi gelen false dönen otomatik arayacak event.stopPropagation()ve event.preventDefault()A. falseDeğeri de için bir kısaltma olarak işleyicisi için geçirilebilir function(){ return false; }."

— Paul

7

Ben de aynı problemi yaşadım. Ben de denediklerini denedim. Sonra jquery kullanmak değil, form etiketinde "onsubmit" özniteliğini kullanarak yöntemimi değiştirin.

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

İşe yarıyor.

Ancak, yanlış dönüş değerini yalnızca "thefunction ()" içine koymaya çalıştığımda, gönderme işlemini engellemediğinden, "return false;" onsubmit özniteliğinde. Bu yüzden, form uygulamamın Javascript işlevinden döndürülen değeri alamadığı sonucuna varıyorum. Bu konuda hiçbir fikrim yok.

— Luki B. Subekti
kaynak

1

Bu arasındaki farktır false;ve return false;. Sen sahip olmak gerekiyorduonsubmit="return thefunction();"

— xr280xr

4

Aynı sorunu yaşadım ve bu şekilde çözdüm (zarif değil ama işe yarıyor):

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

Ve bence, durumu istediğiniz zaman geri alabilmenin avantajı var:

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

— vinxxe
kaynak

Belki form gönderme önleme geri $('#form').removeAttr('onsubmit');

— dönerken

4

Olayı form öğesine değil, gönderme öğesine ekleyin. Örneğin, html'nizde bunu yapın

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

— M Weiss
kaynak

2

Basitçe formun geçerli olup olmadığını kontrol edebilirsiniz.

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

— Kod Casusu
kaynak

1

<form>Öznitelik olmadan etiketi kullandığımda id="form"ve doğrudan jquery'de etiket adıyla çağırdığımda benimle çalışıyor.
html dosyasındaki kodunuz:

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

ve Jquery komut dosyasında:

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

— Noha Salah
kaynak

1

$('#form')ile bir öğe arar id="form".

$('form') form öğesini arar

— Rahul
kaynak

0

Form kimliğini unutursunuz ve işe yarar

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

— Shintadoniku Alyssa
kaynak

0

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

buradan: https://api.jquery.com/submit-selector/ (gönderim türleriyle ilgili ilginç sayfa)

— Chris Strong
kaynak

0

Bu da işe yarıyor gibi görünüyor ve biraz daha basit olabilir:

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

— Ukuser32
kaynak

0

JQuery kullanarak aşağıdakileri yapabilirsiniz:

1- Etkinliğin tetiklenmesini önlerken, Gönder düğmesiyle yerel form gönderme olayını kullanın, ardından

2- Geçerli mülk formunu kontrol edin Aşağıdaki gibi uygulanabilir:

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
kaynak