$[selector].get[0].reset[]

đầu ra

• Màn hình bên dưới hiển thị khi mã nguồn trên được thực thi

• Trong ví dụ này, chúng tôi có một biểu mẫu rất đơn giản chứa ba hộp nhập liệu và một liên kết bên ngoài biểu mẫu sẽ xóa các trường nhập liệu khi được nhấp vào

• Khi nhấp vào liên kết “Đặt lại biểu mẫu”, tất cả ba trường nhập liệu sẽ bị xóa tất cả các giá trị của chúng và biểu mẫu trở về trạng thái ban đầu
• Ở đây, chúng tôi đã sử dụng $[selector][0]. reset[] cách đặt lại biểu mẫu bằng jQuery

Ví dụ #2

Chúng ta hãy xem xét một ví dụ khác minh họa việc đặt lại biểu mẫu bằng jQuery

Mã số

$[document].ready[function [] {
$["#btn"].click[function [] {
$["#form"][0].reset[];
}];
}];


#divstyle1 {
width: 960px;
height: 610px;
margin: 50px auto;
font-family: "Droid Serif", serif;
position: relative;
}
#divstyle2 {
width: 320px;
float: left;
padding: 10px 60px 40px;
background: ghostwhite;
border: 1px dotted #ccc;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
}
label {
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 20px;
font-weight: bold;
}
h1 {
text-align: center;
font-size: 25px;
}
#btn {
font-size: 17px;
border: 1px solid gray;
padding: 7px 35px;
background-color: #e3b5f5;
font-weight: bold;
box-shadow: 0 0 5px;
border-radius: 2px;
cursor: pointer;
width: 100%;
}
input[type="text"] {
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
box-shadow: 0 0 5px;
border: 1px solid #b7b7b7;
color: #4f4f4f;
font-size: 20px;
}





jQuery Reset Form


Name :

Email :

Gender :
Male
Female

đầu ra

• Màn hình bên dưới hiển thị khi mã nguồn trên được thực thi

• Biểu mẫu đã cho chứa hai trường văn bản đầu vào và hai nút radio cùng với nút “Đặt lại”

• Khi nhấp vào nút “Đặt lại”, tất cả các trường nhập liệu sẽ bị xóa các giá trị để lại biểu mẫu ban đầu với các trường nhập liệu trống

Ví dụ #3

Ví dụ đã cho tương tự như ví dụ trước nhưng ở đây chúng tôi đã sử dụng một cách tiếp cận khác để đặt lại biểu mẫu, sử dụng phương thức trigger[] của jQuery

Mã số

Reset Form Using jQuery


$[document].ready[function [] {
$["#btn"].click[function [] {
$["#form"].trigger["reset"];
}];
}];


#divstyle1 {
width: 960px;
height: 610px;
margin: 50px auto;
font-family: "Droid Serif", serif;
position: relative;
}
#divstyle2 {
width: 320px;
float: left;
padding: 10px 60px 40px;
background: ghostwhite;
border: 1px dotted #ccc;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
}
label {
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 20px;
font-weight: bold;
}
h1 {
text-align: center;
font-size: 25px;
}
#btn {
font-size: 17px;
border: 1px solid gray;
padding: 7px 35px;
background-color: #e3b5f5;
font-weight: bold;
box-shadow: 0 0 5px;
border-radius: 2px;
cursor: pointer;
width: 100%;
}
input[type="text"] {
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
box-shadow: 0 0 5px;
border: 1px solid #b7b7b7;
color: #4f4f4f;
font-size: 20px;
}





jQuery Reset Form


Name :

Email :

Gender :
Male
Female

đầu ra

• Màn hình bên dưới hiển thị khi mã nguồn trên được thực thi

• Trong ví dụ này, chúng tôi đang sử dụng phương thức trigger[] của jQuery để thiết lập lại biểu mẫu

Kết luận – Biểu mẫu Đặt lại jQuery

• Trong bài viết này, chúng tôi đã thảo luận về cách chúng tôi có thể đặt lại biểu mẫu trong jQuery bằng hai cách khác nhau
• Cái đầu tiên, sử dụng phương thức reset[] của JavaScript gốc và cái thứ hai, sử dụng phương thức trigger[] của jQuery
• Để sử dụng cách tiếp cận đầu tiên, chúng ta cần chuyển đổi phần tử jQuery thành đối tượng JavaScript và sau đó gọi reset[]
• Đối với cách tiếp cận thứ hai, phương thức trigger[] của jQuery được sử dụng để kích hoạt JavaScript native reset[]

Bài viết được đề xuất

Đây là hướng dẫn về Biểu mẫu Đặt lại jQuery. Ở đây chúng tôi cũng thảo luận về phần giới thiệu và cú pháp cùng với các ví dụ khác nhau và cách triển khai mã của nó. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

Làm cách nào để viết hàm rõ ràng trong jQuery?

Làm cách nào để đặt lại biểu mẫu bằng ajax?

Đặt lại biểu mẫu [] là gì?

Làm cách nào để xóa tất cả các trường nhập bằng jQuery?