Sayfayı yeniden yüklemeyen bir HTML düğmesini nasıl yaparım

Bir düğmem var ( <input type="submit">). Tıklandığında sayfa yeniden yüklenir. hide()Sayfa yüklemede çağrılan bazı jQuery işlevlerine sahip olduğum için , bu, bu öğelerin yeniden gizlenmesine neden oluyor. Düğmenin hiçbir şey yapmamasını nasıl sağlarım, böylece düğme tıklandığında ancak sayfayı yeniden yüklemediğinde gerçekleşen bazı eylemleri yine de ekleyebilirim.

js veya jquery'ye gerek yoktur. sayfanın yeniden yüklenmesini durdurmak için düğme türünü 'düğme' olarak belirtmeniz yeterlidir. Düğme türünü belirtmezseniz, tarayıcı onu 'sıfırla' veya 'gönder' olarak ayarlayacaktır çünkü sayfanın yeniden yüklenmesi için.

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

<button>Öğeyi kullanın veya bir <input type="button"/>.

HTML'de:

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

onclick atanmış olsa bile tüm "düğmelerde" yenilemeyi önlemek için.

JQuery ile düğmeye bir tıklama işleyici ekleyebilir ve false değerini döndürebilirsiniz.

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

veya

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

HTML'de:

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

JQuery ile, daha önce bahsedilen benzer bir varyant.

Gönder düğmesi içeren bir form kullanabilirsiniz. Ardından, bir formun varsayılan davranışını önlemek için jQuery kullanın:

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

Yukarıdaki yorumlardan birinde (gömülü) belirtildiği gibi, düğme etiketi form etiketi içine yerleştirilmeyerek bu sorunu giderilebilir. Düğme formun dışındayken sayfa kendini yenilemez.

Henüz yorum yapamıyorum, bu yüzden bunu bir cevap olarak gönderiyorum. Kullanarak: önlemek yeniden yükleme en iyi yolu user2868288 sözü nasıl @ olduğu onsubmitüzerinde formetiketinin.

Burada bahsedilen diğer tüm olasılıklardan, yeni HTML5 tarayıcı veri girişi doğrulamasının tetiklenmesine ( <button>bunu veya jQuery / JS işleyicileri yapmayacaktır) ve jQuery / AJAX dinamik bilgilerinizin sayfa. Örneğin:

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