ngăn làm mới trang khi nhấp vào nút bên trong biểu mẫu

Tôi có một vấn đề trong khi sử dụng các nút bên trong mẫu. Tôi muốn nút đó để gọi chức năng. Nó có, nhưng với kết quả không mong muốn là nó làm mới trang.

Mã đơn giản của tôi đi như thế này

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

Khi nhấp vào nút, chức năng được gọi với trang được làm mới, điều này đặt lại tất cả yêu cầu trước đó của tôi ảnh hưởng đến trang hiện tại là kết quả của yêu cầu trước đó.

Tôi nên làm gì để ngăn chặn việc làm mới trang?

Hãy getData()trả lại sai. Điều này sẽ khắc phục nó.

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

Thêm type="button"vào nút.

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

Giá trị mặc định của typemột nút là submit, nó tự đăng biểu mẫu trong trường hợp của bạn và làm cho nó trông giống như một sự làm mới.

Tất cả bạn cần làm là đặt một thẻ loại và làm cho nút loại.

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

Điều đó giải quyết vấn đề

Vấn đề là nó kích hoạt đệ trình biểu mẫu. Nếu bạn thực hiện getDatachức năng return falsethì nó sẽ dừng biểu mẫu gửi.

Ngoài ra, bạn cũng có thể sử dụng preventDefaultphương thức của đối tượng sự kiện:

function getData(e) {
    e.preventDefault();
}

HTML

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

jQuery

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

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

thay vì sử dụng thẻ nút, hãy sử dụng thẻ đầu vào. Như thế này,

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

Nếu nút của bạn là "nút" mặc định, hãy đảm bảo rằng bạn tự động đặt thuộc tính loại, nếu không, WebForm sẽ coi nó là gửi theo mặc định.

nếu bạn sử dụng js làm như thế này

<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

});

Một phương pháp javascript để vô hiệu hóa chính nút

document.getElementById("ID NAME").disabled = true;

Khi tất cả các trường mẫu đã thỏa mãn tiêu chí của bạn, bạn có thể bật lại nút

Sử dụng Jquery sẽ giống như thế này

$( "#ID NAME" ).prop( "disabled", true);

Vì bất kỳ lý do nào trong Firefox mặc dù tôi có return false;và myform.preventDefault();trong chức năng, nó sẽ làm mới trang sau khi chức năng chạy. Và tôi không biết liệu đây có phải là một thực hành tốt hay không, nhưng nó hiệu quả với tôi, tôi chèn javascript:this.preventDefault();vào thuộc tính hành động.

Như tôi đã nói, tôi đã thử tất cả các đề xuất khác và chúng hoạt động tốt trong tất cả các trình duyệt trừ Firefox, nếu bạn có cùng một vấn đề, hãy thử thêm sự kiện ngăn chặn trong thuộc tính hành động javascript:return false;hoặc javascript:this.preventDefault();. Đừng thử với javascript:void(0);cái nào sẽ phá vỡ mã của bạn. Đừng hỏi tôi tại sao :-).

Tôi không nghĩ rằng đây là một cách thanh lịch để làm điều đó, nhưng trong trường hợp của tôi, tôi không có lựa chọn nào khác.

Cập nhật:

Nếu bạn đã nhận được một lỗi ... sau khi ajax được xử lý, sau đó loại bỏ hành động thuộc tính và trong onsubmitthuộc tính, thực hiện chức năng của bạn theo sau là trả về sai:

onsubmit="functionToRun(); return false;"

Tôi không biết tại sao tất cả những rắc rối này với Firefox, nhưng hy vọng điều này hoạt động.

Hàm trả về không hoạt động trong tất cả các trường hợp. Tôi đã thử điều này:

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

Nó không làm việc cho tôi.

Tôi đã cố gắng trả về false bên trong hàm và nó hoạt động với tôi.

function Reset()
{
    .
    .
    .
    return false;
}

Tôi đã phải đối mặt với cùng một vấn đề. Vấn đề là với onclickchức năng. Không nên có bất kỳ vấn đề với chức năng getData. Nó hoạt động bằng cách làm cho onclickhàm trả về false.

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

Đây là một giải pháp tốt nhất:

<form  method="post"> 
    <button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

Lưu ý: Mã của tôi rất đơn giản.

Bạn có thể sử dụng ajax và jquery để giải quyết vấn đề này:

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>