Đ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
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
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
Để 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ản
và Select
Đầ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ử
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
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
Mình được cụm node như sau
Khi chạy thì một giá trị ngẫu nhiên được chọn bởi node Điền biểu mẫu