Bagaimana cara membuat tombol HTML tidak memuat ulang halaman

116

Saya memiliki tombol ( <input type="submit">). Saat diklik, halaman dimuat ulang. Karena saya memiliki beberapa hide()fungsi jQuery yang dipanggil saat pemuatan halaman, ini menyebabkan elemen-elemen ini disembunyikan lagi. Bagaimana cara membuat tombol tidak melakukan apa-apa, jadi saya masih dapat menambahkan beberapa tindakan yang terjadi saat tombol diklik tetapi tidak memuat ulang halaman.

html javascript-events button

— Ankur
sumber

228

tidak perlu js atau jquery. untuk menghentikan pemuatan ulang halaman cukup tentukan jenis tombol sebagai 'tombol'. jika Anda tidak menentukan jenis tombolnya, browser akan mengaturnya ke 'reset' atau 'submit' witch cause to page reload.

 <button type='button'>submit</button>

— Jafar Rasooli
sumber

3

Ini berhasil! Ini alternatif yang bagus untuk <input type='button' />.

— Rick

5

Ini bekerja dengan baik, dan terutama dalam kasus Chrome (yang jawaban yang diterima tidak)

— hobailey

3

Bekerja pada Chrome di Windows 10. Ya!

— ssdscott

82

Gunakan salah satu <button>elemen atau gunakan <input type="button"/>.

— Andrew Hare
sumber

110

Elemen <button> secara default menyebabkan pemuatan ulang di chrome (setidaknya).

— AdamC

2

Anda masih dapat menggunakan acara onsubmit formulir dan mengembalikan false jika Anda masih tidak ingin kembali

— neu-rah

4

@ Joe sebenarnya sangat disayangkan: / Saya perlu aplikasi web saya berfungsi untuk IE8 dan pemuatan ulang itu agak mengganggu ...

— Ms. Nobody

24

@pbeardshear Itu dilakukan jika ditempatkan di dalam formulir. bila <button>ditempatkan di luar formulir, penyegaran tidak terjadi!

— Kevinvhengst

13

tambahkan type="button"ke <button>elemen di krom dan tidak menyegarkan

— Johnny Metz

21

Dalam HTML:

<form onsubmit="return false">
</form>

untuk menghindari penyegaran pada semua "tombol", bahkan dengan onclick ditetapkan.

— pengguna2868288
sumber

15

Anda bisa menambahkan handler klik pada tombol dengan jQuery dan mengembalikan false.

$("input[type='submit']").click(function() { return false; });

atau

$("form").submit(function() { return false; });

— Chris Gutierrez
sumber

6

Ini tidak berhasil. Menampilkan false di chrome, setidaknya di versi terbaru, masih menyebabkan penyegaran.

— pengguna3690202

Ini adalah satu-satunya jawaban yang benar-benar berhasil untuk saya. Saya hanya menambahkan return false di fungsi saya dan penyegaran berhenti di safari dan chrome.

— VessoVit

13

Dalam HTML:

<input type="submit" onclick="return false">

Dengan jQuery, beberapa varian serupa, telah disebutkan.

— wabah 669
sumber

9

Anda dapat menggunakan formulir yang menyertakan tombol kirim. Kemudian gunakan jQuery untuk mencegah perilaku default dari sebuah formulir:

$(document).ready(function($) {
  $(document).on('submit', '#submit-form', function(event) {
    event.preventDefault();
  
    alert('page did not reload');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
  <button type='submit'>submit</button>
</form>

Luaskan cuplikan

— ProgrammingWithRandy
sumber

4

Seperti yang dinyatakan dalam salah satu komentar (burried) di atas, hal ini dapat diperbaiki dengan tidak menempatkan tag tombol di dalam tag formulir. Saat tombol berada di luar formulir, halaman tidak menyegarkan sendiri.

— CommonCoreTawan
sumber

2

Saya belum bisa berkomentar, jadi saya posting ini sebagai jawaban. Cara terbaik untuk menghindari isi ulang adalah bagaimana @ user2868288 mengatakan: menggunakan onsubmitpada formtag.

Dari semua kemungkinan lain yang disebutkan di sini, ini satu-satunya cara yang memungkinkan validasi input data browser HTML5 baru dipicu ( <button>tidak akan melakukannya atau penangan jQuery / JS) dan memungkinkan info dinamis jQuery / AJAX Anda ditambahkan pada halaman. Sebagai contoh:

<form id="frmData" onsubmit="return false">
 <input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
 <input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
 <input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
  $(document).ready(function(){
    $('#btnSubmit').click(function() {
        var tel = $("#txtTel").val();
        var email = $("#txtEmail").val();
        $.post("scripts/contact.php", {
            tel1: tel,
            email1: email
        })
        .done(function(data) {
            $('#lblEstatus').append(data); // Appends status
            if (data == "Received") {
                $("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
            }
        })
        .fail(function(xhr, textStatus, errorThrown) { 
            $('#lblEstatus').append("Error. Try later."); 
        });
     });
   }); 
</script>

— Gusstavv Gil
sumber