Bagaimana untuk melaksanakan borang transaksi dalam javascript

Dengan perkembangan e-dagang, penggunaan borang transaksi menjadi semakin biasa. Borang transaksi adalah bahagian penting dalam proses transaksi e-dagang Ia adalah jambatan yang menghubungkan pembeli dan penjual dan membawa semua maklumat transaksi. Dalam artikel ini, saya akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan borang transaksi dan menyediakan pelaksanaan kod praktikal.

1. Struktur asas

Borang transaksi biasa termasuk maklumat pembeli dan penjual, maklumat produk, harga dan kuantiti, kaedah pembayaran dan alamat penghantaran, dsb. Dalam HTML, anda boleh menggunakan elemen borang untuk membina struktur asas borang transaksi.

<form>
  <h2>商品信息</h2>
  <label for="product_name">商品名称:</label>
  <input type="text" id="product_name" name="product_name">
  <br><br>
  <label for="price">价格:</label>
  <input type="text" id="price" name="price">
  <br><br>
  <label for="quantity">数量:</label>
  <input type="number" id="quantity" name="quantity">
  <br><br>

  <h2>买家信息</h2>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name">
  <br><br>
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email">
  <br><br>
  <label for="address">送货地址:</label>
  <textarea id="address" name="address"></textarea>
  <br><br>

  <h2>付款方式</h2>
  <input type="radio" id="paypal" name="payment_method" value="paypal">
  <label for="paypal">PayPal</label>
  <br>
  <input type="radio" id="credit_card" name="payment_method" value="credit_card">
  <label for="credit_card">信用卡</label>
  <br><br>
  <label for="credit_card_number">信用卡号:</label>
  <input type="text" id="credit_card_number" name="credit_card_number">
  <br><br>
  <label for="expiry_date">有效期:</label>
  <input type="text" id="expiry_date" name="expiry_date">
  <br><br>

  <input type="button" onclick="submitForm()" value="提交">
</form>

Dalam struktur HTML asas ini, kami menyertakan maklumat produk, maklumat pembeli, kaedah pembayaran dan butang hantar. Menggunakan elemen label menjadikan borang lebih mudah diakses kerana ia dikaitkan dengan elemen borang yang berkaitan.

2. Pengesahan Borang

Sebelum menyerahkan borang, anda mesti mengesahkan bahawa semua medan yang diperlukan telah diisi. Untuk melaksanakan pengesahan borang, kami perlu menggunakan JavaScript untuk melakukan beberapa semakan. Kami akan menggunakan atribut required dalam borang untuk menandakan medan yang diperlukan dan menggunakan JavaScript untuk menyemak sama ada borang telah mengisi medan ini.

function submitForm() {
  //获取所有表单元素
  var productName = document.getElementById('product_name').value;
  var price = document.getElementById('price').value;
  var quantity = document.getElementById('quantity').value;
  var name = document.getElementById('name').value;
  var email = document.getElementById('email').value;
  var address = document.getElementById('address').value;
  var paymentMethod = document.getElementsByName('payment_method');
  var creditCardNumber = document.getElementById('credit_card_number').value;
  var expiryDate = document.getElementById('expiry_date').value;

  //检查必填字段是否填写
  if (productName == '' || price == '' || quantity == '' || name == '' || email == '' 
      || address == '' || (paymentMethod[1].checked && creditCardNumber == '') 
      || (paymentMethod[1].checked && expiryDate == '')) {
      
    alert('请将表单填写完整');
  } else {
    //提交表单
    document.forms[0].submit();
  }
}

Dalam kod di atas, kami mendapat nilai semua elemen borang dan menyemak sama ada medan yang diperlukan telah diisi. Jika mana-mana medan yang diperlukan tidak diisi, mesej amaran akan muncul dan penyerahan borang akan dihalang jika tidak borang akan diserahkan.

3. Pengiraan automatik jumlah harga

Satu lagi ciri berguna ialah pengiraan automatik jumlah harga. Apabila mengira jumlah harga, kita perlu mendapatkan semula nilai kuantiti dan harga dalam Javascript dan mendarabkannya untuk mendapatkan jumlah harga.

function calculateTotal() {
  var price = document.getElementById('price').value;
  var quantity = document.getElementById('quantity').value;
  var total = price * quantity;
  document.getElementById('total').innerHTML = total.toFixed(2);
}

Gunakan kaedah toFixed() untuk membundarkan keputusan kepada dua tempat perpuluhan dan memaparkan hasilnya pada halaman.

<label for="price">价格:</label>
<input type="text" id="price" name="price" onkeyup="calculateTotal()">
<br><br>
<label for="quantity">数量:</label>
<input type="number" id="quantity" name="quantity" onkeyup="calculateTotal()">
<br><br>
<label for="total">总价:</label>
<span id="total"></span>

Dalam kod di atas, kami telah menambahkan onkeyup peristiwa dalam kotak input harga dan kuantiti, dan kaedah calculateTotal() akan dipanggil setiap kali kunci input dikeluarkan. Jumlah harga akan dipaparkan dalam elemen total pada halaman.

4. Menghalang penyerahan borang berulang

Fungsi terakhir adalah untuk menghalang penyerahan borang berulang. Apabila pengguna mengklik butang serah, acara klik mungkin dicetuskan beberapa kali, menyebabkan borang diserahkan beberapa kali. Untuk mengelakkan ini, kami boleh melumpuhkan butang hantar sebelum menyerahkan borang.

function submitForm() {
  document.getElementById('submit_button').disabled = true; // 禁用提交按钮
  //其他代码
}

Kaedah ini sangat mudah dalam JavaScript, cuma lumpuhkan butang hantar sebelum menyerahkan borang. Ini mengelakkan penyerahan borang berulang dan memastikan keselamatan data pengguna.

Dalam artikel ini, kami memperkenalkan cara melaksanakan borang transaksi menggunakan JavaScript. Kami mula-mula mencipta struktur HTML borang dan kemudian menggunakan JavaScript untuk mengesahkan dan mengira jumlah harga. Akhir sekali, kami juga membincangkan cara untuk mengelakkan penyerahan borang pendua. Dalam pembangunan sebenar, kita boleh mengubah suai dan menambah baik mengikut keperluan kita sendiri untuk mencipta borang transaksi yang lebih lengkap.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan borang transaksi dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!