Làm cách nào để tạo một nút HTML không tải lại trang

Question

Tôi có một nút (<input type="submit">). Khi nó được nhấp vào trang tải lại. Vì tôi có một số hàm jQuery hide() được gọi khi tải trang, điều này khiến các thành phần này bị ẩn lần nữa. Làm thế nào để làm cho nút không làm gì, vì vậy tôi vẫn có thể thêm một số hành động xảy ra khi nút được nhấp nhưng không tải lại trang.

Answer 1

Sử dụng phần tử <button> hoặc sử dụng <input type="button"/>.

Answer 2

Bạn có thể thêm trình xử lý nhấp chuột vào nút với jQuery và trả về false.

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

hoặc

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

Answer 3

Trong HTML:

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

Với jQuery, một số biến thể tương tự, đã được đề cập.

Answer 4

Trong HTML:

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

để tránh làm mới ở tất cả các "nút", ngay cả với onclick giao.

Answer 5

không cần js hoặc jquery. để dừng tải lại trang chỉ cần chỉ định loại nút là 'nút'. nếu bạn không chỉ định loại nút, trình duyệt sẽ đặt nó thành 'đặt lại' hoặc 'gửi' phù thủy để tải lại trang.

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

Answer 6

Như đã nêu trong một trong các nhận xét (burried) ở trên, điều này có thể được khắc phục bằng cách không đặt thẻ nút bên trong thẻ biểu mẫu. Khi nút ở bên ngoài biểu mẫu, trang không tự làm mới.

Answer 7

Tôi chưa thể nhận xét, vì vậy, tôi đăng bài này dưới dạng câu trả lời. Cách tốt nhất để tránh tải lại là cách @ user2868288 cho biết: sử dụng onsubmit trên thẻ form.

Từ tất cả các khả năng khác được đề cập ở đây, đó là cách duy nhất cho phép xác thực nhập dữ liệu trình duyệt HTML5 mới được kích hoạt (<button> sẽ không làm điều đó hoặc trình xử lý jQuery/JS) và cho phép thông tin động jQuery/AJAX của bạn được thêm vào trang. Ví dụ:

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

Answer 8

Bạn có thể sử dụng biểu mẫu bao gồm nút gửi. Sau đó sử dụng jQuery để ngăn chặn hành vi mặc định của một hình thức:

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