Cách đặt lại các phần tử biểu mẫu (đầu vào, chọn, văn bản, v.v.) trên các sự kiện bằng cách sử dụng jQuery

Question

Tôi cần phải đặt lại các phần tử biểu mẫu sau khoảng thời gian nhấp chuột.

Có phương pháp nào để đặt lại từ jQuery mà không chọn từng phần tử và xóa giá trị thuộc tính.

Một số yếu tố không có giá trị thuộc tính như textarea hoặc radio

Và một số như nút Tôi không muốn để loại bỏ các giá trị từ nó.

Tôi muốn sử dụng jQuery để sử dụng các thiết lập lại trên các sự kiện khác

Mã ví dụ http://jsfiddle.net/pgNrF/

<input type="button" value="Input Button"> 
<input type="checkbox"> 
<input type="hidden"> 
<textarea></textarea> 
<span>Reset</span> 

Answer 1

này đã được xây dựng tại nếu bạn quấn những yếu tố hình thức trong một hình thức thực tế:

<form id="myform"> 
    <input type="button" value="Input Button"> 
    <input type="checkbox"> 
    <input type="file"> 
    <input type="hidden"> 
    <input type="image"> 
    <input type="password"> 
    <input type="radio"> 
    <input type="submit"> 
    <input type="text"> 
    <select> 
     <option>Option1</option> 
     <option>Option2</option> 
     <option>Option3</option> 
    </select> 

    <textarea></textarea> 
    <button type="button">Button</button> 

    <button type="reset">Reset</span> 
</form> 

FIDDLE

Nếu bạn chỉ cần sử dụng jQuery:

$('span').click(function() { 
    $('#myform').get(0).reset(); 
}); 

FIDDLE

Answer 2

Thay đổi

<span>Reset</span> 

để

<input type='reset' value='Reset'> 

Nó được thực hiện để đặt lại tất cả các giá trị biểu mẫu thành giá trị mặc định.

Nếu bạn cũng cần phải unbind một số sự kiện mà bạn có thể làm điều đó bằng jQuery:

$("input:reset").click(function() { 
    // unbind and reset what is left 
}); 

Answer 3

nếu không sử dụng <form>, sau đó sử dụng jQuery -

$('span').click(function() { 
    $("input").val("") 
    $("select option").removeAttr("selected"); 
    $("textarea").val(""); 
}); 

Answer 4

Nếu bạn không sử dụng nút reset xin vui lòng sử dụng mã jquery này

$('span').click(function() { 
    $('input').val(''); 
    $("textarea").val(''); 

}); 

Answer 5

Một bình luận cuối về đặt textareas.

Sử dụng phiên bản Chrome Phiên bản 54.0.2840.99 m trên PC chạy Windows 10 Phiên bản chính, tôi thấy rằng hàm khởi tạo gốc/được cài sẵn được gọi bằng nút đặt lại thông thường/chưa sửa đổi hoặc câu lệnh form.reset() không khôi phục giá trị trường ban đầu của một vùng văn bản, nhưng chỉ khi vùng văn bản trước đó không bị xóa theo chương trình, hãy nói với một nút tùy chỉnh rõ ràng làm trống bên trong của textarea. Điều này không thể quan sát được khi vùng văn bản được nạp lần đầu mà không có giá trị mặc định, nhưng nếu vùng văn bản được mã hóa để hiển thị dữ liệu từ lần đăng trước của biểu mẫu, thì vùng văn bản có thể không trống và đặt lại vùng văn bản đặt trường thành giá trị mà nó có khi biểu mẫu được tải.

Những gì tôi thấy là thuộc tính defaultValue mặc định của textarea được xóa không chính xác khi innerHTML của textarea được dọn sạch và các lần đặt lại sau đó chỉ xóa văn bản thay vì đặt lại vùng văn bản như mong đợi. Tôi coi đây là lỗi vì so sánh với việc xóa và đặt lại các trường nhập văn bản khác, văn bản hoạt động khác nhau.

Hành vi 'kỳ quặc' này có thể được giải quyết bằng cách thêm thuộc tính initialValue tùy chỉnh vào vùng văn bản và gán giá trị innerHTML cho nó. Vì hàm reset mặc định và tùy chỉnh không ảnh hưởng đến thuộc tính tùy chỉnh, giá trị được giữ nguyên và có thể được sử dụng để khôi phục giá trị của textarea bằng cách ghi đè nút đặt lại để gọi hàm để đặt innerHTML của textarea thành giá trị của thuộc tính initialValue và sau đó gọi hàm form.reset() để xử lý các trường nhập khác. Lưu ý rằng việc gọi hàm form.reset() gây ra hàm reset mặc định được gọi bởi nút reset đã được sửa đổi để không thực thi bất kỳ mã nào sau form.reset().