자바스크립트에서 거래 양식을 구현하는 방법

전자상거래가 발전하면서 거래 형태의 사용이 점점 더 보편화되었습니다. 거래양식은 전자상거래 과정에서 중요한 부분으로 구매자와 판매자를 연결하는 가교 역할을 하며 모든 거래정보를 전달합니다. 이번 글에서는 JavaScript를 사용하여 트랜잭션 형식을 구현하는 방법과 실용적인 코드 구현 방법을 소개하겠습니다.

1. 기본 구조

일반적인 거래 형태에는 구매자와 판매자 정보, 상품 정보, 가격 및 수량, 결제 방법 및 배송지 주소 등이 포함됩니다. HTML에서는 양식 요소를 사용하여 거래 양식의 기본 구조를 구축할 수 있습니다.

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

이 기본 HTML 구조에는 제품 정보, 구매자 정보, 결제 방법 및 제출 버튼이 포함됩니다. 레이블 요소를 사용하면 관련 양식 요소와 연결되므로 양식에 더 쉽게 액세스할 수 있습니다.

2. 양식 유효성 검사

양식을 제출하기 전에 모든 필수 필드가 채워졌는지 확인해야 합니다. 양식 유효성 검사를 구현하려면 JavaScript를 사용하여 몇 가지 검사를 수행해야 합니다. 양식의 required 속성을 ​​사용하여 필수 필드를 표시하고 JavaScript를 사용하여 양식에 이러한 필드가 채워져 있는지 확인합니다. 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();
  }
}

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

3. 自动计算总价

另一个有用的功能是自动计算总价。在计算总价时，我们需要在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);
}

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

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

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

위 코드에서는 모든 양식 요소의 값을 가져와 필수 필드가 채워졌는지 확인합니다. 필수 항목이 채워지지 않은 경우 경고 메시지가 표시되고 양식 제출이 금지됩니다.

3. 총 가격 자동 계산

또 다른 유용한 기능은 총 가격 자동 계산입니다. 총 가격을 계산할 때 Javascript에서 수량과 가격의 값을 검색하고 이를 곱하여 총 가격을 구해야 합니다.

rrreee

결과를 소수점 이하 두 자리까지 유지하고 페이지에 결과를 표시하려면 toFixed() 메서드를 사용하세요.

rrreee

위 코드에서는 가격 및 수량 입력란에 onkeyup 이벤트를 추가했으며, 입력 키가 입력될 때마다 calculateTotal() 메서드가 호출됩니다. 출시된. 총 가격은 페이지의 total 요소에 표시됩니다.

🎜🎜양식 반복 제출 방지🎜🎜🎜 마지막 기능은 양식 반복 제출을 방지하는 것입니다. 사용자가 제출 버튼을 클릭하면 클릭 이벤트가 여러 번 실행되어 양식이 여러 번 제출될 수 있습니다. 이를 방지하기 위해 양식을 제출하기 전에 제출 버튼을 비활성화할 수 있습니다. 🎜rrreee🎜이 방법은 JavaScript에서 매우 간단합니다. 양식을 제출하기 전에 제출 버튼을 비활성화하면 됩니다. 이렇게 하면 반복적인 양식 제출을 방지하고 사용자 데이터의 보안을 보장할 수 있습니다. 🎜🎜이번 글에서는 자바스크립트를 이용하여 거래양식을 구현하는 방법을 소개했습니다. 먼저 양식의 HTML 구조를 만든 다음 JavaScript를 사용하여 총 가격을 확인하고 계산했습니다. 마지막으로 중복 양식 제출을 방지하는 방법도 논의했습니다. 실제 개발에서 우리는 보다 완전한 거래 형태를 만들기 위해 필요에 따라 수정하고 개선할 수 있습니다. 🎜

위 내용은 자바스크립트에서 거래 양식을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!