this is html I have in below the css is below that with hel

this is html I have in below , the css is below that, with help of html and java script I have to get the result in picture when I click on place order button , how can I do that?

<!DOCTYPE html>
<html lang=\"en\">
<head>

<body>
<div class=\"container\">
<header>
<h1>
Happy Flowers
</h1>
</header>

<nav>
<ul>
<li><a href=\"#\">Floral Arrangements</a></li>
<li><a href=\"#\">Seasonal Bouquets</a></li>
<li><a href=\"#\">Live Plants</a></li>
<li><a href=\"#\">Shop by Price</a></li>
</ul>
</nav>
</div>

<article>
<h2>Place an Order</h2>
<div id=\"errorText\"></div>
<form action=\"results.htm\">

<fieldset id=\"message\" class=\"checks\">
<legend>Message</legend>

<input type=\"checkbox\" name=\"\" value=\"\"> Congratulations!
<input type=\"checkbox\" name=\"\" value=\"\"> Happy Birthdy!
<input type=\"checkbox\" name=\"\" value=\"\"> Happy Anniversary!
<input type=\"checkbox\" name=\"\" value=\"\"> I Love you!
<input type=\"checkbox\" name=\"\" value=\"\"> Custom message:
<textarea >Enter custom message here (max 250 characters)</textarea>

</fieldset>
<fieldset id=\"billingAddress\" class=\"text\">
<legend>Billing Address</legend>

<label for=\"fname\">First Name</label>
<input type=\"text\" id=\"\" name=\"fname\">
<label for=\"lname\">Last Name</label>
<input type=\"text\" id=\"lname\" name=\"lname\">
<label for=\"Staddress\">Street Address</label>
<input type=\"text\" id=\"Staddress\" name=\"Staddress\">
<label for=\"city\">City</label>
<input type=\"text\" id=\"city\" name=\"city\">

<label for=\"State\">State</label>
<select>
   <option value=\"AL\">Alabama</option>
   <option value=\"AK\">Alaska</option>
   <option value=\"AZ\">Arizona</option>
   <option value=\"AR\">Arkansas</option>
   <option value=\"CA\">California</option>
   <option value=\"CO\">Colorado</option>
   <option value=\"CT\">Connecticut</option>
   <option value=\"DE\">Delaware</option>
   <option value=\"DC\">District Of Columbia</option>
   <option value=\"FL\">Florida</option>
   <option value=\"GA\">Georgia</option>
   <option value=\"HI\">Hawaii</option>
   <option value=\"ID\">Idaho</option>
   <option value=\"IL\">Illinois</option>
   <option value=\"IN\">Indiana</option>
   <option value=\"IA\">Iowa</option>
   <option value=\"KS\">Kansas</option>
   <option value=\"KY\">Kentucky</option>
   <option value=\"LA\">Louisiana</option>
   <option value=\"ME\">Maine</option>
   <option value=\"MD\">Maryland</option>
   <option value=\"MA\">Massachusetts</option>
   <option value=\"MI\">Michigan</option>
   <option value=\"MN\">Minnesota</option>
   <option value=\"MS\">Mississippi</option>
   <option value=\"MO\">Missouri</option>
   <option value=\"MT\">Montana</option>
   <option value=\"NE\">Nebraska</option>
   <option value=\"NV\">Nevada</option>
   <option value=\"NH\">New Hampshire</option>
   <option value=\"NJ\">New Jersey</option>
   <option value=\"NM\">New Mexico</option>
   <option value=\"NY\">New York</option>
   <option value=\"NC\">North Carolina</option>
   <option value=\"ND\">North Dakota</option>
   <option value=\"OH\">Ohio</option>
   <option value=\"OK\">Oklahoma</option>
   <option value=\"OR\">Oregon</option>
   <option value=\"PA\">Pennsylvania</option>
   <option value=\"RI\">Rhode Island</option>
   <option value=\"SC\">South Carolina</option>
   <option value=\"SD\">South Dakota</option>
   <option value=\"TN\">Tennessee</option>
   <option value=\"TX\">Texas</option>
   <option value=\"UT\">Utah</option>
   <option value=\"VT\">Vermont</option>
   <option value=\"VA\">Virginia</option>
   <option value=\"WA\">Washington</option>
   <option value=\"WV\">West Virginia</option>
   <option value=\"WI\">Wisconsin</option>
   <option value=\"WY\">Wyoming</option>
</select>

<label for=\"zip\">Zip</label>
<input type=\"text\" id=\"zip\" name=\"zip\">
<label for=\"phone\">Phone</label>
<input type=\"text\" id=\"phone\" name=\"phone\">

</fieldset>

<fieldset id=\"deliveryAddress\" class=\"text\">
<legend>Delivery Address</legend>

<input type=\"checkbox\" name=\"\" value=\"\">Same as billing address

<label for=\"fname\">First Name</label>
<input type=\"text\" id=\"fname\" name=\"fname\">
<label for=\"lname\">Last Name</label>
<input type=\"text\" id=\"lname\" name=\"lname\">
<label for=\"Staddress\">Street Address</label>
<input type=\"text\" id=\"Staddress\" name=\"Staddress\">
<label for=\"City\">City</label>
<input type=\"text\" id=\"City\" name=\"City\">

<label for=\"zip\">Zip</label>
<input type=\"text\" id=\"zip\" name=\"zip\">
<label for=\"phone\">Phone</label>
<input type=\"text\" id=\"phone\" name=\"phone\">

</fieldset>

<fieldset id=\"deliveryDate\" class=\"checks\">
<legend>Delivery Date</legend>
<form >
<input type=\"date\" name=\"Ddate\">

</form>

</fieldset>

<fieldset id=\"paymentInfo\" class=\"text\">
<legend>Payment</legend>

<input type=\"radio\" name=\"Card\" id=\"Visa\">
<label for=\"Visa\">Visa</label>
<input type=\"radio\" name=\"Card\" id=\"Master Card\" value=\"\">
<label for=\"Master Card\">Master Card</label>
<input type=\"radio\" name=\"Card\" id=\"Discover\" value=\"\">
<label for=\"Discover\">Discover</label>
<input type=\"radio\" name=\"Card\" id=\"American Express\" value=\"\">
<label for=\"American Express\">American Express</label>

<label for=\"expiry\">Expiration</label>
<select name=\'expireMM\' id=\'expireMM\'>
<option value=\'\'>Month</option>
<option value=\'01\'>January</option>
<option value=\'02\'>February</option>
<option value=\'03\'>March</option>
<option value=\'04\'>April</option>
<option value=\'05\'>May</option>
<option value=\'06\'>June</option>
<option value=\'07\'>July</option>
<option value=\'08\'>August</option>
<option value=\'09\'>September</option>
<option value=\'10\'>October</option>
<option value=\'11\'>November</option>
<option value=\'12\'>December</option>
</select>
<select name=\'expireYY\' id=\'expireYY\'>
<option value=\'\'>Year</option>
<option value=\'17\'>2017</option>
<option value=\'18\'>2018</option>
<option value=\'19\'>2019</option>
</select>
<input class=\"inputCard\" type=\"hidden\" name=\"expiry\" id=\"expiry\" maxlength=\"4\"/>

</fieldset>

<form>
<label for=\"Uname\">Username</label>
<input type=\"text\" id=\"Uname\" name=\"Uname\">
<label for=\"Pass\">Password</label>
<input type=\"text\" id=\"Pass\" name=\"Pass\">
<label for=\"Passv\">Password (verify)</label>
<input type=\"text\" id=\"passv\" name=\"passv\">
</form>
</fieldset>

<div id=\"buttonContainer\">
<input type=\"submit\" value=\"Place Order\" id=\"orderButton\" />
</div>
</form>
</article>
<footer>Happy Flowers <span>•</span> Chicago, IL</footer>
</body>
</html>

This is Css

/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
width: 800px;
margin: 0 auto;
font-family: garamond, \'times new roman\', times, serif;
background: rgb(246,245,242);
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: \'\';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a:link, a:visited {
text-decoration: none;
color: inherit;
}

a:hover {
text-decoration: none;
color: inherit;
}

a:active {
text-decoration: none;
color: inherit;
}

/* container for header and nav */
div.container {
float: left;
}

/* page header */
header {
border: 2px solid rgb(190,50,38);
border-right: none;
padding: 30px 10px;
text-align: center;
line-height: 1.8em;
background: white;
width: 219px;
float: left;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}

header h1 {
font-family: tangerine, cursive;
font-size: 48pt;
text-transform: lowercase;
color: rgb(190,50,38);
}

header h1 img {
display: inline-block;
}

/* remove blank space for descenders below image */
#accent img {
display: block;
}

/* navigation */
nav {
width: 219px;
padding: 10px;
float: left;
clear: left;
}

nav ul li {
width: 179px;
min-height: 50px;
padding: 10px;
margin: 0 0 10px 10px;
line-height: 2.0em;
font-weight: bold;
font-size: 16px;
background: rgb(124,124,136);
color: white;
text-align: center;
border: 1px solid rgb(0,89,132);
}

nav ul li:hover {
background: rgb(0,89,132);
}

/* main content */
article {
background: #4DA375;
width: 581px;
float: right;
padding: 10px;
}

article h2 {
font-size: 48px;
font-weight: bold;
text-align: center;
font-family: tangerine, cursive;
text-shadow: 10px 0px 17px white,
-10px 0px 17px white;
}

article div.results {
background: white;
border-radius: 5px;
margin: 5px 15px 15px;
padding: 5px 30px;
}

article h3 {
font-size: 18pt;
font-weight: bold;
text-align: center;
padding-bottom: 10px;
}

article div.results p {
margin-left: 35%;
padding-bottom: 5px;
}

#errorText {
display: none;
text-align: center;
padding: 10px;
margin: 0 auto;
margin: 15px 15px 0;
background: rgb(124,124,136);
color: white;
border: 2px solid rgb(190,50,38);
}

/* form */
form {
width: 561px;
margin: 0 auto;
padding-bottom: 15px;
}

fieldset {
position: relative;
padding: 5px 30px 70px 30px;
background: white;
border-radius: 5px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 25px;
}

fieldset:last-of-type {
margin-bottom: 0;
}

legend {
font-weight: bold;
font-size: 36px;
font-family: tangerine, cursive;
position: absolute;
padding: 10px 0;
}

input, label, select, textarea, fieldset p, div.errorMessage, #ccNumErrorMessage, #cvvErrorMessage {
position: relative;
top: 50px;
line-height: 1.2em;
}

label, input {
display: block;
}

#expMoLabel, #expYrLabel {
position: absolute;
left: -10000px;
}

#buttonContainer {
width: 100%;
text-align: center;
}

#orderButton {
margin: 0 auto;
font-family: tangerine, cursive;
font-size: 24px;
top: 15px;
-webkit-appearance: none;
display: inline-block;
}

fieldset.checks input, div.checks input {
float: none;
margin-right: 20px;
}

fieldset.checks textarea {
margin-left: 21px;
width: 90%;
height: 50px;
}

fieldset.text label {
width: 8em;
text-align: right;
float: left;
clear: left;
margin-right: 10px;
margin-top: 5px;
}

fieldset.text input, fieldset.text select {
margin-top: 5px;
margin-right: 5px;
}

fieldset div.errorMessage, #ccNumErrorMessage, #cvvErrorMessage {
display: none;
color: red;
margin-top: 10px;
}

#ccNumErrorMessage, #cvvErrorMessage {
margin-left: 8.5em;
}

div.checks label {
width: auto;
text-align: left;
float: none;
clear: none;
}

div.inline label, div.inline input, div.inline select, div.inline div {
display: inline-block;
float: none;
text-align: center;
width: auto;
}

div.inline option {
text-align: left;
}

#billFName, #billLName, #delivFName, #delivLName, #billCity, #delivCity, #billPhone, #delivPhone {
width: 15em;
}

#billStreet, #delivStreet, #billEmail, #delivEmail {
width: 20em;
}

#billZip, #delivZip {
width: 10em;
}

#ccNum {
width: 16em;
}

#cvv {
width: 4em;
}

/* footer */
footer {
width: 581px;
color: white;
background: rgb(124,124,136);
font-size: 16px;
padding: 10px;
text-align: center;
float: right;
}

our form has been submitte snoot flowers You entered the following data CustomText- Floral Arrangements Billing FirstName Maria BillingLastName Santiago Billing Street 1 Main St Seasonal Bouquets Billing City Las Cruces Billing State NM Billing zip 88001 Live Plants Billing Phone 575-555-2000 Same Address on DeliveryLastName Santiago Shop by Price Deliver Street 1 Main St Deliterycity Las Cruces Deliver State NM Delivery Zip 88001 DeliveryPhone 575-555-2000 DelivMonth 1 DelivDay 1 DelivYear 2017 PaymentType Viga CardNumber-1 Exp Month 01 Exp Year 2017 New Username Password 1- Password2 Snoot Flowers Davenport, Iowa Figure 6-12: Submission results page Jason Bucy

<!DOCTYPE html>
<html xmlns=\"http://www.w3.org/1999/xhtml\">

<head>
<meta charset=\"utf-8\" />
<meta name=\"viewport\" content=\"width=page-width, initial-scale=1.0\">
<title>Happy Flowers - Order</title>
<link rel=\"stylesheet\" href=\"happpppy.css\" />
<link href=\'http://fonts.googleapis.com/css?family=Tangerine\' rel=\'stylesheet\' type=\'text/css\'>
<style>
/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
width: 800px;
margin: 0 auto;
font-family: garamond, \'times new roman\', times, serif;
background: rgb(246,245,242);
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: \'\';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a:link, a:visited {
text-decoration: none;
color: inherit;
}

a:hover {
text-decoration: none;
color: inherit;
}

a:active {
text-decoration: none;
color: inherit;
}
/* container for header and nav */
div.container {
float: left;
}
/* page header */
header {
border: 2px solid rgb(190,50,38);
border-right: none;
padding: 30px 10px;
text-align: center;
line-height: 1.8em;
background: white;
width: 219px;
float: left;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}

header h1 {
font-family: tangerine, cursive;
font-size: 48pt;
text-transform: lowercase;
color: rgb(190,50,38);
}

header h1 img {
display: inline-block;
}
/* remove blank space for descenders below image */
#accent img {
display: block;
}
/* navigation */
nav {
width: 219px;
padding: 10px;
float: left;
clear: left;
}

nav ul li:hover {
background: rgb(0,89,132);
}
/* main content */
article {
background: #4DA375;
width: 581px;
float: right;
padding: 10px;
}

article h2 {
font-size: 48px;
font-weight: bold;
text-align: center;
font-family: tangerine, cursive;
text-shadow: 10px 0px 17px white, -10px 0px 17px white;
}

article div.results {
background: white;
border-radius: 5px;
margin: 5px 15px 15px;
padding: 5px 30px;
}

article h3 {
font-size: 18pt;
font-weight: bold;
text-align: center;
padding-bottom: 10px;
}

article div.results p {
margin-left: 35%;
padding-bottom: 5px;
}

#errorText {
display: none;
text-align: center;
padding: 10px;
margin: 0 auto;
margin: 15px 15px 0;
background: rgb(124,124,136);
color: white;
border: 2px solid rgb(190,50,38);
}
/* form */
form {
width: 561px;
margin: 0 auto;
padding-bottom: 15px;
}