cegah penyegaran halaman ketika tombol di dalam formulir diklik

Saya memiliki masalah saat menggunakan tombol di dalam formulir. Saya ingin tombol itu memanggil fungsi. Memang, tetapi dengan hasil yang tidak diinginkan itu menyegarkan halaman.

Kode sederhana saya seperti ini

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

Pada mengklik tombol, fungsi dipanggil dengan halaman di-refresh, yang me-reset semua permintaan saya sebelumnya yang mempengaruhi halaman saat ini yang merupakan hasil dari permintaan sebelumnya.

Apa yang harus saya lakukan untuk mencegah penyegaran halaman?

Biarkan getData()kembali salah. Ini akan memperbaikinya.

<form method="POST">
    <button name="data" onclick="return getData()">Click</button>
</form>

Tambahkan type="button"ke tombol.

<button name="data" type="button" onclick="getData()">Click</button>

Nilai default typeuntuk sebuah tombol adalah submit, yang memposting sendiri formulir di case Anda dan membuatnya tampak seperti refresh.

Yang perlu Anda lakukan adalah meletakkan tag jenis dan membuat tombol ketik.

<button id="btnId" type="button">Hide/Show</button>

Itu memecahkan masalah

Masalahnya adalah itu memicu pengiriman formulir. Jika Anda membuat getDatafungsi return falsemaka harus menghentikan formulir mengirimkan.

Atau, Anda juga bisa menggunakan preventDefaultmetode objek acara:

function getData(e) {
    e.preventDefault();
}

HTML

<form onsubmit="return false;" id="myForm">
</form>

jQuery

$('#myForm').submit(function() {
    doSomething();
});

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

alih-alih menggunakan tag tombol, gunakan tag input. Seperti ini,

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</form>

Jika tombol Anda adalah "tombol" default, pastikan Anda menentukan atribut type, jika tidak, WebForm akan memperlakukannya sebagai submit secara default.

jika Anda menggunakan js lakukan seperti ini

<form method="POST">
   <button name="data"  type="button" id="btnData" onclick="getData()">Click</button>
</form> 

**If you use jquery use like this**


<form method="POST">
   <button name="data"  type="button" id="btnData">Click</button>
</form>




$('#btnData').click(function(e){
   e.preventDefault();
   // Code goes here
getData(); // your onclick function call here

});

Metode javascript untuk menonaktifkan tombol itu sendiri

document.getElementById("ID NAME").disabled = true;

Setelah semua bidang formulir memenuhi kriteria Anda, Anda dapat mengaktifkan kembali tombol

Menggunakan Jquery akan seperti ini

$( "#ID NAME" ).prop( "disabled", true);

Untuk alasan apa pun di Firefox meskipun saya memiliki return false;dan myform.preventDefault();dalam fungsi, itu menyegarkan halaman setelah fungsi berjalan. Dan saya tidak tahu apakah ini praktik yang baik, tetapi itu berhasil untuk saya, saya masukkanjavascript:this.preventDefault(); atribut action.

Seperti yang saya katakan, saya mencoba semua saran lainnya dan mereka bekerja dengan baik di semua browser kecuali Firefox, jika Anda memiliki masalah yang sama, coba tambahkan acara cegah dalam atribut action baik javascript:return false;atau javascript:this.preventDefault();. Jangan coba-cobajavascript:void(0); yang akan merusak kode Anda. Jangan tanya kenapa :-).

Saya tidak berpikir ini adalah cara yang elegan untuk melakukannya, tetapi dalam kasus saya, saya tidak punya pilihan lain.

Memperbarui:

Jika Anda menerima kesalahan ... setelah ajax diproses, maka hapus tindakan atribut dan dalam onsubmitatribut, jalankan fungsi Anda diikuti dengan pengembalian salah:

onsubmit="functionToRun(); return false;"

Saya tidak tahu mengapa semua masalah dengan Firefox ini, tetapi saya harap ini berhasil.

Fungsi pengembalian tidak berfungsi dalam semua kasus. Saya mencoba ini:

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

Itu tidak berhasil untuk saya.

Saya mencoba mengembalikan false di dalam fungsi dan itu berhasil untuk saya.

function Reset()
{
    .
    .
    .
    return false;
}

Saya menghadapi masalah yang sama. Masalahnya dengan onclickfungsi. Seharusnya tidak ada masalah dengan fungsi getData. Ini bekerja dengan membuat onclickfungsi return false.

<form method="POST">
    <button name="data" onclick="getData(); return false">Click</button>
</form>

Ini adalah solusi terbaik:

<form  method="post"> 
    <button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

Catatan: Kode saya sangat sederhana.

Anda bisa menggunakan ajax dan jquery untuk menyelesaikan masalah ini:

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>