How to implement transaction form in javascript

With the development of e-commerce, the use of transaction forms has become more and more common. The transaction form is an important part of the e-commerce transaction process. It is a bridge connecting buyers and sellers and carries all transaction information. In this article, I will introduce how to use JavaScript to implement a transaction form and provide practical code implementation.

1. Basic structure

A typical transaction form includes buyer and seller information, product information, price and quantity, payment method and shipping address, etc. In HTML, you can use form elements to build the basic structure of a transaction form.

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

In this basic HTML structure, we include product information, buyer information, payment method and submit button. Using the label element makes a form more accessible because it is associated with related form elements.

2. Form Validation

Before submitting the form, you must verify that all required fields are filled in. In order to implement form validation, we need to use JavaScript to perform some checks. We will use the required attribute in the form to mark required fields and use JavaScript to check if the form has these fields filled out.

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

In the above code, we get the values ​​of all form elements and check whether the required fields are filled in. If any required fields are left unfilled, a warning message will pop up and form submission will be prevented; otherwise the form will be submitted.

3. Automatically calculate total price

Another useful feature is automatic total price calculation. When calculating the total price, we need to retrieve the values ​​of quantity and price in Javascript and multiply them to get the total price.

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

Use the toFixed() method to keep the result to two decimal places and display the result on the page.

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

In the above code, we added the onkeyup event in the price and quantity input boxes, and the calculateTotal() method will be called every time the input key is released. . The total price will be displayed in the total element on the page.

4. Prevent repeated submission of forms

The last function is to prevent repeated submission of forms. When a user clicks the submit button, the click event may be fired multiple times, causing the form to be submitted multiple times. To avoid this, we can disable the submit button before submitting the form.

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

This method is very simple in JavaScript, just disable the submit button before submitting the form. This avoids repeated form submissions and ensures the security of user data.

In this article, we introduced how to implement a transaction form using JavaScript. We first created the HTML structure of the form and then used JavaScript to validate and calculate the total price. Finally, we also discussed how to prevent duplicate form submissions. In actual development, we can modify and improve according to our own needs to create a more complete transaction form.

The above is the detailed content of How to implement transaction form in javascript. For more information, please follow other related articles on the PHP Chinese website!