有关于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 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>
</script>
</body>
</html>

这是要求：

下面分别是都没有输入值和都有输入值的结果展现：

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

6条回答默认最新

CSDN专家-showbo 2023-03-12 21:10

关注

获得7.50元问题酬金


<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>

编辑记录

1人已打赏

报告相同问题？

关注问题

做一个访问SQL数据库的网页，需要用到哪些当前主流的编程语言呢？ css html javascript 有问必答
2022-05-21 16:17

回答 4 已采纳看你擅长哪门后台语言了。java和python等都可以的。
javascript编程语言怎么实现交换4个数字，即abcd，要转换成dcba javascript
2018-06-09 05:32

回答 11 已采纳 http://www.w3school.com.cn/jsref/jsref_reverse.asp
javascript语言怎么实现一个文本框从一个页面导入到另一个页面？ javascript
2018-09-14 00:39

回答 3 已采纳 url get传递，对应页面通过location.search获取到查询参数或者跳转前将值存入cookie或者localStorage中，对应页面从cookie或者localStorage中获
beslistconversionpixel:prestashop的模块，将beslist转换像素添加到订单确认页面。（http
2021-05-22 12:57

转换像素被添加到订单确认页面，意味着当用户完成购买并到达该页面时，这个像素会被触发，向Beslist发送一个信号，记录下这次购买行为。这对于Beslist来说，可以用来验证和统计其服务带来的转化率，对于商家而言，...
关于#vue.js#的问题：el-tag拖放到 el-input框时无法完成填充(语言-javascript) javascript vue.js
2023-03-21 22:46

回答 5 已采纳解决了嘛没解决可以私信我，一步步教你，原生js 或者 vue 都可以
js如何判断页面资源加载完成，例如我加载一个很大的PDF，如何判断PDF内容加载完毕， javascript
2022-10-05 22:41

回答 2 已采纳您好，请问您的基础开发语言是什么？原生javascript还是vue或者react这些新框架。如果是原生javascript的话，加上jquery，可以使用ready函数来进行监控，当页面元素都加载后
JS如何获取页面其中一个DIV下的Script标签里服务器传来的JSON数据(语言-javascript) javascript jquery json
2022-04-05 02:27

回答 3 已采纳你是只需要一次的请求数据就行了吗？
wms:这是一个仓库管理系统的私有仓库，只完成了前端
2021-07-21 06:24

在本文中，我们将深入探讨一个名为“wms”的私有仓库项目，该项目专注于前端部分的开发，使用了JavaScript作为主要的编程语言。一、JavaScript在前端开发中的应用 JavaScript，作为一种轻量级的解释型编程语言，...
关于dom编程艺术动画部分一句代码的解释问题 javascript
2017-03-08 10:24

回答 3 已采纳计时器第一个参数尽量不要用字符串，而是匿名函数（需要传入参数）或者直接要执行的函数名称（对于不需要参数的），字符串是用eval执行的，存在xss漏洞并且效率低 ``` var repeat =
还有一个js的问题，这次一起问，请问js语言中如何求一个数字的绝对值 javascript
2018-06-09 05:30

回答 4 已采纳 http://www.w3school.com.cn/jsref/jsref_abs.asp
vue点击确定弹框跳转到另一个页面？ vue.js 前端
2021-10-25 10:08

回答 4 已采纳 router跳转
资源专区-课程设计-编程作业-MYSQL-基于WEB的仓库管理系统的设计与实现
2024-05-30 13:06

MySQL是一个流行的开源关系型数据库管理系统，它支持SQL（结构化查询语言），用于创建、查询、更新和删除数据。在仓库管理系统中，MySQL将用于存储货物信息、库存状态、供应商详情、订单记录等各类数据。设计数据库...
一个简单的javascript的问题，怎么使用jquery判断一个页面 javascript jquery
2018-07-20 05:30

回答 2 已采纳 ``` $((':input').each(function(){ if(this.value==''){alert('不能为空！');this.focus();return false
商业源码-编程源码-ShopXP网店系统源码.zip
2022-06-16 17:05

ShopXP网店系统源码是一个专为商业环境设计的电子商务解决方案，它包含了构建在线商店所需的各种功能和组件。这个源码的可用性意味着开发者可以深入理解其内部工作机制，并根据实际需求进行定制和扩展。以下是关于...
商业源码-编程源码-PrestaShop v1.3.2.3.zip
2022-06-16 16:27

- `css/` 和 `js/`：分别存放CSS样式表和JavaScript文件，负责页面的样式和交互。 - `img/`：存储商品图片和其他图像资源。 - `modules/`：模块目录，包含了可安装和卸载的各种功能模块。 - `themes/`：主题文件夹，...
没有解决我的问题, 去提问

码龄粉丝数原力等级 --

有关于js部分的问题，需要完成一个订单确认的页面

6条回答默认最新

码龄粉丝数原力等级 --

问题事件

码龄粉丝数原力等级 --

码龄粉丝数原力等级 --

码龄粉丝数原力等级 --

悬赏问题

有关于js部分的问题，需要完成一个订单确认的页面

6条回答 默认 最新

问题事件

悬赏问题

6条回答默认最新