JavaScriptでトランザクションフォームを実装する方法

電子商取引の発展に伴い、トランザクション フォームの使用がますます一般的になってきました。トランザクション フォームは、電子商取引のトランザクション プロセスの重要な部分であり、買い手と売り手をつなぐ架け橋であり、すべての取引情報が伝達されます。この記事では、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 構造には、製品情報、購入者情報、支払い方法、送信ボタンが含まれています。 label 要素を使用すると、フォームが関連するフォーム要素に関連付けられるため、フォームへのアクセスが容易になります。

2. フォームの検証

フォームを送信する前に、すべての必須フィールドが入力されていることを確認する必要があります。フォーム検証を実装するには、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. 合計価格の自動計算

もう 1 つの便利な機能は、合計価格の自動計算です。合計価格を計算するときは、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() メソッドを使用して、結果を小数点第 2 位までに保持し、結果をページに表示します。

<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 要素に表示されます。

4. フォームの繰り返し送信を防止する

最後の機能は、フォームの繰り返し送信を防止することです。ユーザーが送信ボタンをクリックすると、クリック イベントが複数回発生し、フォームが複数回送信されることがあります。これを回避するには、フォームを送信する前に送信ボタンを無効にすることができます。

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

このメソッドは JavaScript では非常に簡単で、フォームを送信する前に送信ボタンを無効にするだけです。これにより、フォームの繰り返しの送信が回避され、ユーザー データのセキュリティが確保されます。

この記事では、JavaScriptを使用してトランザクションフォームを実装する方法を紹介しました。まずフォームの HTML 構造を作成し、次に JavaScript を使用して合計価格を検証および計算しました。最後に、フォームの重複送信を防ぐ方法についても説明しました。実際の開発では、必要に応じて修正や改良を加えて、より完全なトランザクション フォームを作成できます。

以上がJavaScriptでトランザクションフォームを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。