Xóa tất cả các trường đầu vào JavaScript

Xóa tất cả đầu vào. TextFields sử dụng jQuery - Trong đoạn mã này, chúng ta sẽ tìm hiểu cách xóa tất cả các trường đầu vào như loại văn bản đầu vào (hộp nhập) và trường TextArea trên Nút bấm

Khi chúng tôi thiết kế một biểu mẫu, sẽ có một nút "Xóa" sẽ xóa tất cả các hộp văn bản đầu vào và trường dấu cách, trong ví dụ này, chúng tôi cung cấp giải pháp thông qua jQuery. jQuery sẽ được chạy trên nút (Xóa) nhấp và xóa tất cả các hộp văn bản đầu vào cùng với trường vùng văn bản

Sử dụng nút 'Đặt lại' HTML là một cách dễ dàng để đặt lại tất cả các trường biểu mẫu về giá trị mặc định của chúng. Chẳng hạn, đoạn mã bên dưới hiển thị trường

<input type="button" value="Reset Form" onClick="this.form.reset()" />

<input type="reset" value="Reset Form">

Trên thực tế, chúng ta cũng có thể sử dụng phương pháp

<input type="button" value="Reset Form" onClick="this.form.reset()" />

<input type="button" value="Reset Form" onClick="this.form.reset()" />

Các phương pháp này rất thuận tiện để sử dụng, nhưng chúng không cung cấp chức năng xóa tất cả các trường, bao gồm cả các giá trị mặc định của chúng. Để đạt được điều này, chúng ta cần viết một hàm JavaScript để xóa giá trị của từng trường riêng lẻ

Ví dụ đơn giản để xóa tất cả các phần tử biểu mẫu bằng JavaScript

Chúng ta hãy xem một ví dụ về một hình thức đơn giản

<form name="data_entry" action="#">
 
Company Name: <input type="text" size="35" name="company_name">
 
Select Business Type: <input type="radio" name="business_category" value="1"> Manufacturer
<input type="radio" name="business_category" value="2"> Whole Sale Supplier
<input type="radio" name="business_category" value="3"> Retailer
<input type="radio" name="business_category" value="4"> Service Provider
 
Email Address: <input type="text" size="30" name="email">
 
Keep Information Private: <input type="checkbox" name="privacy">
 
<input type="button" name="reset_form" value="Reset Form" onclick="this.form.reset();">
 
<input type="button" name="clear" value="Clear Form" onclick="clearForm(this.form);">
</form>

Như bạn có thể thấy, nút đầu tiên chỉ cần đặt lại tất cả các trường bằng nút này. mẫu đơn. reset() như được mô tả trước đó. Bây giờ chúng ta hãy viết hàm JavaScript hoạt động như trình xử lý onClick cho nút thứ hai ở dạng trên

1. Trong chức năng này, trước tiên chúng ta cần có được một tham chiếu đến tất cả các phần tử trong đối tượng biểu mẫu

var frm_elements = oForm.elements; 

trong đó, oForm là một tham chiếu đến đối tượng biểu mẫu được truyền cho hàm bằng cách sử dụng. hình thức như thể hiện trong hình thức trên. oForm. các phần tử hiện là một mảng Javascript chứa tham chiếu đến từng phần tử của biểu mẫu

1. Sau đó, chúng ta sẽ phải lặp lại các đối tượng phần tử biểu mẫu riêng lẻ của mảng frm_elements (Bước 1), sử dụng cấu trúc vòng lặp for

for(i=0; i<frm_elements.length; i++)
{
    // code for accessing each element goes here
}

1. Chúng ta có thể tìm ra kiểu của từng thành phần biểu mẫu trong mảng frm_elements bằng cách truy xuất thuộc tính kiểu của nó

field_type = frm_elements[i].type.toLowerCase(); 

1. Nếu frm_elements[i] giữ một tham chiếu đến bất kỳ phần tử nào trong số các phần tử

   <input type="button" value="Reset Form" onClick="this.form.reset()" />
   

   3, thì giá trị của nó có thể bị xóa bằng cách chỉ cần đặt nó thành một chuỗi trống

frm_elements[i].value = ""; 

Trong trường hợp các phần tử radio và hộp kiểm, chúng tôi sẽ sử dụng một cách tiếp cận khác

<input type="reset" value="Reset Form">

Nếu frm_elements[i] là một đối tượng thuộc loại select (select-one hoặc select-multi), chúng ta có thể đặt thuộc tính selectIndex thành -1

<input type="reset" value="Reset Form">

1. Chúng ta có thể nhóm các kỹ thuật này bằng cách sử dụng chuyển đổi javascript, theo cách này

<input type="reset" value="Reset Form">

Hãy xem bản demo để xem nó hoạt động như thế nào và so sánh kết quả của việc nhấp vào nút đặt lại và nút với trình xử lý onClick tùy chỉnh mà chúng tôi vừa mã hóa. Bạn cũng có thể tải xuống mã từ đây

Minh họa sự khác biệt giữa đặt lại và xóa biểu mẫu

Như minh họa ở trên, hai nút hoạt động tương tự nhau, đối với biểu mẫu cụ thể này, bởi vì không có giá trị nào của các phần tử trong biểu mẫu này được đặt khi tải trang. Vì vậy, sự khác biệt giữa chức năng của hai nút là không thể nhìn thấy. Hãy để chúng tôi đặt giá trị mặc định cho một số thành phần biểu mẫu. Chẳng hạn, đoạn mã sau đặt mặc định cho phần tử radio có tên “business_category” thành giá trị 3

<input type="button" value="Reset Form" onClick="this.form.reset()" />

Tương tự như vậy, chúng ta cũng có thể đặt giá trị mặc định cho một số phần tử biểu mẫu khác. Xem bản trình diễn này để biết ví dụ và so sánh nó với bản trước đó. Như bạn đã nhận thấy, sự khác biệt bây giờ là rõ ràng, vì nút Đặt lại không xóa các giá trị mặc định, không giống như nút khác.

Làm cách nào để đặt lại đầu vào trong JavaScript?

Làm cách nào để xóa giá trị trường đầu vào trong JavaScript sau khi gửi?