Bagaimana cara mencegah formulir dikirim beberapa kali dari sisi klien?

Terkadang saat responsnya lambat, seseorang mungkin mengklik tombol kirim beberapa kali.

Bagaimana cara mencegah hal ini terjadi?

Gunakan javascript yang tidak mengganggu untuk menonaktifkan acara pengiriman di formulir setelah itu telah dikirim. Berikut ini contoh penggunaan jQuery.

EDIT: Memperbaiki masalah pengiriman formulir tanpa mengklik tombol kirim. Terima kasih, ichiban.

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

Saya mencoba solusi vanstee bersama dengan validasi tidak mengganggu asp mvc 3, dan jika validasi klien gagal, kode masih dijalankan, dan pengiriman formulir dinonaktifkan untuk selamanya. Saya tidak dapat mengirim ulang setelah mengoreksi bidang. (lihat komentar bjan)

Jadi saya memodifikasi skrip vanstee seperti ini:

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

Kontrol pengiriman formulir sisi klien dapat dicapai dengan cukup elegan dengan meminta penangan onsubmit menyembunyikan tombol kirim dan menggantinya dengan animasi pemuatan. Dengan cara itu, pengguna mendapatkan umpan balik visual langsung di tempat yang sama di mana tindakannya (klik) terjadi. Pada saat yang sama Anda mencegah formulir dikirimkan di lain waktu.

Jika Anda mengirimkan formulir melalui XHR, perlu diingat bahwa Anda juga harus menangani kesalahan pengiriman, misalnya waktu tunggu. Anda harus menampilkan tombol kirim lagi karena pengguna perlu mengirim ulang formulir.

Di catatan lain, llimllib menampilkan poin yang sangat valid. Semua validasi formulir harus dilakukan di sisi server. Ini termasuk beberapa pemeriksaan pengiriman. Jangan pernah mempercayai klien! Ini bukan hanya kasus jika javascript dinonaktifkan. Anda harus ingat bahwa semua kode sisi klien dapat dimodifikasi. Agak sulit untuk membayangkan tetapi html / javascript yang berbicara ke server Anda belum tentu html / javascript yang Anda tulis.

Seperti yang disarankan llimllib, buat formulir dengan pengenal yang unik untuk formulir itu dan letakkan di kolom input tersembunyi. Simpan pengenal itu. Saat menerima data formulir hanya memprosesnya saat pengenal cocok. (Juga menautkan pengenal ke sesi pengguna dan mencocokkannya, juga, untuk keamanan ekstra.) Setelah pemrosesan data, hapus pengenal tersebut.

Tentu saja, sesekali, Anda perlu membersihkan pengenal yang tidak pernah mengirimkan data formulir apa pun. Tetapi kemungkinan besar situs web Anda sudah menggunakan semacam mekanisme "pengumpulan sampah".

<form onsubmit="if(submitted) return false; submitted = true; return true">

Berikut cara sederhana untuk melakukannya:

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>

Nonaktifkan tombol kirim segera setelah klik. Pastikan Anda menangani validasi dengan benar. Juga pertahankan halaman perantara untuk semua pemrosesan atau operasi DB dan kemudian alihkan ke halaman berikutnya. Ini memastikan bahwa Refresh halaman kedua tidak melakukan pemrosesan lain.

Hash waktu saat ini, jadikan sebagai masukan tersembunyi di formulir. Di sisi server, periksa hash dari setiap pengiriman formulir; jika Anda sudah menerima hash itu maka Anda mendapat pengajuan ulang.

edit: mengandalkan javascript bukanlah ide yang baik, jadi Anda semua dapat terus meningkatkan ide-ide tersebut tetapi beberapa pengguna tidak akan mengaktifkannya. Jawaban yang benar adalah tidak mempercayai input pengguna di sisi server.

Anda juga dapat menampilkan bilah kemajuan atau pemutar untuk menunjukkan bahwa formulir sedang diproses.

Menggunakan JQuery, Anda dapat melakukan:

$('input:submit').click( function() { this.disabled = true } );

&

   $('input:submit').keypress( function(e) {
     if (e.which == 13) {
        this.disabled = true 
     } 
    }
   );

Saya tahu Anda menandai pertanyaan Anda dengan 'javascript' tetapi berikut ini solusi yang sama sekali tidak bergantung pada javascript:

Ini adalah pola aplikasi web bernama PRG , dan inilah artikel bagus yang menjelaskannya

Anda dapat mencegah banyak pengiriman hanya dengan:

var Workin = false;

$('form').submit(function()
{
   if(Workin) return false;
   Workin =true;

   // codes here.
   // Once you finish turn the Workin variable into false 
   // to enable the submit event again
   Workin = false;

});

Jawaban paling sederhana untuk pertanyaan ini seperti yang ditanyakan: "Kadang-kadang ketika responsnya lambat, seseorang mungkin mengklik tombol kirim beberapa kali. Bagaimana mencegah hal ini terjadi?"

Nonaktifkan saja tombol kirim formulir, seperti kode di bawah ini.

<form ... onsubmit="buttonName.disabled=true; return true;">
  <input type="submit" name="buttonName" value="Submit">
</form>

Ini akan menonaktifkan tombol kirim, pada klik pertama untuk mengirimkan. Juga jika Anda memiliki beberapa aturan validasi, maka itu akan berfungsi dengan baik. Semoga bisa membantu.

Di sisi klien , Anda harus menonaktifkan tombol kirim setelah formulir dikirimkan dengan kode javascript seperti metode yang disediakan oleh @vanstee dan @chaos.

Tetapi ada masalah untuk kelambatan jaringan atau situasi nonaktif javascript di mana Anda tidak boleh mengandalkan JS untuk mencegah hal ini terjadi.

Jadi, di sisi server , Anda harus memeriksa pengiriman berulang dari klien yang sama dan menghilangkan pengiriman berulang yang tampaknya merupakan upaya palsu dari pengguna.

Anda dapat mencoba plugin jquery safeform .

$('#example').safeform({
    timeout: 5000, // disable form on 5 sec. after submit
    submit: function(event) {
        // put here validation and ajax stuff...

        // no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
})

Solusi paling sederhana dan elegan untuk saya:

function checkForm(form) // Submit button clicked
{
    form.myButton.disabled = true;
    form.myButton.value = "Please wait...";
    return true;
}

<form method="POST" action="..." onsubmit="return checkForm(this);">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Tautan untuk lebih ...

Gunakan kode ini di formulir Anda. Itu akan menangani beberapa klik.

<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function() {
            $(this).submit(function() {
                return false;
            });
            return true;
        });     
    }); 
</script>

itu pasti akan berhasil.

Ini mengizinkan pengiriman setiap 2 detik. Dalam kasus validasi depan.

$(document).ready(function() {
    $('form[debounce]').submit(function(e) {
        const submiting = !!$(this).data('submiting');

        if(!submiting) {
            $(this).data('submiting', true);

            setTimeout(() => {
                $(this).data('submiting', false);
            }, 2000);

            return true;
        }

        e.preventDefault();
        return false;
    });
})

cara terbaik untuk mencegah beberapa pengiriman adalah dengan meneruskan id tombol dalam metode.

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton; 

Untuk melakukan ini menggunakan javascript agak mudah. Berikut adalah kode yang akan memberikan fungsionalitas yang diinginkan:

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>

Solusi paling sederhana adalah menonaktifkan tombol saat diklik, aktifkan setelah operasi selesai. Untuk memeriksa solusi serupa di jsfiddle:

[click here][1]

Dan Anda dapat menemukan solusi lain untuk jawaban ini .

Ini bekerja dengan sangat baik untuk saya. Ini mengirimkan pertanian dan membuat tombol nonaktifkan dan setelah 2 detik aktifkan tombol.

<button id="submit" type="submit" onclick="submitLimit()">Yes</button>

function submitLimit() {
var btn = document.getElementById('submit')
setTimeout(function() {
    btn.setAttribute('disabled', 'disabled');
}, 1);

setTimeout(function() {
    btn.removeAttribute('disabled');
}, 2000);}

Dalam ECMA6 Syntex

function submitLimit() {
submitBtn = document.getElementById('submit');

setTimeout(() => { submitBtn.setAttribute('disabled', 'disabled') }, 1);

setTimeout(() => { submitBtn.removeAttribute('disabled') }, 4000);}

Hanya untuk menambah kemungkinan jawaban tanpa melewati validasi input browser

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});

Alternatif dari apa yang telah diusulkan sebelumnya adalah:

jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});