Skip to content

Điền Biểu Mẫu

Nhận hoặc điền giá trị của một thành phần biểu mẫu (đầu vào, chọn, hộp kiểm và radio).

Bộ chọn phần tử

Chọn phần tử rồi nhập vào bằng bộ chọn phần tử.

Tuỳ chọn bộ chọn

Lựa chọn các tuỳ chọn mong muốn

Trích xuất giá trị từ biểu mẫu

Khi chọn lựa chọn này thì bạn có thể lấy ra giá trị từ biểu mẫu nhưng không thực hiện các hành động chọn hay điền giá trị ở biểu mẫu đó nữa

Gán cho biến

Có thể gán giá trị vào một biến .

  • Tên Biến: Tên biến để gán giá trị. Trường này xuất hiện khi bạn chọn gán cho biến

Chèn vào bảng

Có thể chèn giá trị vào cột trong bảng

  • Chọn cột: Cột nơi giá trị được chèn. Trường này xuất hiện khi bạn chọn chèn vào bảng

Điền văn bản

Điền văn bản vào các trường văn bản như <input> và <textarea>.

Giá Trị

Giá trị muốn điền vào trường văn bản

Xoá giá trị cũ trước khi điền

Xoá giá trị của phần tử trường văn bản trước khi chèn phần tử mới.

Nhập độ trễ

Thêm độ trễ khi chèn từng ký tự của giá trị. Khi được đặt thành 0, giá trị sẽ được chèn cùng một lúc.

Select

Có thể chọn các lựa chọn như

Chú ý

Để có thể sử dụng được lựa chọn này, mình phải kiểm tra phần tử đó có dạng thẻ select option value như trong ảnh

Attributes

Giá trị

Giá trị của phần tử nằm trong thẻ select.

Giá trị cần điền vào đây chính là giá trị của thuộc tính value bên trong thẻ của lựa chọn đó. Chẳng hạn bạn muốn chọn lựa chọn 4 US thì bạn cần điều giá trị trong thẻ value là 4181830684

Attributes

Lựa chọn đầu tiên

Chọn lựa chọn đầu tiên trong danh sách lựa chọn

Lựa chọn cuối

Chọn lựa chọn cuối cùng trong danh sách lựa chọn

Lựa chọn thứ tự tuỳ chỉnh

Chọn thứ tự lựa chọn tuỳ ý trong danh sách lựa chọn

Xoá giá trị cũ trước khi điền

Xoá giá trị của phần tử trường văn bản trước khi chèn phần tử mới.

Checkbox

  • Tích chọn/ Bỏ chọn: Có thể tích chọn hoặc bỏ chọn khi đã được chọn.

Radio

  • Tích chọn/ Bỏ chọn: Có thể tích chọn hoặc bỏ chọn khi đã được chọn.

Ví dụ thực tế

Ví dụ sử dụng Điền văn bản và Select

Ví dụ

Ở đây mình sẽ cần điền văn bản và chọn các lựa chọn của sản phẩm sau trước khi thêm vào giỏ hàng

Attributes

Để có thể làm được điều đó, mình sử dụng các node Điền biểu mẫu với loại Điền văn bảnSelect

Đầu tiên mình sẽ cấu hình node Điền biểu mẫu với phần tử Select đầu tiên. Để có thể chọn giá trị trong phần tử đó mình cần lấy được selector của phần cần select đó. Ở đây mình đã lấy được selector của select đó là [data-selector="listing-page-variations"]>div:nth-child(1) select

Tiếp theo, mình sẽ cấu hình để chọn ngẫu nhiên một giá trị trong danh sách giá trị đó.

Mình cần lấy ra danh sách giá trị của lựa chọn đó. Để lấy ra danh sách giá trị, mình sẽ sử dụng cụm node Lặp dữ liệu, Lấy thuộc tính, Dừng lặp

Đầu tiên lấy selector chung cho các phần tử option trong thẻ select, ở đây mình đã lấy được selector đó là [data-selector="listing-page-variations"]>div:nth-child(1) select option[value].

Tiếp theo cấu hình node Lặp dữ liệu như sau để có thể lấy ra ngẫu nhiên một phần tử trong danh sách phần tử

Attributes

Tiếp theo cấu hình node Lấy thuộc tính như sau để có thể lấy ra giá trị của phần tử vừa được lấy ngẫu nhiên từ node Lặp dữ liệu sau đó chèn vào một biến value để sử dụng

Attributes

Cuối cùng nối với node Dừng lặp

Sau đó nối với node Điền biểu mẫu để điền giá trị vừa lấy ra từ cụm node trên và cấu hình như sau

Attributes

Mình được cụm node như sau

Attributes

Khi chạy thì một giá trị ngẫu nhiên được chọn bởi node Điền biểu mẫu

Attributes