Đ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ì mình 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 mình 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 mình 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

Chọn các lựa chọn với giá trị nhập vào

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 mình muốn chọn lựa chọn 4 US thì mình 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ế

Ở đây mình muốn 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

Đầu tiên mình sẽ cấu hình node Lấy thuộc tính để lấy ra tất cả giá trị của thuộc tính option trong các phần tử có selector chung là [data-selector="listing-page-variations"]>div:nth-child(1) select option[value].

Thông thường chỉ lấy giá trị của phần tử đầu tiên phù hợp với selector sau. Nhưng khi mình chọn lựa chọn Nhiều thì có thể lấy tất cả giá trị của tất cả phần tử có selector tương ứng.

Sau đó gán vào biến values. Khi đó biến value sẽ có dạng mảng

Tiếp theo, mình cấu hình node Chèn dữ liệu như sau

Giá trị được gán vào biến lengthV bằng biểu thức tính số lượng phần tử nằm trong biến values chứa danh sách các giá trị trong thuộc tính option

Giá trị được gán vào biến lastValue bằng biểu thức trừ bởi hàm subtract dùng để tính thứ tự của giá trị cuối cùng nằm trong danh sách giá trị của biến value

Giá trị được gán vào biến numValue bằng biểu thức tạo ngẫu nhiên một số nguyên trong khoảng giá trị từ 1 đến giá trị của biến lastValue. Ở đây mình để bắt đầu từ 1 do phần tử đầu tiên trong mảng có giá trị rỗng nên không thể lấy từ giá trị 0

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

Tương tự mình sẽ cấu hình cụm node để thực hiện chọn giá trị ở ô lựa chọn thứ hai như ô lựa chọn một

Khi đó cụm node để thực hiện chọn hai lựa chọn ở sản phẩm sẽ như sau