如何将html表单中的数据转换成json格式答案

【问题标题】：how to get data from html form into a json format如何将html表单中的数据转换成json格式
【发布时间】：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,
您没有显示任何电子邮件验证。您的脚本不完整

标签： html css django web e-commerce

【解决方案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