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

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

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' nguyên nhân để tải lại trang.

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

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

Trong HTML:

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

để tránh làm mới tất cả các "nút", ngay cả khi chỉ định onclick.

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

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

hoặc là

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

Trong HTML:

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

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

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

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

Như đã nêu trong một trong các nhận xét (đã ghi) ở 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.

Tôi chưa thể bình luận, vì vậy tôi đăng bài này như một câu trả lời. Cách tốt nhất để tránh tải lại là như thế nào @ user2868288 nói: sử dụng onsubmittrênform thẻ.

Từ tất cả các khả năng khác được đề cập ở đây, đó là cách duy nhất cho phép kích hoạt xác thực đầu vào dữ liệu trình duyệt HTML5 mới ( <button>sẽ không làm điều đó cũng như 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>