提交订单传递id 和名字打开模态窗口,确认是否提交
时间: 2023-08-18 11:09:28 浏览: 114
form提交时传递额外的参数几种常见方法
您可以使用 jQuery UI Dialog 来创建模态窗口并传递订单信息。以下是一个示例代码:
HTML:
```html
<!-- 订单信息 -->
<div id="order-info">
<p>订单ID:1001</p>
<p>订单名称:测试订单</p>
</div>
<!-- 模态窗口 -->
<div id="confirm-dialog" title="确认订单提交?">
<p>订单ID:<span id="order-id"></span></p>
<p>订单名称:<span id="order-name"></span></p>
<p>是否确认提交?</p>
</div>
```
JavaScript:
```javascript
// 获取订单信息
var orderId = $("#order-info p:eq(0)").text().split(":")[1];
var orderName = $("#order-info p:eq(1)").text().split(":")[1];
// 创建模态窗口
$("#confirm-dialog").dialog({
autoOpen: false, // 初始不自动打开
modal: true,
buttons: {
"确定": function() {
// 提交订单操作
console.log("提交订单ID:" + orderId);
console.log("提交订单名称:" + orderName);
$(this).dialog("close");
},
"取消": function() {
// 取消提交操作
$(this).dialog("close");
}
},
open: function() {
// 在模态窗口打开时传递订单信息
$("#order-id").text(orderId);
$("#order-name").text(orderName);
}
});
// 点击提交按钮打开模态窗口
$("#submit-btn").click(function() {
$("#confirm-dialog").dialog("open");
});
```
在上面的示例中,我们首先获取订单信息,然后创建一个模态窗口,并在打开模态窗口时传递订单信息。在点击提交按钮时,我们打开模态窗口,供用户确认是否提交订单。在确认提交时,我们可以访问之前传递的订单信息进行提交操作。
请注意,此示例中的按钮操作仅仅是简单地输出订单信息并关闭模态窗口,您需要根据您的需求进行相应的操作。
阅读全文