有关于js部分的问题，需要完成一个订单确认的页面
有关于js部分的问题，需要完成一个订单确认的页面，框架如下：
<html>
<head>
<style>
body{margin:0px;}
#orderForm, #confirmForm{postion:absolute; width:280px; height:440px; margin:5px; display:inline-block; padding:5px;}
#orderForm{background-color:#abc; display:inline-block;}
#confirmForm{position:absolute; background-color:#def; }
#bttn{position:absolute; bottom:15px;}
#msg{color:F23; font-weight:bold;}
style>
head>
<body>
<div id="orderForm">
<h3>Stationery Orderh3>
<h5>Please complete the formh5>
<p><input type="text" id="firstName" placeholder="Enter Your First Name" />p>
<p><input type="text" id="familyName" placeholder="Enter Your Famiy Name" />p>
<p>Select Titlep>
<input type="radio" name="citizen" value="cn" checked />Chinese Style
<input type="radio" name="citizen" value="wn" />Western Style
<p>
<input type="radio" name="titles" value="Prof." />Prof.
<input type="radio" name="titles" value="Dr." />Dr.
<input type="radio" name="titles" value="Mr." />Mr.
<input type="radio" name="titles" value="Ms." />Ms.p>
<input type="checkbox" id="otherChk" name="other" />other
<input type="text" id="otherTitle" placeholder="Enter Your Title" />
<br><br>
<input type="checkbox" id="pen" name="orders" value="Pen" />Pen
<input type="checkbox" id="ruler" name="orders" value="Ruler" />Ruler<br>
<input type="checkbox" id="notepad" name="orders" value="Notepad" />Notepad
<input type="checkbox" id="clips" name="orders" value="Paper Clips" />Paper Clips<br>
<input type="checkbox" id="stapler" name="orders" value="Stapler" />Stapler
<input type="checkbox" id="paper" name="orders" value="Paper(A4" />Paper(A4)
<p><button id="orderBtn" onclick="ord()">Orderbutton>p>
<p id="msg">p>
<div id="confirmForm">
<div id="printTitle">div>
<div id="printOrder">div>
<p id ="bttn">
<button id="confirmBtn" disabled >Confirm Orderbutton>
<button id="cancelBtn" >Cancel Orderbutton>p>
<script>
script>
body>
html>
这是要求：
下面分别是都没有输入值和都有输入值的结果展现：
<html>
<head>
<style>
body {
margin: 0px;
}
#orderForm, #confirmForm {
position: absolute;
width: 280px;
height: 440px;
margin: 5px;
display: inline-block;
padding: 5px;
}
#orderForm {
background-color: #abc;
display: inline-block;
}
#confirmForm {
position: absolute;
background-color: #def;
left:280px
}
#bttn {
position: absolute;
bottom: 15px;
}
#msg {
color: #F23;
font-weight: bold;
}
</style>
</head>
<body>
<div id="orderForm">
<h3>Stationery Order</h3>
<h5>Please complete the form</h5>
<p><input type="text" id="firstName" placeholder="Enter Your First Name" /></p>
<p><input type="text" id="familyName" placeholder="Enter Your Famiy Name" /></p>
<p>Select Title</p>
<input type="radio" name="citizen" value="cn" checked />Chinese Style
<input type="radio" name="citizen" value="wn" />Western Style
<p>
<input type="radio" name="titles" value="Prof." />Prof.
<input type="radio" name="titles" value="Dr." />Dr.
<input type="radio" name="titles" value="Mr." />Mr.
<input type="radio" name="titles" value="Ms." />Ms.
</p>
<input type="checkbox" id="otherChk" name="other" />other
<input type="text" id="otherTitle" placeholder="Enter Your Title" />
<br><br>
<input type="checkbox" id="pen" name="orders" value="Pen" />Pen
<input type="checkbox" id="ruler" name="orders" value="Ruler" />Ruler<br>
<input type="checkbox" id="notepad" name="orders" value="Notepad" />Notepad
<input type="checkbox" id="clips" name="orders" value="Paper Clips" />Paper Clips<br>
<input type="checkbox" id="stapler" name="orders" value="Stapler" />Stapler
<input type="checkbox" id="paper" name="orders" value="Paper(A4" />Paper(A4)
<p><button id="orderBtn" onclick="ord()">Order</button></p>
</div>
<div id="confirmForm">
<p id="msg"></p>
<div id="printTitle"></div>
<div id="printOrder"></div>
<p id="bttn">
<button id="confirmBtn" disabled>Confirm Order</button>
<button id="cancelBtn">Cancel Order</button>
</p>
</div>
<script>
function ord() {
cancelBtn.onclick();//调用取消按钮重置过状态
var errors = []
if (firstName.value == '' || familyName.value == '') {
errors.push('Please enter all your names');
}
var title = Array.from(document.getElementsByName('titles')).find(i => i.checked);
if (!title && !otherChk.checked) errors.push('Select a title or click the check box');
else {
if (otherChk.checked) title = otherTitle.value;
else title = title.value;
}
if (title) title += ' ';
var orders = Array.from(document.getElementsByName('orders')).filter(i => i.checked);
if (!orders.length) errors.push('Click at least one check box');
if (errors.length) {
msg.innerHTML = '<h1>Confirm Order</h1><ul>' + errors.map(i => `<li>${i}</li>`).join('') + '<ul>'
return
}
var cn = Array.from(document.getElementsByName('citizen')).find(i => i.checked).value == 'cn';
var names = [familyName.value, firstName.value];//默认中文显示样式
if (!cn) names = names.reverse();//英文样式反转数组
printTitle.innerHTML = '<h1>Confirm Order</h1>';
confirmBtn.disabled = false;
printOrder.innerHTML = 'Please confirm the order<br><br>'
+ 'Dear ' + title + names.join(' ') + '<br>thank you for your order of:'
+ '<ol>' + orders.map(i => `<li>${i.value}</li>`).join('') + '</ol>';
}
//取消按钮事件
cancelBtn.onclick = function () {
confirmBtn.disabled = true;
printTitle.innerHTML = printOrder.innerHTML = msg.innerHTML = '';
}
//确认按钮事件
confirmBtn.onclick = function () {
// printTitle.innerHTML = msg.innerHTML = '';
// printOrder.innerHTML = 'We are sending your order now ' + firstName.value
alert('We are sending your order now ' + firstName.value)
}
</script>
</body>
</html>
参考gpt和自己的思路，代码如下：
// 获取HTML元素
const firstName = document.getElementById('firstName');
const familyName = document.getElementById('familyName');
const citizen = document.getElementsByName('citizen');
const titles = document.getElementsByName('titles');
const otherChk = document.getElementById('otherChk');
const otherTitle = document.getElementById('otherTitle');
const orders = document.getElementsByName('orders');
const orderBtn = document.getElementById('orderBtn');
const msg = document.getElementById('msg');
const printTitle = document.getElementById('printTitle');
const printOrder = document.getElementById('printOrder');
const confirmBtn = document.getElementById('confirmBtn');
const cancelBtn = document.getElementById('cancelBtn');
// 初始化确认表单为不可见
document.getElementById('confirmForm').style.display = 'none';
// 当点击“订购”按钮时触发的函数
function ord() {
// 检查名字是否已填写
if (!firstName.value || !familyName.value) {
msg.innerHTML = '请输入您所有的名字';
msg.style.color = 'red';
return;
}
// 检查是否选择了信纸
let selectedOrders = [];
for (let i = 0; i < orders.length; i++) {
if (orders[i].checked) {
selectedOrders.push(orders[i].value);
}
}
if (selectedOrders.length === 0) {
msg.innerHTML = '请选择信纸';
msg.style.color = 'red';
return;
}
// 获取选择的公民和头衔
let selectedCitizen;
let selectedTitle;
for (let i = 0; i < citizen.length; i++) {
if (citizen[i].checked) {
selectedCitizen = citizen[i].value;
break;
}
}
for (let i = 0; i < titles.length; i++) {
if (titles[i].checked) {
selectedTitle = titles[i].value;
break;
}
}
if (otherChk.checked) {
selectedTitle = otherTitle.value;
}
// 组装打印的名称
let name;
if (selectedCitizen === 'cn') {
name = familyName.value + firstName.value;
} else {
name = firstName.value + ' ' + familyName.value;
}
printTitle.innerHTML = selectedTitle;
printOrder.innerHTML = '';
for (let i = 0; i < selectedOrders.length; i++) {
printOrder.innerHTML += (i + 1) + '. ' + selectedOrders[i] + '<br>';
}
// 清空消息，显示确认表单
msg.innerHTML = '';
document.getElementById('confirmForm').style.display = 'block';
// 启用确认按钮
confirmBtn.disabled = false;
}
// 当点击“确认订单”按钮时触发的函数
function confirm() {
// 发送确认消息
msg.innerHTML = '我们现在发送您的订单，以下是他们的名字：' + printTitle.innerHTML + ' ' + firstName.value + ' ' + familyName.value;
// 禁用取消按钮，清空确认表单
cancelBtn.disabled = true;
printTitle.innerHTML = '';
printOrder.innerHTML = '';
document.getElementById('confirmForm').style.display = 'none';
}
// 当点击“取消订单”按钮时触发的函数
function cancel() {
// 清空确认表单，禁用确认按钮
printTitle.innerHTML = '';
printOrder.innerHTML = '';
document.getElementById('confirmBtn').disabled = true;
// 清空错误消息
document.getElementById('msg').innerHTML = '';
// 清空输入框和复选框
document.getElementById('firstName').value = '';
document.getElementById('familyName').value = '';
document.getElementById('otherChk').checked = false;
document.getElementById('otherTitle').value = '';
var orders = document.getElementsByName('orders');
for (var i = 0; i < orders.length; i++) {
orders[i].checked = false;
}
// 将焦点设置回到输入框中
document.getElementById('firstName').focus();
}
以下答案由GPT-3.5大模型与博主波罗歌共同编写：
好的，这个页面中存在一些问题，需要进行修改，同时需要编写一个JavaScript函数 ord() 来处理订单提交的逻辑。
首先是页面中的问题，其中第4行出现了拼写错误，应该是 position 而不是 postion。
其次，第5-6行中的 width 和 height 属性后面应该加上 px。
最后，第16行的 color 属性的值应该加上引号，即为 "#F23"。
下面给出修改后的代码，并添加ord()函数来处理订单提交的逻辑：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Order Confirmation</title>
<style>
body {
margin: 0px;
}
#orderForm, #confirmForm {
position: absolute;
width: 280px;
height: 440px;
margin: 5px;
display: inline-block;
padding: 5px;
}
#orderForm {
background-color: #abc;
display: inline-block;
}
#confirmForm {
position: absolute;
background-color: #def;
}
#bttn {
position: absolute;
bottom: 15px;
}
#msg {
color: #F23;
font-weight: bold;
}
</style>
</head>
<body>
<div id="orderForm">
<h3>Stationery Order</h3>
<h5>Please complete the form</h5>
<p><input type="text" id="firstName" placeholder="Enter Your First Name" /></p>
<p><input type="text" id="familyName" placeholder="Enter Your Family Name" /></p>
<p>Select Title</p>
<input type="radio" name="citizen" value="cn" checked />Chinese Style
<input type="radio" name="citizen" value="wn" />Western Style
<p>
<input type="radio" name="titles" value="Prof." />Prof.
<input type="radio" name="titles" value="Dr." />Dr.
<input type="radio" name="titles" value="Mr." />Mr.
<input type="radio" name="titles" value="Ms." />Ms.
</p>
<input type="checkbox" id="otherChk" name="other" />other
<input type="text" id="otherTitle" placeholder="Enter Your Title" />
<br /><br />
<input type="checkbox" id="pen" name="orders" value="Pen" />Pen
<input type="checkbox" id="ruler" name="orders" value="Ruler" />Ruler<br />
<input type="checkbox" id="notepad" name="orders" value="Notepad" />Notepad
<input type="checkbox" id="clips" name="orders" value="Paper Clips" />Paper Clips<br />
<input type="checkbox" id="stapler" name="orders" value="Stapler" />Stapler
<input type="checkbox" id="paper" name="orders" value="Paper(A4)" />Paper(A4)
<p><button id="orderBtn" onclick="ord()">Order</button></p>
<p id="msg"></p>
</div>
<div id="confirmForm">
<h3>Confirm Order</h3>
<p>Name: <span id="name"></span></p>
<p>Title: <span id="title"></span></p>
<p>Orders: <span id="orders"></span></p>
<p id="bttn"><button id="confirmBtn">Confirm</button></p>
</div>
<script>
function ord() {
// 获取输入值
var firstName = document.getElementById("firstName").value;
var familyName = document.getElementById("familyName").value;
var title = "";
var radioButtons = document.getElementsByName("titles");
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
title = radioButtons[i].value;
break;
}
}
var otherTitle = document.getElementById("otherChk").checked ? document.getElementById("otherTitle").value : "";
var orders = [];
var checkboxes = document.getElementsByName("orders");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
orders.push(checkboxes[i].value);
}
}
// 显示确认表单
document.getElementById("name").innerHTML = familyName + ", " + firstName;
document.getElementById("title").innerHTML = otherTitle || title;
document.getElementById("orders").innerHTML = orders.join(", ");
document.getElementById("confirmForm").style.display = "inline-block";
}
</script>
</body>
</html>
上述代码中，ord() 函数首先获取了用户输入的姓名、职称和订单选项，然后通过 JavaScript 操作 DOM 技术，将订单信息显示在确认表单中，最后将确认表单由 none 改为 inline-block 以显示出来。
如果我的回答解决了您的问题，请采纳！
- 你可以看下这个问题的回答https://ask.csdn.net/questions/7689864
可以用ajax 来完成
<html>
<head>
<style>
body {
margin: 0px;
}
#orderForm,
#confirmForm {
width: 280px;
height: 440px;
margin: 5px;
display: inline-block;
padding: 5px;
}
#orderForm {
position: relative;
background-color: #abc;
}
#confirmForm {
position: absolute;
background-color: #def;
left: 286px;
top: -5px;
}
#bttn {
position: absolute;
bottom: 15px;
}
#msg {
color: F23;
font-weight: bold;
}
</style>
</head>
<body>
<div id="orderForm">
<h3>Stationery Order</h3>
<h5>Please complete the form</h5>
<p><input type="text" id="firstName" placeholder="Enter Your First Name" /></p>
<p><input type="text" id="familyName" placeholder="Enter Your Famiy Name" /></p>
<p>Select Title</p>
<input type="radio" name="citizen" value="cn" checked />Chinese Style
<input type="radio" name="citizen" value="wn" />Western Style
<p>
<input type="radio" name="titles" value="Prof." />Prof.
<input type="radio" name="titles" value="Dr." />Dr.
<input type="radio" name="titles" value="Mr." />Mr.
<input type="radio" name="titles" value="Ms." />Ms.
</p>
<input type="checkbox" id="otherChk" name="other" />other
<input type="text" id="otherTitle" placeholder="Enter Your Title" />
<br><br>
<input type="checkbox" id="pen" name="orders" value="Pen" />Pen
<input type="checkbox" id="ruler" name="orders" value="Ruler" />Ruler<br>
<input type="checkbox" id="notepad" name="orders" value="Notepad" />Notepad
<input type="checkbox" id="clips" name="orders" value="Paper Clips" />Paper Clips<br>
<input type="checkbox" id="stapler" name="orders" value="Stapler" />Stapler
<input type="checkbox" id="paper" name="orders" value="Paper(A4" />Paper(A4)
<p><button id="orderBtn" onclick="ord()">Order</button></p>
<p id="msg"></p>
<div id="confirmForm">
<div id="printTitle">
</div>
<div id="printOrder">
</div>
<p id="bttn">
<button id="confirmBtn" disabled>Confirm Order</button>
<button id="cancelBtn">Cancel Order</button>
</p>
<script type="text/javascript">
let printTitle = document.getElementById("printTitle")
let printOrder = document.getElementById("printOrder")
let citizenList = document.getElementsByName("citizen");
let titlesList = document.getElementsByName("titles");
let ordersList = document.getElementsByName("orders");
let citizen = "";
let title = "";
let orders = []
function ord() {
let firstName = document.getElementById("firstName").value;
let familyName = document.getElementById("familyName").value;
for (i = 0; i < citizenList.length; i++) {
//判断是否选中
if (citizenList[i].checked) {
citizen = citizenList[i].value + ",";
}
}
for (i = 0; i < titlesList.length; i++) {
//判断是否选中
if (titlesList[i].checked) {
title = titlesList[i].value + ",";
}
}
for (i = 0; i < ordersList.length; i++) {
//判断是否选中
if (ordersList[i].checked) {
if(orders[i] != ordersList[i].value){
orders.push(ordersList[i].value)
}
}
}
console.log("orders",orders)
if(firstName == '' || familyName == '' || citizen == '' || title == '' || orders == ''){
let html = '<h3 style="color:red">Confirm Order</h3><ul style="color:red">'
if (firstName == '' || familyName == '') {
html +=`<li>Please enter all your names</li>`
}
if(citizen == '' || title == ''){
html +=`<li>Select a title or click the check box</li>`
}
if(orders == ''){
html+=`<li>click at least one check box</li>`
}
html+='</ul>'
printTitle.innerHTML = html
}else{
let html = `<h3>Confirm Order</h3>
<h4>Please confirm the order</h4>
<h3>Dear ${title}.${familyName} ${firstName} thank you for your order of:</h3>
<ul>
`
for(let i = 0;i<orders.length;i++){
html+=`<li>${i+1+'.'+orders[i]}</li>`
}
html+=`</ul>`
printOrder.innerHTML = html
}
}
</script>
</body>
</html>