Form gönderilmesini durdurmak için JavaScript kodu

208

Form göndermeyi durdurmanın bir yolu, JavaScript işlevinizden false döndürmektir.

Gönder düğmesine tıklandığında bir doğrulama işlevi çağrılır. Form doğrulamasında bir vakam var. Bu koşul yerine getirilirse returnToPreviousPage () adlı bir işlevi çağırırım;

function returnToPreviousPage() {
    window.history.back();
}

JavaScript ve Dojo Toolkit kullanıyorum .

Bir önceki sayfaya dönmek yerine formu gönderir. Bu sunumu nasıl iptal edebilir ve bir önceki sayfaya nasıl dönebilirim?

javascript  html  forms 
— Muhammed İmran Tarık
kaynak
RU Elbette bu fonksiyon çağırıyor ?? alarm vermeye çalışın ('test'); önce window.history
— samirprogrammer
Evet eminim; çağrılıyor.
— Muhammad Imran Tariq
8
— TJ

Yanıtlar:

293

Form gönderilmesini önlemek için işlevin dönüş değerini kullanabilirsiniz

<form name="myForm" onsubmit="return validateMyForm();">

ve gibi işlev

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

Yukarıdaki kod çalışmazsa Chrome 27.0.1453.116 m olması durumunda, lütfen olay işleyicisinin parametresinin returnValue alanını işe yaraması için false olarak ayarlayın.

Sam'i bilgi paylaştığı için teşekkürler.

DÜZENLE :

ValidateMyForm () yanlış döndürürse geçici çözümü için Vikram'a teşekkürler:

 <form onsubmit="event.preventDefault(); validateMyForm();">

Burada validateMyForm (), doğrulama başarısız olursa false döndüren bir işlevdir. Kilit nokta name olayını kullanmaktır. EgepreventDefault () için kullanamayız

— Hemant Metalia
kaynak
1
Sadece bir tahmin: Chrome'un son sürümünde benim için çalışmıyor.
— Sam
5
Geri dönen her şeyin falsebir etkisi yok gibi görünüyor; Chrome hala formu gönderiyor. Örneğin onsubmit="return false;",. Ancak, olay işleyicisinin parametresinin returnValuealanını ayarlamak falsebenim için işe yarıyor.
— Sam
3
Merhaba Sam / Hemant, olay işleyicisinin parametresinin returnValue alanını false olarak nasıl ayarlayacağınız konusunda kod örneği sağlayabilir misiniz?
— JackDev
2
Bence bu kabul edilen cevap olduğu için, muhtemelen bunun nasıl doğru bir şekilde yapılacağını söylemelidir. Ben JackDev ile birlikte, bu düzgün çalışması için nasıl merak ediyorum. Olduğu gibi yapar değil işi
— Cruncher
1
Eğer validateMyForm()hata varsa return falseulaşılamaz. Yani bu başarısız olabilir. Birkaç saat sonra, işe yarayan bir çözüm buldum ve aşağıya gönderdim.
— Vikram Pudi
116

Varsayılanı engelle'yi kullan

Dojo Araç Seti

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

Vanilya JavaScript

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}
— Greg Guida
kaynak
3
Event.preventDefault () 'i birçok nedenden ötürü yanlış döndürme konusunda tavsiye ederim, bu en iyi cevap olmalı: blog.nmsdvid.com/…
— acidjazz
1
İyi cevap. Seçilenden daha iyi.
— Ani Menon
2
Güzel, ama OP'nin istediği doğrulamayı nerede yapardınız?
— Sahand
1
@acidjazz Peki, varsayılanı engelledikten sonra form verilerine nasıl erişilir?
— CodeAt30
@Sahand @ codeat30 Etkinliğe erişebilirsiniz target.
— Adrien
50

Şu andan itibaren aşağıdakiler çalışır (Chrome ve Firefox'ta test edilmiştir):

<form onsubmit="event.preventDefault(); validateMyForm();">

Burada validateMyForm (), falsedoğrulama başarısız olursa geri dönen bir işlevdir . Önemli nokta ismi kullanmaktır event. Örneğin kullanamayız e.preventDefault().

— Vikram Pudi
kaynak
15

buttonGönder düğmesi yerine basit kullanın. Ve form gönderme işlemini yapmak için bir JavaScript işlevi çağırın:

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

Bir scriptetiket içindeki işlev :

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

Ayrıca deneyebilirsiniz window.history.forward(-1);

— dku.rajkumar
kaynak
Bu yaklaşımı seviyorum çünkü kullanım durumuma, geri aramalara izin veriyor.
— Eddie
12
Bu, formu göndermek için enter tuşunun kullanılmasını önler. Ayrıca, gibi yeni HTML5 özellikleri requiredçalışmaz.
— Sam
8

Kolay bir şey yapmanın birçok zor yolu:

<form name="foo" onsubmit="return false">
— Danial
kaynak
3
Bu kesin cevap (tamam, tam değil, yarım kolon eksik olduğu için) 8 ay önce gönderildi ve iyi bir nedenden dolayı olumsuz oylar aldı. Bu çoğu zaman işe yarar . Ancak tüm tarayıcılarda tüm zamanların.
— Auspex
3
Noktalı virgüllere ihtiyacınız olduğunu söylemedim ; Cevabınızla çok daha eski bir cevap arasında tüm bunların farklı olduğuna dikkat çektim . Şimdi hangi tarayıcıların onu desteklemediğini belirtmemi istemiş olmanız (hiç olduğunu söylemedim, sadece her zaman işe yaramayacağına işaret ettim), bu sayfayı hala okumadığınızı kanıtlıyor .
— Auspex
2
Genellikle aşağı oyları incelemiyorum, ancak insanların doğru kodu aşağı oy kullandıklarını bilmiyordum. Teknik olarak, noktalı virgül yabancı, bu yüzden yanlış. Ve "seninki noktalı virgül eksik" diyorsun, bunun gerekli olduğunu ima ediyor, bu yanlış. Bunun "her zaman işe yaramayacağını" söylüyorsunuz, ancak çalışmadığı tek bir durumu veya tarayıcıyı gösteremiyor musunuz? Bu ses mantığı mı? Doğru kod. Dolayısıyla, vakanın işe yaramayacağı yere işaret edemezseniz, o zaman hiç bir noktanız yoktur.
— Danial
Bunun nasıl daha fazla oyu yok? Diğer örneklere kıyasla çok daha keskindir.
— Sal Alturaigi
Muhtemelen başlık, adamın gerçekten sorduğu şeyle eşleşmediği için.
— Danial
6

Tüm cevaplarınız üzerinde çalışmak için bir şeyler verdi.

Nihayetinde bu benim için çalıştı: (en az bir onay kutusu öğesi seçmezseniz, aynı sayfada uyarır ve kalır)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>
— Gdba
kaynak
Benim için de çalıştı.
— chetan
5

@Vikram Pudi cevabına dayanarak, bunu saf Javascript ile de yapabiliriz

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();


    }
</script>
— Phan Van Linh
kaynak
3

onsubmitKomut dosyasında bir olay kullanmamanızı ve eklemenizi öneririm .

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

Ardından preventDefault()(veya returnValue = falseeski tarayıcılar için) tuşunu kullanın .

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}
— Isaac Abramowitz
kaynak
Neden kullanmadığınızı açıklayabilir misiniz onsubmit?
— theFreedomBanana
Belki sadece tercih olmakla birlikte, tüm olay dinleyicileri öznitelikler kullanmak JSyerine eklenmişse, bir web sayfasının işlevselliğini anlamayı daha kolay buluyorum HTML. Bu şekilde, başkasının kodunu okurken ileri geri atlamanıza gerek kalmaz
— Isaac Abramowitz
birisi düğmeye basmak yerine girişlerden birine enter tuşuna basarsa? genel olarak ii hala sunar ...
— bluejayke
1

Diyelim ki buna benzer bir formunuz var

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

İşte confirmAction işlevi için javascript

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

Bu Firefox, Chrome, Internet Explorer (kenar), Safari vb.

Durum böyle değilse bana bildirin

— Mauricio Gracia Gutierrez
kaynak
1
Kombinasyonu preventDefault()ve returnToPreviousPage()mükemmel ve zarif. Çalışmak için herhangi bir istisna yakalayıcı tasarladığınız gibi normal çalışmayı kesintiye uğratır. +1.
— 1934286
1

Hemant ve Vikram'ın cevapları benim için Chrome'da açıkça işe yaramadı. Event.preventDefault (); komut dosyası, doğrulamanın geçilmesi veya başarısız olmasından bağımsız olarak sayfanın gönderilmesini engelledi. Bunun yerine event.preventDefault (); aşağıdaki gibi if ifadesine:

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

Beni doğru yola koydukları için Hemant ve Vikram'a teşekkürler.

— Jesperai
kaynak
Benim için de çalıştı. Teşekkürler.
— ivbtar
1

Örneğin form üzerinde düğme gönderirseniz, yayılımını durdurmak için event.preventDefault (); Gönder düğmesine veya enter düğmesine tıklandığında çağrılan işlevde.

— Dheeraj Nalawade
kaynak
0

Sadece yap ....

<form>
<!-- Your Input Elements -->
</form>

ve işte JQuery'niz

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});
— Matee Gojra
kaynak
1
Burada jquery kullandınız mı?
— Selva Ganapathi
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.