使用javascript+ jquery代码,使用户输入商品价格和商品数量,以及收货地址,可以在页面中自动打印订单信息。
时间: 2024-09-18 22:05:43 浏览: 55
在JavaScript和jQuery中,你可以创建一个简单的表单让用户输入商品价格、数量和收货地址,然后通过JavaScript处理表单数据并在页面上显示订单信息。以下是一个基本的例子:
HTML部分:
```html
<form id="orderForm">
<label for="price">商品价格:</label>
<input type="number" id="price" name="price"><br>
<label for="quantity">商品数量:</label>
<input type="number" id="quantity" name="quantity"><br>
<label for="address">收货地址:</label>
<textarea id="address" name="address"></textarea><br>
<button type="button" onclick="printOrder()">提交</button>
</form>
<div id="orderInfo"></div>
```
jQuery + JavaScript部分 (放在`<script>`标签内):
```javascript
function printOrder() {
// 获取表单元素的值
var price = $('#price').val();
var quantity = $('#quantity').val();
var address = $('#address').val();
// 创建订单信息字符串
var orderString = "订单详情:\n";
orderString += "商品价格: $" + price + "\n";
orderString += "商品数量: " + quantity + "件\n";
orderString += "收货地址: " + address + "\n";
// 渲染到页面
$('#orderInfo').text(orderString);
}
```
在这个例子中,当用户点击“提交”按钮时,会触发`printOrder()`函数,该函数获取表单字段的值,并将它们拼接成订单信息展示在id为`orderInfo`的div元素中。
阅读全文