자바스크립트에서 거래 양식을 구현하는 방법
- PHPz원래의
- 2023-04-21 09:05:27623검색
전자상거래가 발전하면서 거래 형태의 사용이 점점 더 보편화되었습니다. 거래양식은 전자상거래 과정에서 중요한 부분으로 구매자와 판매자를 연결하는 가교 역할을 하며 모든 거래정보를 전달합니다. 이번 글에서는 JavaScript를 사용하여 트랜잭션 형식을 구현하는 방법과 실용적인 코드 구현 방법을 소개하겠습니다.
- 기본 구조
일반적인 거래 형태에는 구매자와 판매자 정보, 상품 정보, 가격 및 수량, 결제 방법 및 배송지 주소 등이 포함됩니다. 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 구조에는 제품 정보, 구매자 정보, 결제 방법 및 제출 버튼이 포함됩니다. 레이블 요소를 사용하면 관련 양식 요소와 연결되므로 양식에 더 쉽게 액세스할 수 있습니다.
- 양식 유효성 검사
양식을 제출하기 전에 모든 필수 필드가 채워졌는지 확인해야 합니다. 양식 유효성 검사를 구현하려면 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();
}
}
在上面的代码中，我们获取了所有表单元素的值，并检查了必填字段是否填写了。如果有任何必填字段未填写，将弹出警告消息并阻止表单提交；否则将提交表单。
- 自动计算总价
另一个有用的功能是自动计算总价。在计算总价时，我们需要在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; // 禁用提交按钮
//其他代码
}위 코드에서는 모든 양식 요소의 값을 가져와 필수 필드가 채워졌는지 확인합니다. 필수 항목이 채워지지 않은 경우 경고 메시지가 표시되고 양식 제출이 금지됩니다. - 총 가격 자동 계산
또 다른 유용한 기능은 총 가격 자동 계산입니다. 총 가격을 계산할 때 Javascript에서 수량과 가격의 값을 검색하고 이를 곱하여 총 가격을 구해야 합니다.
rrreee결과를 소수점 이하 두 자리까지 유지하고 페이지에 결과를 표시하려면 toFixed() 메서드를 사용하세요.
위 코드에서는 가격 및 수량 입력란에 onkeyup 이벤트를 추가했으며, 입력 키가 입력될 때마다 calculateTotal() 메서드가 호출됩니다. 출시된. 총 가격은 페이지의 total 요소에 표시됩니다.
위 내용은 자바스크립트에서 거래 양식을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!