So implementieren Sie ein Transaktionsformular in Javascript

Mit der Entwicklung des E-Commerce ist die Verwendung von Transaktionsformularen immer häufiger geworden. Das Transaktionsformular ist ein wichtiger Teil des E-Commerce-Transaktionsprozesses. Es stellt eine Brücke zwischen Käufern und Verkäufern dar und enthält alle Transaktionsinformationen. In diesem Artikel werde ich die Verwendung von JavaScript zum Implementieren eines Transaktionsformulars vorstellen und eine praktische Codeimplementierung bereitstellen.

1. Grundstruktur

Ein typisches Transaktionsformular umfasst Käufer- und Verkäuferinformationen, Produktinformationen, Preis und Menge, Zahlungsmethode und Lieferadresse usw. In HTML können Sie Formularelemente verwenden, um die Grundstruktur eines Transaktionsformulars aufzubauen.

<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 dieser grundlegenden HTML-Struktur integrieren wir Produktinformationen, Käuferinformationen, Zahlungsmethode und die Schaltfläche „Senden“. Durch die Verwendung des Label-Elements wird ein Formular leichter zugänglich, da es mit verwandten Formularelementen verknüpft ist.

2. Formularvalidierung

Bevor Sie das Formular absenden, müssen Sie überprüfen, ob alle erforderlichen Felder ausgefüllt sind. Um die Formularvalidierung zu implementieren, müssen wir JavaScript verwenden, um einige Prüfungen durchzuführen. Wir werden das Attribut required im Formular verwenden, um erforderliche Felder zu markieren und mithilfe von JavaScript zu prüfen, ob das Formular diese Felder ausgefüllt hat. 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; // 禁用提交按钮
  //其他代码
}

Im obigen Code erhalten wir die Werte aller Formularelemente und prüfen, ob die erforderlichen Felder ausgefüllt sind. Wenn erforderliche Felder nicht ausgefüllt werden, wird eine Warnmeldung angezeigt und die Übermittlung des Formulars wird verhindert.

3. Automatische Berechnung des Gesamtpreises

Eine weitere nützliche Funktion ist die automatische Berechnung des Gesamtpreises. Bei der Berechnung des Gesamtpreises müssen wir die Werte für Menge und Preis in Javascript abrufen und diese multiplizieren, um den Gesamtpreis zu erhalten.

rrreee

Verwenden Sie die Methode toFixed(), um das Ergebnis auf zwei Dezimalstellen zu beschränken und das Ergebnis auf der Seite anzuzeigen.

rrreee

Im obigen Code haben wir das Ereignis onkeyup in den Eingabefeldern für Preis und Menge hinzugefügt, und die Methode calculateTotal() wird jedes Mal aufgerufen, wenn der Eingabeschlüssel eingegeben wird freigegeben. Der Gesamtpreis wird im Element total auf der Seite angezeigt.

🎜🎜Verhindern Sie die wiederholte Übermittlung von Formularen🎜🎜🎜Die letzte Funktion besteht darin, die wiederholte Übermittlung von Formularen zu verhindern. Wenn ein Benutzer auf die Schaltfläche „Senden“ klickt, wird das Klickereignis möglicherweise mehrmals ausgelöst, wodurch das Formular mehrmals gesendet wird. Um dies zu vermeiden, können wir die Schaltfläche „Senden“ vor dem Absenden des Formulars deaktivieren. 🎜rrreee🎜Diese Methode ist in JavaScript sehr einfach. Deaktivieren Sie einfach die Schaltfläche „Senden“, bevor Sie das Formular absenden. Dies vermeidet wiederholte Formularübermittlungen und gewährleistet die Sicherheit der Benutzerdaten. 🎜🎜In diesem Artikel haben wir vorgestellt, wie man ein Transaktionsformular mit JavaScript implementiert. Wir haben zunächst die HTML-Struktur des Formulars erstellt und dann mithilfe von JavaScript den Gesamtpreis validiert und berechnet. Abschließend haben wir auch besprochen, wie man doppelte Formularübermittlungen verhindern kann. In der tatsächlichen Entwicklung können wir entsprechend unseren eigenen Anforderungen Änderungen und Verbesserungen vornehmen, um ein vollständigeres Transaktionsformular zu erstellen. 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Transaktionsformular in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!