Dữ liệu nội dung yêu cầu sẽ được đặt vào
{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
7. Một vài ví dụ để giải mã các định dạng dữ liệu yêu cầu phổ biến{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
8{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
9<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
0
URL biểu mẫu được mã hóa
{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
8 là định dạng dữ liệu mặc định để gửi biểu mẫu<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
2sử dụng nhanh. phần mềm trung gian được mã hóa urlen
<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
3Chạy mã này và mở máy chủ cục bộ. 3000
Điền vào mẫu và gửi. Bạn sẽ thấy phản hồi
JSON
{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
9 chủ yếu được sử dụng cho các yêu cầu AJAX (XMLHttpRequest)sử dụng nhanh. json
<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
5Chạy mã này, mở localhost. 3000 và chuyển đổi bảng điều khiển web
Điền vào mẫu và gửi nó. Trong bảng điều khiển, bạn sẽ thấy phản hồi của máy chủ với dữ liệu bạn đã gửi
Dữ liệu biểu mẫu
<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
0 được sử dụng để gửi tệp hoặc đối tượng dữ liệu biểu mẫuExpress theo mặc định không có khả năng phân tích loại mã hóa này. Vì vậy, bạn có thể sử dụng phần mềm trung gian của nhiều người
Ví dụ: thử phần mềm trung gian
{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
80 để giải mã dạng nhiều phần chỉ có văn bản{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
81Trang ví dụ trông giống như trang đầu tiên
Chạy mã này và mở máy chủ cục bộ. 3000
Điền vào mẫu và gửi. Bạn sẽ thấy phản hồi
Đối với các tệp tải lên, bạn đọc phần «Cách sử dụng» trong tài liệu của multer. Dữ liệu tệp sẽ là nơi để
{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
82Dữ liệu được truy xuất ở định dạng tương tự như các tham số yêu cầu sẽ được gửi nếu biểu mẫu được gửi, vì vậy mô-đun này phù hợp để trích xuất dữ liệu biểu mẫu ở phía máy khách cho các dự án triển khai xử lý đẳng cấu của việc gửi biểu mẫu
Cài đặt
npm install get-form-dataKhu vực gói trình duyệt có sẵn, xuất hàm
<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
2 toàn cầu- get-form-data. js (phiên bản phát triển)
- get-form-data. tối thiểu. js (phiên bản sản xuất nén)
Cách sử dụng
Lấy dữ liệu biểu mẫu
Để lấy dữ liệu cho toàn bộ biểu mẫu, hãy sử dụng hàm
<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
3<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
let form = document.querySelector('#productForm')
let data = getFormData(form)
console.log(JSON.stringify(data))
{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
Lấy dữ liệu trường
Để lấy dữ liệu cho các trường biểu mẫu riêng lẻ (có thể chứa nhiều đầu vào biểu mẫu có cùng tên), hãy sử dụng hàm
<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
4, được hiển thị dưới dạng thuộc tính của<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
2________số 8
let form = document.querySelector('#tshirtForm')
let sizes = getFormData.getFieldData(form, 'sizes')
console.log(JSON.stringify(sizes))
<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
0Cắt đầu vào của người dùng
Để cắt đầu vào của người dùng, hãy chuyển tùy chọn
<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
6 thành<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
3 hoặc<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
4<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
4<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
5<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
6Bao gồm đầu vào bị vô hiệu hóa
Đầu vào bị vô hiệu hóa được bỏ qua theo mặc định;
<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
0Đầu vào tệp
Nếu có thể, dữ liệu được trích xuất từ
let form = document.querySelector('#productForm')
let data = getFormData(form)
console.log(JSON.stringify(data))
2 sẽ là đối tượnglet form = document.querySelector('#productForm')
let data = getFormData(form)
console.log(JSON.stringify(data))
3 gốcNếu thuộc tính
let form = document.querySelector('#productForm')
let data = getFormData(form)
console.log(JSON.stringify(data))
4 không có sẵn, thuộc tínhlet form = document.querySelector('#productForm')
let data = getFormData(form)
console.log(JSON.stringify(data))
5 sẽ được sử dụng để cung cấp dữ liệu thay thếAPI
let form = document.querySelector('#productForm')
let data = getFormData(form)
console.log(JSON.stringify(data))
6Trích xuất dữ liệu từ bộ sưu tập
let form = document.querySelector('#productForm')
let data = getFormData(form)
console.log(JSON.stringify(data))
8 củalet form = document.querySelector('#productForm')
let data = getFormData(form)
console.log(JSON.stringify(data))
7 - để sử dụnglet form = document.querySelector('#productForm')
let data = getFormData(form)
console.log(JSON.stringify(data))
8, đầu vào biểu mẫu phải có thuộc tính{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
0 hoặc{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
1. Vì nhiều đầu vào không thể có cùng một{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
1 và một{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
0 cho phép một đầu vào đủ điều kiện là một điều khiển thành công để gửi biểu mẫu, các thuộc tính{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
0 được ưu tiên hơn và sẽ được ưu tiên nếu có cả haiCác tùy chọn sau có thể được cấu hình
{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
5 (mặc định.{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
6) - nếu{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
7, khoảng trắng ở đầu và cuối sẽ bị cắt khỏi đầu vào của người dùng trong đầu vào biểu mẫu nhập văn bản{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
8 (mặc định.{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
6) - nếu{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
7, đầu vào bị vô hiệu hóa sẽ không bị bỏ qua
loại trả lại.
<form id="tshirtForm">
...
<label>Sizes:</label>
<div class="checkboxes">
<label><input type="checkbox" name="sizes" value="S"> S</label>
<label><input type="checkbox" name="sizes" value="M" checked> M</label>
<label><input type="checkbox" name="sizes" value="L" checked> L</label>
</div>
...
</form>
1Các thuộc tính trong đối tượng dữ liệu được trả về hầu hết phù hợp với những gì sẽ được gửi dưới dạng tham số yêu cầu nếu biểu mẫu đã được gửi
- Đầu vào bị vô hiệu hóa được bỏ qua theo mặc định
- Các kiểu nhập văn bản sẽ luôn đóng góp một giá trị, giá trị này sẽ là
<form id="tshirtForm">
...
<label>Sizes:</label>
<div class="checkboxes">
<label><input type="checkbox" name="sizes" value="S"> S</label>
<label><input type="checkbox" name="sizes" value="M" checked> M</label>
<label><input type="checkbox" name="sizes" value="L" checked> L</label>
</div>
...
</form>
2 nếu chúng trống - Đầu vào hộp kiểm sẽ chỉ đóng góp một giá trị nếu chúng được chọn, trong trường hợp đó, thuộc tính
<form id="tshirtForm">
...
<label>Sizes:</label>
<div class="checkboxes">
<label><input type="checkbox" name="sizes" value="S"> S</label>
<label><input type="checkbox" name="sizes" value="M" checked> M</label>
<label><input type="checkbox" name="sizes" value="L" checked> L</label>
</div>
...
</form>
3 của chúng sẽ được sử dụng - Các phần tử biểu mẫu đại diện cho nhiều giá trị (chọn nhiều hoặc nhiều đầu vào có cùng tên, đầu vào tệp có
<form id="tshirtForm">
...
<label>Sizes:</label>
<div class="checkboxes">
<label><input type="checkbox" name="sizes" value="S"> S</label>
<label><input type="checkbox" name="sizes" value="M" checked> M</label>
<label><input type="checkbox" name="sizes" value="L" checked> L</label>
</div>
...
</form>
4) sẽ chỉ đóng góp một giá trị nếu chúng có ít nhất một giá trị để gửi. Giá trị của chúng sẽ luôn được giữ trong một<form id="tshirtForm">
...
<label>Sizes:</label>
<div class="checkboxes">
<label><input type="checkbox" name="sizes" value="S"> S</label>
<label><input type="checkbox" name="sizes" value="M" checked> M</label>
<label><input type="checkbox" name="sizes" value="L" checked> L</label>
</div>
...
</form>
5, ngay cả khi chỉ có một
Ngoại lệ cho điều này là
- Nếu hộp kiểm được chọn không có thuộc tính
<form id="tshirtForm">
...
<label>Sizes:</label>
<div class="checkboxes">
<label><input type="checkbox" name="sizes" value="S"> S</label>
<label><input type="checkbox" name="sizes" value="M" checked> M</label>
<label><input type="checkbox" name="sizes" value="L" checked> L</label>
</div>
...
</form>
3, giá trị của nó sẽ là{"product": "1", "quantity": "9", "shipping": "express", "tos": true}
7. Thông thường, nó sẽ mặc định là<form id="tshirtForm">
...
<label>Sizes:</label>
<div class="checkboxes">
<label><input type="checkbox" name="sizes" value="S"> S</label>
<label><input type="checkbox" name="sizes" value="M" checked> M</label>
<label><input type="checkbox" name="sizes" value="L" checked> L</label>
</div>
...
</form>
8 khi được gửi, nhưng điều này không hữu ích bằng mặc định trên máy khách - Các nút hoàn toàn bị bỏ qua vì chỉ có thể xác định nút nào được tính là thành công sau khi được sử dụng để gửi biểu mẫu
<form id="tshirtForm">
...
<label>Sizes:</label>
<div class="checkboxes">
<label><input type="checkbox" name="sizes" value="S"> S</label>
<label><input type="checkbox" name="sizes" value="M" checked> M</label>
<label><input type="checkbox" name="sizes" value="L" checked> L</label>
</div>
...
</form>
9<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
4 là bản xuất có tên khi sử dụng các mô-đun ES, nếu không, nó cũng có sẵn dưới dạnglet form = document.querySelector('#tshirtForm')
let sizes = getFormData.getFieldData(form, 'sizes')
console.log(JSON.stringify(sizes))
1
Trích xuất dữ liệu cho trường được đặt tên từ bộ sưu tập
let form = document.querySelector('#productForm')
let data = getFormData(form)
console.log(JSON.stringify(data))
8 củalet form = document.querySelector('#productForm')
let data = getFormData(form)
console.log(JSON.stringify(data))
7Các tùy chọn như được ghi lại cho
<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
2loại trả lại.
let form = document.querySelector('#tshirtForm')
let sizes = getFormData.getFieldData(form, 'sizes')
console.log(JSON.stringify(sizes))
5Hàm này được sử dụng bởi
<form id="productForm">
...
<label>Product:</label>
<select name="product">
<option value="1" selected>T-shirt</option>
<option value="2">Hat</option>
<option value="3">Shoes</option>
</select>
<label>Quantity:</label>
<input type="number" name="quantity" min="0" step="1" value="9">
<label>Express shipping</label>
<p>Do you want to use <a href="/shipping#express">Express Shipping</a>?</p>
<div class="radios">
<label><input type="radio" name="shipping" value="express" checked> Yes</label>
<label><input type="radio" name="shipping" value="regular"> No</label>
</div>
<label>Terms of Service:</label>
<p>I have read and agree to the <a href="/">Terms of Service</a>.</p>
<label class="checkbox"><input type="checkbox" name="tos" checked> Yes</label>
...
</form>
3, vì vậy tài liệu về các giá trị trả về riêng lẻ ở trên cũng được áp dụnglet form = document.querySelector('#tshirtForm')
let sizes = getFormData.getFieldData(form, 'sizes')
console.log(JSON.stringify(sizes))
7 sẽ được trả lại nếu trường không tồn tại, bị vô hiệu hóa hoặc không đóng góp giá trị (e. g. các hộp kiểm không được chọn, nhiều lựa chọn không có lựa chọn nào, đầu vào tệp không có lựa chọn nào)