Comment implémenter le formulaire de transaction en javascript-Questions et réponses frontales-php.cn

Comment implémenter le formulaire de transaction en javascript

PHPz

Libérer： 2023-04-21 09:13:00

original

622 Les gens l'ont consulté

Avec le développement du e-commerce, l'utilisation de formulaires de transaction est devenue de plus en plus courante. Le formulaire de transaction est une partie importante du processus de transaction de commerce électronique. Il constitue un pont reliant les acheteurs et les vendeurs et contient toutes les informations sur les transactions. Dans cet article, je vais vous présenter comment utiliser JavaScript pour implémenter un formulaire de transaction et fournir une implémentation pratique du code.

Structure de base

Un formulaire de transaction typique comprend des informations sur l'acheteur et le vendeur, des informations sur le produit, le prix et la quantité, le mode de paiement et l'adresse de livraison, etc. En HTML, vous pouvez utiliser des éléments de formulaire pour créer la structure de base d'un formulaire de transaction.

<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>

Copier après la connexion

Dans cette structure HTML de base, nous incluons les informations sur le produit, les informations sur l'acheteur, le mode de paiement et le bouton d'envoi. L'utilisation de l'élément label rend un formulaire plus accessible car il est associé à des éléments de formulaire associés.

Validation du formulaire

Avant de soumettre le formulaire, vous devez vérifier que tous les champs obligatoires sont remplis. Afin d'implémenter la validation du formulaire, nous devons utiliser JavaScript pour effectuer certaines vérifications. Nous utiliserons l'attribut required dans le formulaire pour marquer les champs obligatoires et utiliserons JavaScript pour vérifier si le formulaire a ces champs remplis. required属性来标记必填字段，并使用JavaScript来检查表单是否填写了这些字段。

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();
  }
}

Copier après la connexion

在上面的代码中，我们获取了所有表单元素的值，并检查了必填字段是否填写了。如果有任何必填字段未填写，将弹出警告消息并阻止表单提交；否则将提交表单。

自动计算总价

另一个有用的功能是自动计算总价。在计算总价时，我们需要在Javascript中检索数量和价格的值，并将它们相乘以获得总价。

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);
}

Copier après la connexion

使用toFixed()方法将结果保留两位小数，并将结果显示在页面上。

<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>

Copier après la connexion

在上面的代码中，我们在价格和数量输入框中添加了onkeyup事件，每次输入键释放时都会调用calculateTotal()方法。总价格将显示在页面上的total

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

Copier après la connexion

Dans le code ci-dessus, nous obtenons les valeurs de tous les éléments du formulaire et vérifions si les champs obligatoires sont remplis. Si des champs obligatoires ne sont pas remplis, un message d'avertissement apparaîtra et la soumission du formulaire sera empêchée ; sinon, le formulaire sera soumis.

Calcul automatique du prix total

Une autre fonctionnalité utile est le calcul automatique du prix total. Lors du calcul du prix total, nous devons récupérer les valeurs de quantité et de prix en Javascript et les multiplier pour obtenir le prix total.

Utilisez la méthode toFixed() pour conserver le résultat à deux décimales et afficher le résultat sur la page.

Dans le code ci-dessus, nous avons ajouté l'événement onkeyup dans les zones de saisie du prix et de la quantité, et la méthode calculateTotal() sera appelée à chaque fois que la clé de saisie est libéré. Le prix total sera affiché dans l'élément total de la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!