Sharecs.net
  • Trang chủ
  • Kho Tài Liệu – Báo Cáo
  • Thủ Thuật
    • Thủ thuật máy tính
      • Windows
      • MacOS
      • Linux
    • Thủ thuật internet
    • Thủ thuật phần mềm
  • Lỗi máy tính
    • Lỗi internet
    • Lỗi windows
    • Lỗi phần mềm
  • Lập Trình
    • Lập Trình Java
    • Lập trình Python
    • Lập Trình React Native
    • Code Hay
  • Linh Tinh
    • PhotoShop
    • Tải Video Wallpaper
    • Kho Tools
      • Cân Bằng Phương Trình Hóa Học
      • Custom Css Scrollbar – Render Code
      • Tạo Kí Tự Đặc Biệt Online
      • Tạo Deep Link
    • Tài Liệu – Luận Văn – Báo Cáo
    • Kho Theme Website WordPress
    • Phần Mềm
No Result
View All Result
  • Trang chủ
  • Kho Tài Liệu – Báo Cáo
  • Thủ Thuật
    • Thủ thuật máy tính
      • Windows
      • MacOS
      • Linux
    • Thủ thuật internet
    • Thủ thuật phần mềm
  • Lỗi máy tính
    • Lỗi internet
    • Lỗi windows
    • Lỗi phần mềm
  • Lập Trình
    • Lập Trình Java
    • Lập trình Python
    • Lập Trình React Native
    • Code Hay
  • Linh Tinh
    • PhotoShop
    • Tải Video Wallpaper
    • Kho Tools
      • Cân Bằng Phương Trình Hóa Học
      • Custom Css Scrollbar – Render Code
      • Tạo Kí Tự Đặc Biệt Online
      • Tạo Deep Link
    • Tài Liệu – Luận Văn – Báo Cáo
    • Kho Theme Website WordPress
    • Phần Mềm
No Result
View All Result
Sharecs.net
No Result
View All Result
Home Lập Trình Wordpress

2 Bước Thêm Chọn Tỉnh Thành Vào Contact Form 7

by Nguyễn Tuấn
22/04/2023

Hey men! Tự dưng đang ngồi lướt facbook thì thấy một số bạn cần thêm bộ chọn Tỉnh Thành – Quận Huyện – Phường Xã Vào Contact Form 7. Mình thấy cũng hay chắc cũng nhiều nơi hướng dẫn nhưng có thể dài dòng nên mình sẽ hướng dẫn các bạn Thêm Chọn Tỉnh Thành Vào Contact Form 7 một cách rất là nhanh. Chỉ 3 phút thôi.

Lưu ý: Code này các bạn có thể thêm ở bất cứ đâu, không nhất thiết phải trong Contact Form 7…

Thêm Chọn Tỉnh Thành Vào Contact Form 7

Bước 1: Các bạn vào chỉnh sửa ctf7 và thêm đoạn code sau vào:

/* Code thêm vào Contact Form 7*/
<div class="form-row">
<div class="column-half">Thành phố [select city id:city "Chọn"]</div>
<div class="column-half">Quận huyện [select district id:district "Chọn"]</div>
</div>

<div class="form-row">
<div class="column-full">Phường xã [select ward id:ward "Chọn"]</div>
</div>

/* Code html này các bạn có thể tùy biến thêm vào bất cứ đâu */
<div>
<select id="city">
<option value="" selected>Chọn tỉnh thành</option>           
</select>
          
<select id="district">
<option value="" selected>Chọn quận huyện</option>
</select>

<select id="ward">
<option value="" selected>Chọn phường xã</option>
</select>
 </div>   

Đoạn trên mình thêm bộ chọn select vào contact from 7. Các bạn có thể thay đổi tùy chỉnh nhưng bắt buộc phải có những phần sau:

[select city id:city “Chọn”]

[select district id:district “Chọn”]

[select ward id:ward “Chọn”]

Select chon nhanh tinh Thanh Quan huyen 2023
Thêm Chọn Tỉnh Thành Vào Contact Form 7

Bước 2: Các bạn copy đoạn code SCRIPTS sau và thêm vào trong theme của mình. Ví dụ mình dùng theme Flatsome thì chọn: Flatsome -> Advanced -> Global Settings -> FOOTER SCRIPTS

Them tuy chon tinh thanh phuong xa vao Contact Form 7 2023
Thêm tùy chọn tỉnh thành, phường xã vào Contact Form 7
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script>
	var citis = document.getElementById("city");
var districts = document.getElementById("district");
var wards = document.getElementById("ward");
var Parameter = {
  url: "https://raw.githubusercontent.com/kenzouno1/DiaGioiHanhChinhVN/master/data.json", 
  method: "GET", 
  responseType: "application/json", 
};
var promise = axios(Parameter);
promise.then(function (result) {
  renderCity(result.data);
});

function renderCity(data) {
  for (const x of data) {
	var opt = document.createElement('option');
	 opt.value = x.Name;
	 opt.text = x.Name;
	 opt.setAttribute('data-id', x.Id);
	 citis.options.add(opt);
  }
  citis.onchange = function () {
    district.length = 1;
    ward.length = 1;
    if(this.options[this.selectedIndex].dataset.id != ""){
      const result = data.filter(n => n.Id === this.options[this.selectedIndex].dataset.id);

      for (const k of result[0].Districts) {
		var opt = document.createElement('option');
		 opt.value = k.Name;
		 opt.text = k.Name;
		 opt.setAttribute('data-id', k.Id);
		 district.options.add(opt);
      }
    }
  };
  district.onchange = function () {
    ward.length = 1;
    const dataCity = data.filter((n) => n.Id === citis.options[citis.selectedIndex].dataset.id);
    if (this.options[this.selectedIndex].dataset.id != "") {
      const dataWards = dataCity[0].Districts.filter(n => n.Id === this.options[this.selectedIndex].dataset.id)[0].Wards;

      for (const w of dataWards) {
		var opt = document.createElement('option');
		 opt.value = w.Name;
		 opt.text = w.Name;
		 opt.setAttribute('data-id', w.Id);
		 wards.options.add(opt);
      }
    }
  };
}
	</script>

Cảm ơn các bạn đã ghé thăm. Chúc các bạn thành công!

3.8/5 - (6 bình chọn)
Source: Cáo đêm
Tags: Contact Formctfshare codewordpress
ShareSendTweetShare

Cùng chuyên mục

html javascript 2023

Share Code Đếm Ngược Thời Gian – Bao nhiêu ngày nữa đến tết

22/04/2023
10
Đồ Án Cấu Trúc Dữ Liệu Và Giải Thuật – Full Báo Cáo

Đồ Án Cấu Trúc Dữ Liệu Và Giải Thuật – Full Báo Cáo

22/04/2023
238
Đồ Án Winform C# Code Quản Lý Giảng Viên

Đồ Án Winform C# Code Quản Lý Giảng Viên

22/04/2023
1.1k
Code Shoppe Tìm Kiếm Biến Thể Sản Phẩm Được Mua Nhiều Nhất

Code Shoppe Tìm Kiếm Biến Thể Sản Phẩm Được Mua Nhiều Nhất

22/04/2023
98
4 Mẫu Code Chèn Hotline – Facebook – Zalo Vào Website

4 Mẫu Code Chèn Hotline – Facebook – Zalo Vào Website

22/04/2023
916
Code Music Player Bằng JavaScript

Code Music Player Bằng JavaScript

22/04/2023
297
Load More

Tài nguyên

Luận văn báo cáo giá rẻ

Cân bằng phương trình phản ứng hóa

Tạo deep link

Custom Css Scrollbar – Render Code

Bài Viết Nổi Bật

  • Download Video Wallpaper Agatsuma Zenitsu – Anime Kimetsu No Yaiba

    Download Video Wallpaper Agatsuma Zenitsu – Anime Kimetsu No Yaiba

    45 shares
    Share 0 Tweet 0
  • 500 Câu Trắc Nghiệm Mạng Máy Tính Phần 1 Có Đáp Án

    0 shares
    Share 0 Tweet 0
  • Bài Tập Code Python Đơn Giản Có Lời Giải – Phần 1

    1 shares
    Share 0 Tweet 0
  • Chia Sẻ Full Key Bản Quyền Adobe CS6 Trọn Bộ

    0 shares
    Share 0 Tweet 0
  • 14 Code Notepad Troll Hack Máy Tính

    0 shares
    Share 0 Tweet 0

Super trong java là gì ?

Get IP Address Server In Java

Share Code Đếm Ngược Thời Gian – Bao nhiêu ngày nữa đến tết

Generate random string – number in Java

15 Thuật Ngữ Cần Biết Khi Quảng Cáo FACEBOOK

Cách sửa đổi file XML trong Java (DOM Parser)

  • Giới Thiệu & Liên Hệ
  • Chính Sách Bảo Mật

CopyRight By Sharecs.net DMCA.com Protection Status

No Result
View All Result
  • Trang chủ
  • Kho Tài Liệu – Báo Cáo
  • Thủ Thuật
    • Thủ thuật máy tính
      • Windows
      • MacOS
      • Linux
    • Thủ thuật internet
    • Thủ thuật phần mềm
  • Lỗi máy tính
    • Lỗi internet
    • Lỗi windows
    • Lỗi phần mềm
  • Lập Trình
    • Lập Trình Java
    • Lập trình Python
    • Lập Trình React Native
    • Code Hay
  • Linh Tinh
    • PhotoShop
    • Tải Video Wallpaper
    • Kho Tools
      • Cân Bằng Phương Trình Hóa Học
      • Custom Css Scrollbar – Render Code
      • Tạo Kí Tự Đặc Biệt Online
      • Tạo Deep Link
    • Tài Liệu – Luận Văn – Báo Cáo
    • Kho Theme Website WordPress
    • Phần Mềm

CopyRight By Sharecs.net DMCA.com Protection Status

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.