Bạn đang xem : nút xóa trong javascript

Sử dụng nút ‘Đặt lại’ trong 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. Ví dụ: đoạn mã bên dưới hiển thị trường & lt; input & gt; thuộc loại “đặt lại”, khi được nhấp vào sẽ đặt lại tất cả các trường biểu mẫu:

  & lt; 

đầu vào

loại

=

"đặt lại"

< p> value

=

"Đặt lại biểu mẫu"

& gt;

Trên thực tế, chúng tôi cũng có thể sử dụng phương thức reset () của biểu mẫu để đạt được hiệu quả tương tự, bằng cách sử dụng một phần tử nút đơn giản:

  & lt; 

đầu vào

loại

=

"nút"

< p> value

=

"Đặt lại biểu mẫu"

onClick

=

"this.form. đặt lại () "

/ & gt;

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, kể cả các giá trị mặc định của chúng. Để đạt được điều này, chúng tôi 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

Hãy để chúng tôi xem xét một ví dụ về một biểu mẫu đơn giản

  & lt; 

biểu mẫu

tên

=

"data_entry"

< p> hành động

=

"#"

& gt; Tên Công ty: & lt;

đầu vào

loại

=

"văn bản"

kích thước

=

"35"

tên

=

"company_name"

& gt; Chọn Loại hình Doanh nghiệp: & lt;

đầu vào

loại

=

"radio"

tên

=

"business_category"

value

=

"1"

& gt; nhà chế tạo & lt;

đầu vào

loại

=

"radio"

tên

=

"business_category"

value

=

"2"

& gt; Nhà cung cấp bán toàn bộ & lt;

đầu vào

loại

=

"radio"

tên

=

"business_category"

value

=

"3"

& gt; Nhà bán lẻ & lt;

đầu vào

loại

=

"radio"

tên

=

"business_category"

value

=

"4"

& gt; Nhà cung cấp dịch vụ Địa chỉ Email: & lt;

đầu vào

loại

=

"văn bản"

kích thước

=

"30"

tên

=

"email"

& gt; Giữ Thông tin Riêng tư: & lt;

đầu vào

loại

=

"hộp kiểm"

tên

=

"quyền riêng tư"

& gt; & lt;

đầu vào

loại

=

"nút"

tên

=

"reset_form"

giá trị

=

"Đặt lại biểu mẫu"

onclick

=

"this.form.reset ();"

& gt; & lt;

đầu vào

loại

=

"nút"

tên

=

"clear"

value

=

"Clear Form"

onclick

=

"clearForm (this.form);"

& gt; & lt; /

biểu mẫu

& gt;

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 cách sử dụng this.form.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 trong biểu mẫu trên.

  1. Trong hàm này, trước tiên chúng ta cần lấy 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 vào hàm bằng this.form như được hiển thị trong biểu mẫu ở trên. oForm.elements hiện là một mảng Javascript chứa một tham chiếu đến từng phần tử biểu mẫu.

  1. Sau đó, chúng tôi 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:
  

cho

(i

​​=

0

; i

​​& lt;

frm_elements.length; i

​​++

) {

// mã để truy cập từng phần tử ở đây

}
  1. Chúng tôi có thể tìm ra kiểu của từng phần tử 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] có tham chiếu đến bất kỳ & lt; text & gt ;, & lt; password & gt ;, & lt; textarea & gt; và phần tử & lt; hidden & gt; , bạn có thể xóa giá trị của nó 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:

 

nếu

(frm_elements [i] .checked) { frm_elements [i] .checked

=

false

; }

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

  frm_elements [i] .selectedIndex 

=

-

1

;
  1. Chúng tôi có thể nhóm các kỹ thuật này bằng cách sử dụng công tắc javascript, theo cách này:
 

cho

(i

​​=

0

; i

​​& lt;

frm_elements.length; i

​​++ ) { field_type

=

frm_elements [i] .type.toLowerCase ();

chuyển đổi

(field_type) {

trường hợp

"văn bản"

:

trường hợp

"mật khẩu"

:

trường hợp

"textarea"

:

trường hợp

"ẩn"

:

frm_elements [i] .value

=

""

;

ngắt

;

trường hợp

"radio"

:

trường hợp

"hộp kiểm"

:

nếu

(frm_elements [i] .checked) { frm_elements [i] .checked

=

sai

; }

ngắt

;

trường hợp

"select-one"

:

trường hợp

"select-multi"

:

frm_elements [i] .selectedIndex

=

-

1

;

ngắt

;

mặc định

:

ngắt

; } }

Hãy xem bản trình diễn để 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 có vừa được 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ự, đối với biểu mẫu cụ thể này, 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 hoạt độ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ố phần tử biểu mẫu. Ví dụ: đoạn mã sau đặt giá trị mặc định cho phần tử radio có tên “business_category” thành giá trị 3.

 
& lt; 

đầu vào

loại

=

"radio"

tên

=

"business_category"

value

=

"1"

& gt; Nhà sản xuất & lt;

đầu vào

loại

=

"radio"

tên

=

"business_category"

value

=

"2"

& gt; Nhà cung cấp Bán toàn bộ & lt;

đầu vào

loại

=

"radio"

tên

=

"business_category"

value

=

"3"

đã chọn

& gt; Nhà bán lẻ & lt;

đầu vào

loại

=

"radio"

tên

=

"business_category"

value

=

"4"

& gt; Nhà cung cấp dịch vụ

Tương tự như vậy, chúng tôi cũng có thể đặt giá trị mặc định cho một số phần tử biểu mẫu khác. Hãy xem bản trình diễn này để làm ví dụ và so sánh với bản trước đó . Như bạn đã nhận thấy, sự khác biệt hiện đã 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.

Tải xuống mã

Xem thêm


Xem thêm những thông tin liên quan đến chủ đề nút xóa trong javascript

03. Thêm Sửa Xoá JavaScript: Sửa dữ liệu từ localStorage.

  • Tác giả: ZoneX Dev
  • Ngày đăng: 2022-02-06
  • Đánh giá: 4 ⭐ ( 6286 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tham khảo khoá học FRONT END tại: https://zonexdev.online/
    ➥ Tiktok: https://www.tiktok.com/@thhxxx
    ➥ Facebook Fanpage: https://www.facebook.com/zoneXdev

    javascript htmlcss frontend reactjs

Hướng dẫn hiển thị nút Xóa, Delete, Clear cho thẻ Input

  • Tác giả: www.giaodienblog.net
  • Đánh giá: 5 ⭐ ( 3666 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn hiển thị nút Xóa, Delete, Clear cho thẻ Input. Hướng dẫn các bạn cách làm hiển thị biểu tượng ico xóa cho thẻ Input đơn giản nhất, thích hợp để áp dụng cho khung search, khung tìm kiếm cho blogspot

Làm cách nào để xóa một phần tử HTML bằng Javascript?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 7810 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Điều đang xảy ra là biểu mẫu đang được gửi đi, và vì vậy trang đang…

Thêm / Xóa phần tử thông qua JS DOM

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 4 ⭐ ( 4755 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học JavaScript này, bạn sẽ tìm hiểu cách thao tác thêm / Xóa các phần tử trong JavaScript. (Hay còn gọi là thao tác với DOM)

Cách tắt một nút bằng JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 5 ⭐ ( 7913 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 6: DOM – Xử lý các phần tử HTML trong Javascript

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 4159 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, chúng ta sẽ tìm hiểu một phần rất quan trọng là DOM – xử lý các phần tử HTML trong Javascript. Qua bài học này, chúng ta sẽ biết các truy xuất, lấy dữ liệu, các thuộc tính từ các thẻ html, cũng như cách thêm, xóa các thẻ html.

Cách tạo nút Hủy HTML chuyển hướng đến URL

  • Tác giả: vi.uwenku.com
  • Đánh giá: 5 ⭐ ( 9895 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang phát với Buttons in the w3schools Tryit editor và tôi đang cố gắng tìm hiểu cách làm cho trình duyệt của tôi chuyển hướng đến URL khi tôi nhấp vào nút

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Phương thức và lớp trừu tượng C # (Với các ví dụ) - lớp trừu tượng trong c # là gì với ví dụ

By ads_php