it-swarm-id.com

cegah penyegaran halaman saat 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 me-refresh halaman.

Kode sederhana saya seperti ini

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

Pada mengklik tombol, fungsi dipanggil dengan halaman 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?

114
bunkdeath

Biarkan getData() mengembalikan false. Ini akan memperbaikinya.

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

Tambahkan type = "button" ke tombol.

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

Nilai default "ketik" untuk sebuah tombol adalah "kirim", yang memposting diri formulir dalam kasus Anda dan membuatnya tampak seperti refresh.

269
detale

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

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

Itu memecahkan masalah

8
user8564339

HTML

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

jQuery

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

Masalahnya adalah itu memicu pengiriman formulir. Jika Anda membuat fungsi getDatareturn false maka harus menghentikan formulir pengiriman. 

Atau, Anda juga bisa menggunakan metode preventDefault dari objek acara:

function getData(e) {
    e.preventDefault();
}
8
James Allardice
<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>
3
Manik Sood

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);
1
repzero

Saya menghadapi masalah yang sama. Masalahnya adalah dengan fungsi onclick. Seharusnya tidak ada masalah dengan fungsi getData. Ini bekerja dengan membuat fungsi onclick kembali salah.

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

Jika tombol Anda adalah "tombol" default, pastikan Anda menetapkan atribut type secara eksplisit, 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

});
0
Thusitha Deepal

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

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

Saya tidak berpikir ini 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 atribut onsubmit, jalankan fungsi Anda diikuti dengan pengembalian salah:

onsubmit="functionToRun(); return false;"

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

0
raphie

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;
}
0
Harsha Vardhini