如何将html表单中的数据转换成json格式
Posted
技术标签:
【中文标题】如何将html表单中的数据转换成json格式【英文标题】：how to get data from html form into a json format 【发布时间】：2022-01-10 08:49:09 【问题描述】：我正在建立一个电子商务网站。所以，我创建了一个计费表单，在该表单中，我想收集电子邮件、地址等内容并将其传递为 json 格式，以便将其传递给支付网关。
我尝试在变量中创建它并传递它，但在支付网关重定向模态表单上，它说 invalid email input
代码
const publicKey = " key ";
var email = document.getElementById('email').value;
var fullname = document.getElementById('fullName').value;
var address1 = document.getElementById('custAdd').value;
var address2 = document.getElementById('custAdd2').value;
var country = document.getElementById('country').value;
var state = document.getElementById('state').value;
var address1 = document.getElementById('postCode').value;
function payWithRave()
var x = getpaidSetup(
PBFPubKey: "xxxxxx",
email: email,
amount: 'cart.get_total_price',
customer_phone: "234099940409",
currency: "USD",
address: 'address1',
address2: 'address2',
country: 'country',
state: 'state',
postcode: 'postCode',
)
<div class="col-sm-7">
<label for="firstName" class="form-label">Full Name</label>
<input type="text" class="form-control" id="fullName" placeholder="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-12">
<label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
<div class="col-12">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="custAdd" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div class="col-12">
<label for="address2" class="form-label">Address 2 <span
class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="custAdd2" placeholder="Apartment or suite">
</div>
<div class="col-md-5">
<label for="country" class="form-label">Country</label>
<select class="form-select" id="country" required>
<option value="">Choose...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<div class="col-md-4">
<label for="state" class="form-label">State</label>
<select class="form-select" id="state" required>
<option value="">Choose...</option>
<option>California</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3">
<label for="Postcode" class="form-label">Postcode</label>
<input type="text" class="form-control" id="postCode" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
</div>
</div>
</div>
<hr class="my-4">
<button type="button" class="btn btn-primary w-100 fw-bold" onClick="payWithRave()">Pay $cart.get_total_price</button>
【问题讨论】：
从 vars 中删除冒号右侧的引号："address": address1, "address2": address2, "country": country, "state": state, "postcode": postCode,
您没有显示任何电子邮件验证。您的脚本不完整
【参考方案1】：
const publicKey = " key ";
const payWithRave = (ev) =>
ev.preventDefault();
let x =
PBFPubKey: "xxxxxx",
fullname: document.getElementById('fullName').value,
email: document.getElementById('email').value,
amount: 'cart.get_total_price',
customer_phone: "234099940409",
currency: "USD",
address: document.getElementById('custAdd').value,
address2: document.getElementById('custAdd2').value,
country: document.getElementById('country').value,
state: document.getElementById('state').value,
postcode: document.getElementById('postCode').value,
console.log(x);
document.addEventListener('DOMContentLoaded', () =>
document.getElementById('btn').addEventListener('click', payWithRave);
)<!DOCTYPE html>
<html>
<body>
<div class="col-sm-7">
<label for="firstName" class="form-label">Full Name</label>
<input type="text" class="form-control" id="fullName" placeholder="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-12">
<label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
<div class="col-12">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="custAdd" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div class="col-12">
<label for="address2" class="form-label">Address 2 <span
class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="custAdd2" placeholder="Apartment or suite">
</div>
<div class="col-md-5">
<label for="country" class="form-label">Country</label>
<select class="form-select" id="country" required>
<option value="">Choose...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<div class="col-md-4">
<label for="state" class="form-label">State</label>
<select class="form-select" id="state" required>
<option value="">Choose...</option>
<option>California</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3">
<label for="Postcode" class="form-label">Postcode</label>
<input type="text" class="form-control" id="postCode" placeholder="required">
<div class="invalid-feedback">
Zip code required.
</div>
</div>
<hr class="my-4">
<button type="button" id="btn" class="btn btn-primary w-100 fw-bold">Pay $cart.get_total_price</button>
</body>
</html>强文本
【讨论】：
email: "email" 将传递字符串email以上是关于如何将html表单中的数据转换成json格式的主要内容，如果未能解决你的问题，请参考以下文章