Có thể xóa biểu mẫu và đặt lại (tải lại) trang bằng một nút không?

Question

Tôi có một biểu mẫu trên trang nơi người dùng nhập nội dung nào đó vào và sau đó kết quả được trả lại và hiển thị trên trang. Có thể cho tôi có một nút có cả hai, xóa kết quả tìm kiếm và biểu mẫu cùng một lúc không?

Tôi biết rằng bạn có thể sử dụng nút <input type="reset" value="Reset"/> trên biểu mẫu để đặt lại biểu mẫu và cũng sử dụng mã sau để tải lại trang.

<input type="button" value="Clear Results" onClick="window.location.reload()">

Có thể có nút làm cả hai thứ ví dụ: xóa kết quả tìm kiếm và thiết lập lại các hình thức? Nó có thể được thực hiện bằng cách sử dụng JavaScript, nếu vậy làm thế nào?

Cảm ơn

Answer 1

Nếu bạn muốn chức năng của cả hai đoạn trích bạn đã đăng, bạn có thể chỉ cần kết hợp chúng.

<input type="reset" value="Reset" onClick="window.location.reload()"> 

(Ở đó, bây giờ bạn có thể chấp nhận câu trả lời của tôi XD)

Answer 2

bằng cách sử dụng JQuery, làm điều gì đó như thế này trên trang;

$(document).ready(function() { 
    resetForms(); 
}); 

function resetForms() { 
    for (i = 0; i < document.forms.length; i++) { 
     document.forms[i].reset(); 
    } 
} 

và sau đó chỉ sử dụng thông tin nhập thứ hai của bạn, biểu mẫu sẽ tự động làm mới khi tải trang sao lưu.

Answer 3

Tôi là một fan hâm mộ của @ đề nghị MikeyHogarth kể từ khi nó được gọi là bất kể như thế nào trang được làm mới. Đây là một trong những lần hiếm hoi mà tôi tìm thấy javascript thẳng để được đơn giản hơn jquery vì vậy tôi chỉ muốn thêm mã cho điều đó.

$(document).ready(function() { 
    resetForms(); 
}); 

function resetForms() { 
    document.forms['myFormName'].reset(); 
} 

này sử dụng các thuộc tính tên mẫu đơn, và nếu bạn muốn sử dụng biểu mẫu id thuộc tính sử dụng này để thay thế:

document.getElementById('myFormId').reset(); 

Answer 4

bạn chỉ có thể chuyển hướng trang đến vị trí hiện tại với mã này:

$('[data-command="reset"]').click(function() {  
    window.location.href = window.location.href; 
} 

---

<input type="button" value="Clear Results" data-command="reset">