Kode JavaScript untuk menghentikan pengiriman formulir

206

Salah satu cara untuk menghentikan pengiriman formulir adalah dengan mengembalikan false dari fungsi JavaScript Anda.

Ketika tombol kirim diklik, fungsi validasi dipanggil. Saya memiliki kasus dalam validasi formulir. Jika kondisi itu terpenuhi saya memanggil fungsi bernama returnToPreviousPage ();

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

Saya menggunakan JavaScript dan Dojo Toolkit .

Alih-alih kembali ke halaman sebelumnya, ia menyerahkan formulir. Bagaimana saya bisa membatalkan pengiriman ini dan kembali ke halaman sebelumnya?

javascript html forms

— Muhammad Imran Tariq
sumber

RU Tentu fungsi ini memanggil ?? coba beri peringatan ('tes'); sebelum window.history

— samirprogrammer

ya saya yakin; itu disebut.

— Muhammad Imran Tariq

8

kemungkinan duplikat dari Bagaimana cara mencegah pengiriman formulir?

— TJ

292

Anda bisa menggunakan nilai balik fungsi untuk mencegah pengiriman formulir

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

dan berfungsi seperti

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

Dalam hal Chrome 27.0.1453.116 m jika kode di atas tidak berfungsi, setel bidang returnValue parameter event handler ke false untuk membuatnya berfungsi.

Terima kasih Sam untuk berbagi informasi.

EDIT:

Terima kasih kepada Vikram untuk solusinya jika validateMyForm () mengembalikan false:

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

di mana validateMyForm () adalah fungsi yang mengembalikan false jika validasi gagal. Poin kuncinya adalah menggunakan nama acara. Kami tidak dapat menggunakan untuk egepreventDefault ()

— Hemant Metalia
sumber

1

Hanya tebakan: itu tidak berfungsi untuk saya di Chrome versi terbaru.

— Sam

5

Apa pun yang kembali falsetampaknya tidak berpengaruh; Chrome masih mengirimkan formulir. Sebagai contoh onsubmit="return false;",. Namun, mengatur bidang parameter event handler returnValueagar falseberfungsi bagi saya.

— Sam

3

Halo Sam / Hemant, bisakah Anda memberikan contoh kode tentang bagaimana cara mengatur bidang returnValue parameter event handler ke false.

— JackDev

2

Saya pikir karena ini adalah jawaban yang diterima, mungkin harus memberi tahu bagaimana melakukan ini dengan benar. Saya bersama JackDev, bertanya-tanya bagaimana cara agar ini berfungsi dengan baik. Seperti ini, ini tidak berhasil

— Cruncher

1

Jika validateMyForm()memiliki kesalahan return falsetidak akan tercapai. Jadi ini mungkin gagal. Setelah berjam-jam, saya menemukan solusi yang berhasil dan diposting di bawah ini.

— Vikram Pudi

116

Gunakan mencegah default

Dojo Toolkit

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

jQuery

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

JavaScript vanila

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
sumber

3

Saya akan merekomendasikan event.preventDefault () sebagai balasan atas kesalahan karena banyak alasan, ini harus menjadi jawaban teratas: blog.nmsdvid.com/…

— acidjazz

1

Jawaban yang bagus. Lebih baik dari yang dipilih.

— Ani Menon

2

Bagus, tetapi di mana Anda akan melakukan validasi yang diinginkan OP?

— Sahand

1

@acidjazz Tapi bagaimana cara mengakses data formulir setelah mencegah default?

— CodeAt30

@ Saband @ codeat30 Anda dapat mengakses acara target.

— Adrien

50

Berikut ini berfungsi sampai sekarang (diuji di Chrome dan Firefox):

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

Di mana validateMyForm () adalah fungsi yang mengembalikan falsejika validasi gagal. Poin kuncinya adalah menggunakan nama event. Kami tidak dapat menggunakan untuk misalnya e.preventDefault().

— Vikram Pudi
sumber

15

Cukup gunakan sederhana buttonalih-alih tombol kirim. Dan panggil fungsi JavaScript untuk menangani pengiriman formulir:

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

Fungsi dalam sebuah scripttag:

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

Anda juga bisa mencoba window.history.forward(-1);

— dku.rajkumar
sumber

Saya suka pendekatan ini karena memungkinkan untuk use case saya, panggilan balik.

— Eddie

12

Ini mencegah penggunaan tombol enter untuk mengirimkan formulir. Atribut HTML5 baru seperti requiredtidak akan berfungsi.

— Sam

8

Banyak cara sulit untuk melakukan hal yang mudah:

<form name="foo" onsubmit="return false">

— Danial
sumber

3

Jawaban persis ini (OK, tidak tepat, karena Anda tidak memiliki titik koma) diajukan 8 bulan sebelumnya, dan memiliki suara negatif karena alasan yang baik. Ini berfungsi sebagian besar waktu. Tetapi tidak di semua browser sepanjang waktu.

— Auspex

3

Saya tidak mengatakan Anda membutuhkan titik koma; Saya menunjukkan bahwa hanya itu yang berbeda antara jawaban Anda dan yang jauh lebih tua. Fakta bahwa Anda sekarang meminta saya untuk menunjukkan browser mana yang tidak mendukungnya (saya tidak pernah mengatakan ada, saya hanya menunjukkan bahwa itu tidak akan selalu berhasil), membuktikan bahwa Anda masih belum membaca seluruh halaman ini .

— Auspex

2

Saya biasanya tidak memeriksa down-vote, kecuali saya tidak tahu bahwa orang-orang memilih kode yang salah. Secara teknis, titik koma itu asing, jadi itu salah. Dan Anda berkata "Anda kehilangan titik koma" menyiratkan bahwa itu diperlukan, yang salah. Anda mengatakannya "tidak akan selalu berfungsi" tetapi Anda tidak dapat menunjukkan satu case atau browser di mana itu tidak akan berfungsi? Ini logika yang masuk akal? Itu kode yang benar. Jadi, kecuali Anda bisa menunjukkan kasus di mana itu tidak akan berhasil, maka Anda tidak ada benarnya sama sekali.

— Danial

Bagaimana ini tidak memiliki lebih banyak upvotes? Ini jauh lebih singkat dibandingkan dengan contoh lainnya.

— Sal Alturaigi

Mungkin karena judulnya tidak sesuai dengan apa yang sebenarnya ditanyakan pria itu.

— Danial

6

Semua jawaban Anda memberikan sesuatu untuk dikerjakan.

AKHIRNYA, ini bekerja untuk saya: (jika Anda tidak memilih setidaknya satu item kotak centang, itu memperingatkan dan tetap di halaman yang sama)

<!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
sumber

Bekerja untuk saya juga.

— chetan

4

Berdasarkan jawaban @Vikram Pudi, kita juga bisa melakukan ini dengan Javascript murni

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

<script type="text/javascript">

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


    }
</script>

— Phan Van Linh
sumber

3

Saya akan merekomendasikan untuk tidak menggunakan onsubmitdan bukannya melampirkan acara dalam skrip.

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

Kemudian gunakan preventDefault()(atau returnValue = falseuntuk browser lama).

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

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}

— Isaac Abramowitz
sumber

Bisakah Anda menjelaskan mengapa Anda tidak menggunakannya onsubmit?

— theFreedomBanana

Mungkin ini hanya preferensi, tetapi saya merasa lebih mudah untuk memahami fungsi halaman web jika semua pendengar acara dilampirkan menggunakan JSdaripada HTMLmenggunakan atribut. Dengan begitu Anda tidak perlu bolak-balik sebanyak saat membaca kode orang lain

— Isaac Abramowitz

bagaimana jika seseorang menekan enter pada salah satu input alih-alih mengklik tombol? secara umum saya masih mengajukan ...

— bluejayke

1

Katakanlah Anda memiliki bentuk yang mirip dengan ini

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

Ini adalah javascript untuk fungsi confirmAction

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

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

        return confirmation ;
    }
</script>

Yang ini berfungsi di Firefox, Chrome, Internet Explorer (edge), Safari, dll.

Jika bukan itu masalahnya, beri tahu saya

— Mauricio Gracia Gutierrez
sumber

1

Kombinasi preventDefault()dan returnToPreviousPage()sempurna dan elegan. Ini mengganggu operasi normal sama seperti Anda akan merancang penangkap pengecualian untuk bekerja. +1.

— 1934286

1

Jawaban Hemant dan Vikram sama sekali tidak bekerja untuk saya di Chrome. The event.preventDefault (); skrip mencegah halaman mengirim tanpa mengabaikan lulus atau gagal validasi. Sebagai gantinya, saya harus memindahkan event.preventDefault (); ke dalam pernyataan if sebagai berikut:

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

Terima kasih kepada Hemant dan Vikram karena menempatkan saya di jalur yang benar.

— Jesperai
sumber

Bekerja untuk saya juga. Terima kasih.

— ivbtar

1

Misalnya, jika Anda memiliki tombol kirim pada formulir, inorder untuk menghentikan propogasinya cukup tulis event.preventDefault (); dalam fungsi yang dipanggil saat mengklik tombol ajukan atau tombol masuk.

— Dheeraj Nalawade
sumber

0

Lakukan saja ....

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

dan inilah JQuery Anda

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});

— Matee Gojra
sumber

1

kamu menggunakan jquery di sini?

— Selva Ganapathi