Tự động điền giá trị vào hộp văn bản bằng javascript

thêm các chuỗi truy vấn vào URL của trang trước khi gửi nó đến các liên hệ của bạn. Các trường sẽ được điền dựa trên chuỗi truy vấn được thêm vào. Điều này cũng hoạt động đối với các trường biểu mẫu ẩn .

Để tạo URL có chuỗi truy vấn, bạn cần sao chép tên thuộc tính nội bộ của bất kỳ trường nào bạn muốn điền trước, sau đó thêm chúng vào cuối URL trang của bạn

Xin lưu ý

  • Không thể sử dụng chuỗi truy vấn để tự động điền các trường biểu mẫu phụ thuộc . HubSpot cũng không thể kích hoạt các trường phụ thuộc dựa trên nhiều giá trị trong chuỗi truy vấn
  • Khi tự động điền các trường biểu mẫu bằng chuỗi truy vấn, bạn không thể sử dụng bất kỳ tham số bổ sung nào, chẳng hạn như tham số trong URL theo dõi. Làm như vậy có thể ngăn chuỗi truy vấn của bạn điền chính xác vào các trường biểu mẫu.

Sao chép tên nội bộ của thuộc tính

Để tìm tên nội bộ của thuộc tính

  • Trong tài khoản HubSpot của bạn, hãy nhấp vào biểu tượng cài đặt cài đặt trong thanh điều hướng chính.
  • Trong menu thanh bên trái, điều hướng đến Thuộc tính
  • Nhấp vào tên của một thuộc tính để điền trước các giá trị
  • Sao chép tên nội bộ của tài sản
  • Lặp lại điều này cho bất kỳ thuộc tính nào khác mà bạn muốn  điền trước giá trị cho biểu mẫu của mình.

Tự động điền giá trị vào hộp văn bản bằng javascript


Tạo chuỗi truy vấn tĩnh với các giá trị được xác định trước

Sau khi sao chép tên thuộc tính nội bộ, bạn có thể thiết lập URL trang mà bạn sẽ gửi cho các liên hệ của mình.  

  • Trong trình duyệt của bạn, hãy điều hướng đến trang mà biểu mẫu của bạn đang bật. Sau đó, sao chép URL
  • Thêm dấu chấm hỏi (?) vào cuối URL của trang
  • Thêm tên nội bộ của thuộc tính, theo sau là dấu bằng và mã thông báo cá nhân hóa. Đảm bảo tất cả khoảng trắng được xóa khỏi mã thông báo (e. g. , {{tiếp xúc. họ}} )

    (Bài viết này lấy một số kiến ​​thức đã biết về HTML, CSS và JavaScript. ) Bạn có thể nhận thấy rằng đôi khi các trang web như thương mại điện tử hoặc một số trang web của chính phủ có hai trường địa chỉ trong biểu mẫu của chúng. Một cho địa chỉ chính và một cho địa chỉ phụ (hoặc một cho địa chỉ thanh toán và một cho địa chỉ giao hàng, v.v.). Hầu hết thời gian mọi người có cùng địa chỉ chính và phụ và để giúp chúng tôi không phải nhập lại cùng một dữ liệu tẻ nhạt, họ có một số loại tùy chọn để tự động sao chép nội dung của trường này sang trường khác. Chúng ta sẽ xem cách tạo loại biểu mẫu Tự động hoàn thành như vậy bằng JavaScript. Trong biểu mẫu mà chúng ta sẽ thảo luận, có một hộp kiểm và bất cứ khi nào nó được chọn, mã sẽ tự động sao chép các giá trị từ địa chỉ chính và mã zip chính sang địa chỉ phụ và mã zip phụ tương ứng. Nếu hộp kiểm không được chọn, các trường này sẽ trống. Đây là mã đơn giản cho loại hình thức như vậy.  

    HTML




    <html lang="en">

        <____9>

    <1<<3 <4=<6 <7

    <1<html0html1html0>

    <1<____26>

    html8html9

    lang0lang1

    html8lang3

    <1lang5html6>

        lang5____9>

     

        <____44>

    <1<=8=9=8>

    <1<"en"4>

    html8"en"7

    html8<>0>

    lang0<>4>5>6>7>6>

    html8lang5>4>

    lang0______1    6     7=    9>

    lang0____12____76>

    lang0<<7 <8=head0

    head1head2____4head4

    head1head6=    9

    ________ 91 ________ 100 ________ 101 ________ 17

    lang0_______1    6     7=<08<09    6>

    lang0<<7 <8=head0

    head1head2____4<21

    head1head6=<08

    head1<27____4<29

    ________ 91 ________ 100 ________ 101 ________ 17

    html8lang5>0>

     

    html8<<7 <8=<43

    lang0head6____4<47

    lang0head2____4<47

    lang0<53____4<55 <7

    html8<    6     7=<47>

    html8<65

    <1lang5____76>

     

    html8<71

    html8<>0>

    lang0______1>4>5>6<81>6<83>4>

    lang0____1    6     7=<91>

    lang0<94

    html8lang5    6>

    lang0<<7 <8=head0

    head1head2____4head4

    head1____96=<91

    ________ 91 ________ 100 ________ 101 ________ 17

    lang0______1    6     7=html22>

    lang0html25    6>

    lang0<<7 <8=head0

    head1head2____4<21

    _______91____96____4html22

    head1<27____4<29

    ________ 91 ________ 100 ________ 101 ________ 17

    html8lang5>0>

    html8<<7 <8=html59

    lang0____261____4html63 <7

    <1lang5"en"4>

     

    <1<____271____6

    html8html74

    lang0html76

    lang0html78

    head1html80

    head1html82

    head1html80

    head1html86

    head1

    head1html80

    head1html91

    head1html80

    head1html95

    lang0html97

    head1html80

    head1lang01

    head1html80

    head1lang05

    lang0lang3

    html8lang3

    <1lang5____271>

        lang5=4>

    lang5html>

    #Đây là giao diện của biểu mẫu trước khi chọn hộp.

    Tự động điền giá trị vào hộp văn bản bằng javascript
    #Và đây là giao diện sau khi chọn hộp.
    Tự động điền giá trị vào hộp văn bản bằng javascript
    Lưu ý. các tính năng như

    • 'bắt buộc'(dòng 18, 20, 29, 31)-đảm bảo rằng biểu mẫu sẽ chỉ được gửi nếu các trường này không trống;
    • 'pattern = “[0-9]{6}”'(dòng 20, 31)-đảm bảo rằng định dạng của mã zip là chính xác. e. , mã zip sáu chữ số

    Giải trình. Khi trạng thái đã chọn của hộp kiểm bị thay đổi, sự kiện 'onchange'(xem dòng 23) sẽ xảy ra, sự kiện này sẽ gọi 'addressFunction()'. Nếu hộp được chọn, các giá trị của địa chỉ chính và mã zip chính sẽ được sao chép sang địa chỉ phụ và mã zip phụ (bằng cách sử dụng hàm 'getElementById()', chúng tôi đang đề cập đến một phần tử của một Id cụ thể và '. value' để truy cập giá trị tại phần tử Id cụ thể đó). Nếu không, các trường này sẽ để trống để người dùng có thể điền vào (trong trường hợp địa chỉ chính và địa chỉ phụ khác nhau)

    Làm cách nào để tự động điền vào hộp văn bản trong JavaScript?

    Khi chọn mục kết quả tự động hoàn thành, chức năng gọi lại chọn truy cập giao diện người dùng. đối tượng mục. Sử dụng đối tượng này, nó lấy id và tiêu đề bài đăng từ gói dữ liệu JSON. Sau đó, hàm gọi lại JavaScript này nhắm mục tiêu các hộp văn bản giao diện người dùng để điền tiêu đề và id của mục đã chọn

    Làm cách nào để tự động điền dữ liệu trong JavaScript?

    Tự động điền được hỗ trợ với Tự động điền trong điều khiển Tự động điền của JavaScript. Tự động điền hỗ trợ hành vi tự động điền với sự trợ giúp của thuộc tính tự động điền . Bất cứ khi nào bạn thay đổi giá trị đầu vào, AutoComplete sẽ tự động hoàn thành dữ liệu của bạn bằng cách khớp với ký tự đã nhập.

    Làm cách nào để thêm giá trị vào hộp văn bản bằng JavaScript?

    Để gán giá trị cho hộp văn bản bằng JavaScript, bạn có thể sử dụng phương thức được xác định trước của JavaScript có tên là phương thức setAttribute() hoặc thuộc tính giá trị của phần tử văn bản. Both of these approaches work efficiently for assigning value to the textbox. You can select one of them as per your requirement.

    Làm cách nào để tạo đầu vào tự động hoàn thành bằng JavaScript đơn giản?

    Tạo biểu mẫu tự động điền .
    .
    .