Perform validation for this Html and fix all the error The Error are as fallow:
ID: 3862222 • Letter: P
Question
Perform validation for this Html and fix all the error
The Error are as fallow:
1. Error: Saw a form start tag, but there was already an active form element. Nested forms are not allowed. Ignoring the tag.
From line 199, column 2; to line 199, column 7
/legend> <form> <inp
2. Warning: The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.
From line 200, column 2; to line 200, column 43
<form> <input type="date" name="Ddate" id="date"> </fo
3. Error: End tag form seen, but there were open elements.
From line 201, column 2; to line 201, column 8
="date"> </form> </fi
4. Error: Unclosed element fieldset.
From line 197, column 2; to line 197, column 45
ieldset> <fieldset id="deliveryDate" class="checks" > <leg
5. Fatal Error: Cannot recover after last error. Any further errors will be ignored.
From line 201, column 2; to line 201, column 8
="date"> </form> </fi
6. Error: The for attribute of the label element must refer to a non-hidden form control.
From line 223, column 2; to line 223, column 21
Number"> <label for="expiry">Expira
<!DOCTYPE html>
<html>
<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="happyjavascript.css" />
<link href="http://fonts.googleapis.com/css?family=Tangerine" rel='stylesheet' type='text/css'>
</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 id="text">
<h2>Place an Order</h2>
<div id="errorText"></div>
<form action="results.htm">
<fieldset id="message" class="checks">
<legend>Message</legend>
<ul class="checkbox">
<li>
<input type="checkbox" id="chkCongratulations" name="Congratulations!" value="Congratulations!"><label for="chkCongratulations">Congratulations!</label></li>
<li>
<input type="checkbox" id="chkHappyBirthdy" name="Happy Birthdy!" value="Happy Birthdy!"><label for="chkHappyBirthdy">Happy Birthdy!</label></li>
<li>
<input type="checkbox" id="chkHappyAnniversary" name="Happy Anniversary!" value="Happy Anniversary!"><label for="chkHappyAnniversary">Happy Anniversary!</label></li>
<li>
<input type="checkbox" id="chkILoveyou" name="I Love you!" value="I Love you!"><label for="chkILoveyou">I Love you!</label></li>
<li>
<input type="checkbox" id="chkCustommessage" name=" " value=" "><label for="chkCustommessage">Custom message:</label></li>
</ul>
<textarea placeholder="Enter custom message here (max 250 characters)" id="txtArea"></textarea>
</fieldset>
<fieldset id="billingAddress" class="text">
<legend>Billing Address</legend>
<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="state">State</label>
<select id="state">
<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>
<ul class="checkbox">
<li>
<input type="checkbox" name=" " value=" " id="deliveyAdd"><label for="deliveyAdd">Same as billing address</label></li>
</ul>
<br/>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="dellname" name="lname">
<label for="Staddress">Street Address</label>
<input type="text" id="delStaddress" name="Staddress">
<label for="delCity">City</label>
<input type="text" id="delCity" name="City">
<label for="delstate">State</label>
<select id="delstate">
<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="delZip" name="zip">
<label for="phone">Phone</label>
<input type="text" id="delPhone" name="phone">
</fieldset>
<fieldset id="deliveryDate" class="checks" >
<legend>Delivery Date</legend>
<form>
<input type="date" name="Ddate" id="date">
</form>
</fieldset>
<fieldset id="paymentInfo" class="text">
<legend>Payment</legend>
<ul class="checkbox">
<li>
<input type="radio" name="Card" id="Visa" value="Visa" ><label for="Visa">Visa</label>
</li>
<li>
<input type="radio" name="Card" id="MasterCard" value="Master Card">
<label for="MasterCard">Master Card</label></li>
<li>
<input type="radio" name="Card" id="Discover" value="Discover">
<label for="Discover">Discover</label></li>
<li>
<input type="radio" name="Card" id="AmericanExpress" value="American Express">
<label for="AmericanExpress">American Express</label></li>
</ul>
<label for="CardNumber">Card #</label>
<input type="text" id="CardNumber" name="CardNumber">
<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="exp" id="expiry" />
<label for="CVV">CVV</label>
<input type="text" id="CVV" name="#CVV">
</fieldset>
<fieldset id="createAccount" class="text">
<legend>Create Account</legend>
<p>
To be able to access your purchase history and make changes to your order,
enter a name and password to create an account.
</p>
<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="pass">
</fieldset>
<div id="buttonContainer">
<input type="submit" value="Place Order" id="orderButton" />
</div>
</form>
</article>
<article class="hide" id="result">
<h2>Your form has been submitted</h2>
<form>
<fieldset class="checks">
<legend>you enter are following data</legend>
<div id="appendfieldset"></div>
</fieldset>
</form>
</article>
<footer>Happy Flowers <span>•</span> Chicago, IL</footer>
<script>
//check the same as billing address function.
function checkedFun() {
if (document.getElementById('deliveyAdd').checked) {
document.getElementById('delfname').value = document.getElementById("FName").value;
document.getElementById('dellname').value = document.getElementById("lname").value;
document.getElementById('delStaddress').value = document.getElementById("Staddress").value;
document.getElementById('delCity').value = document.getElementById("city").value;
document.getElementById('delZip').value = document.getElementById("zip").value;
document.getElementById('delPhone').value = document.getElementById("phone").value;
document.getElementById('delstate').value = document.getElementById("state").value;
}
}
//Submit button click function
function submitFun() {
var text = '';
document.getElementById('text').className = "hide";
document.getElementById('result').className = "show";
if (document.getElementById('chkCongratulations').checked) {
text += "<label>CustomText = " + document.getElementById('chkCongratulations').value + "</label>";
}
if (document.getElementById('chkHappyBirthdy').checked) {
text += "<label>CustomText = " + document.getElementById('chkHappyBirthdy').value + "</label>";
}
if (document.getElementById('chkHappyAnniversary').checked) {
text += "<label>CustomText = " + document.getElementById('chkHappyAnniversary').value + "</label>";
}
if (document.getElementById('chkILoveyou').checked) {
text += "<label>CustomText = " + document.getElementById('chkILoveyou').value + "</label>";
}
if (document.getElementById('chkCustommessage').checked) {
text += "<label>CustomText = " + document.getElementById('txtArea').value + "</label>";
}
text += "<label>Billing First Name = " + document.getElementById("FName").value + "</label>";
text += "<label>Billing Last Name = " + document.getElementById("lname").value + "</label>";
text += "<label>Billing Steet Address = " + document.getElementById("Staddress").value + "</label>";
text += "<label>Billing City = " + document.getElementById("city").value + "</label>";
text += "<label>Billing State = " + document.getElementById("state").value + "</label>";
text += "<label>Billing Zip = " + document.getElementById("zip").value + "</label>";
text += "<label>Billing Phone = " + document.getElementById("phone").value + "</label>";
text += "<label>Delivery First Name = " + document.getElementById("FName").value + "</label>";
text += "<label>Delivery Last Name = " + document.getElementById("lname").value + "</label>";
text += "<label>Delivery Steet Address = " + document.getElementById("Staddress").value + "</label>";
text += "<label>Delivery City = " + document.getElementById("city").value + "</label>";
text += "<label>Delivery State = " + document.getElementById("state").value + "</label>";
text += "<label>Delivery Zip = " + document.getElementById("zip").value + "</label>";
text += "<label>Delivery Phone = " + document.getElementById("phone").value + "</label>";
//for delivery date
text += "<label>Delivery Date = " + document.getElementById("date").value + "</label>";
//for payment
var radios = document.getElementsByName('Card');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
text += "<label>payment Type = " + radios[i].value + "</label>";
}
}
text += "<label>CardNumber = " + document.getElementById("CardNumber").value + "</label>";
text += "<label>Exp Month = " + document.getElementById("expireMM").value + "</label>";
text += "<label>Exp Year = " + document.getElementById("expireYY").value + "</label>";
text += "<label>CVV Value = " + document.getElementById("CVV").value + "</label>";
text += "<label>UserName = " + document.getElementById("Uname").value + "</label>";
text += "<label>Password = " + document.getElementById("Pass").value + "</label>";
text += "<label>Password (verify) = " + document.getElementById("passv").value + "</label>";
document.getElementById('appendfieldset').innerHTML = text;
}
</script>
</body>
</html>
Explanation / Answer
Error #1,3,4,5 were coming due to Nested Form elements hence commened it:
<%-- <form>--%>
<input type="date" name="Ddate" id="date">
<%--</form>--%>
Error @2 - It is a warning due to The date input type is not supported in all browsers, so the resolution is to check the type using script and if not not supported datatimepicker can be used:
<script>
if (datefield.type != "date") {
jQuery(function ($) { $('#date').datepicker(); })
}
</script>
#6: The for attribute of the label element must refer to a non-hidden form control - So we can hide the input using the style tag.
<input class="inputCard" name="exp" id="expiry" />
<%-- <input class="inputCard" type="hidden" name="exp" id="expiry" />--%>
Here is the complete Html:
<html>
<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="happyjavascript.css" />
<link href="http://fonts.googleapis.com/css?family=Tangerine" rel='stylesheet' type='text/css'>
</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 id="text">
<h2>Place an Order</h2>
<div id="errorText"></div>
<form action="results.htm">
<fieldset id="message" class="checks">
<legend>Message</legend>
<ul class="checkbox">
<li>
<input type="checkbox" id="chkCongratulations" name="Congratulations!" value="Congratulations!"><label for="chkCongratulations">Congratulations!</label></li>
<li>
<input type="checkbox" id="chkHappyBirthdy" name="Happy Birthdy!" value="Happy Birthdy!"><label for="chkHappyBirthdy">Happy Birthdy!</label></li>
<li>
<input type="checkbox" id="chkHappyAnniversary" name="Happy Anniversary!" value="Happy Anniversary!"><label for="chkHappyAnniversary">Happy Anniversary!</label></li>
<li>
<input type="checkbox" id="chkILoveyou" name="I Love you!" value="I Love you!"><label for="chkILoveyou">I Love you!</label></li>
<li>
<input type="checkbox" id="chkCustommessage" name=" " value=" "><label for="chkCustommessage">Custom message:</label></li>
</ul>
<textarea placeholder="Enter custom message here (max 250 characters)" id="txtArea"></textarea>
</fieldset>
<fieldset id="billingAddress" class="text">
<legend>Billing Address</legend>
<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="state">State</label>
<select id="state">
<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>
<ul class="checkbox">
<li>
<input type="checkbox" name=" " value=" " id="deliveyAdd"><label for="deliveyAdd">Same as billing address</label></li>
</ul>
<br/>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="dellname" name="lname">
<label for="Staddress">Street Address</label>
<input type="text" id="delStaddress" name="Staddress">
<label for="delCity">City</label>
<input type="text" id="delCity" name="City">
<label for="delstate">State</label>
<select id="delstate">
<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="delZip" name="zip">
<label for="phone">Phone</label>
<input type="text" id="delPhone" name="phone">
</fieldset>
<fieldset id="deliveryDate" class="checks" >
<legend>Delivery Date</legend>
<%-- <form>--%>
<input type="date" name="Ddate" id="date">
<%--</form>--%>
</fieldset>
<fieldset id="paymentInfo" class="text">
<legend>Payment</legend>
<ul class="checkbox">
<li>
<input type="radio" name="Card" id="Visa" value="Visa" ><label for="Visa">Visa</label>
</li>
<li>
<input type="radio" name="Card" id="MasterCard" value="Master Card">
<label for="MasterCard">Master Card</label></li>
<li>
<input type="radio" name="Card" id="Discover" value="Discover">
<label for="Discover">Discover</label></li>
<li>
<input type="radio" name="Card" id="AmericanExpress" value="American Express">
<label for="AmericanExpress">American Express</label></li>
</ul>
<label for="CardNumber">Card #</label>
<input type="text" id="CardNumber" name="CardNumber">
<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" name="exp" id="expiry" />
<%-- <input class="inputCard" type="hidden" name="exp" id="expiry" />--%>
<label for="CVV">CVV</label>
<input type="text" id="CVV" name="#CVV">
</fieldset>
<fieldset id="createAccount" class="text">
<legend>Create Account</legend>
<p>
To be able to access your purchase history and make changes to your order,
enter a name and password to create an account.
</p>
<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="pass">
</fieldset>
<div id="buttonContainer">
<input type="submit" value="Place Order" id="orderButton" />
</div>
</form>
</article>
<article class="hide" id="result">
<h2>Your form has been submitted</h2>
<form>
<fieldset class="checks">
<legend>you enter are following data</legend>
<div id="appendfieldset"></div>
</fieldset>
</form>
</article>
<footer>Happy Flowers <span>•</span> Chicago, IL</footer>
<script>
if (datefield.type != "date") { //if browser doesn't support input type="date", we can initialize date picker widget:
jQuery(function ($) {
$('#date').datepicker();
})
}
</script>
<script>
//check the same as billing address function.
function checkedFun() {
if (document.getElementById('deliveyAdd').checked) {
document.getElementById('delfname').value = document.getElementById("FName").value;
document.getElementById('dellname').value = document.getElementById("lname").value;
document.getElementById('delStaddress').value = document.getElementById("Staddress").value;
document.getElementById('delCity').value = document.getElementById("city").value;
document.getElementById('delZip').value = document.getElementById("zip").value;
document.getElementById('delPhone').value = document.getElementById("phone").value;
document.getElementById('delstate').value = document.getElementById("state").value;
}
}
//Submit button click function
function submitFun() {
var text = '';
document.getElementById('text').className = "hide";
document.getElementById('result').className = "show";
if (document.getElementById('chkCongratulations').checked) {
text += "<label>CustomText = " + document.getElementById('chkCongratulations').value + "</label>";
}
if (document.getElementById('chkHappyBirthdy').checked) {
text += "<label>CustomText = " + document.getElementById('chkHappyBirthdy').value + "</label>";
}
if (document.getElementById('chkHappyAnniversary').checked) {
text += "<label>CustomText = " + document.getElementById('chkHappyAnniversary').value + "</label>";
}
if (document.getElementById('chkILoveyou').checked) {
text += "<label>CustomText = " + document.getElementById('chkILoveyou').value + "</label>";
}
if (document.getElementById('chkCustommessage').checked) {
text += "<label>CustomText = " + document.getElementById('txtArea').value + "</label>";
}
text += "<label>Billing First Name = " + document.getElementById("FName").value + "</label>";
text += "<label>Billing Last Name = " + document.getElementById("lname").value + "</label>";
text += "<label>Billing Steet Address = " + document.getElementById("Staddress").value + "</label>";
text += "<label>Billing City = " + document.getElementById("city").value + "</label>";
text += "<label>Billing State = " + document.getElementById("state").value + "</label>";
text += "<label>Billing Zip = " + document.getElementById("zip").value + "</label>";
text += "<label>Billing Phone = " + document.getElementById("phone").value + "</label>";
text += "<label>Delivery First Name = " + document.getElementById("FName").value + "</label>";
text += "<label>Delivery Last Name = " + document.getElementById("lname").value + "</label>";
text += "<label>Delivery Steet Address = " + document.getElementById("Staddress").value + "</label>";
text += "<label>Delivery City = " + document.getElementById("city").value + "</label>";
text += "<label>Delivery State = " + document.getElementById("state").value + "</label>";
text += "<label>Delivery Zip = " + document.getElementById("zip").value + "</label>";
text += "<label>Delivery Phone = " + document.getElementById("phone").value + "</label>";
//for delivery date
text += "<label>Delivery Date = " + document.getElementById("date").value + "</label>";
//for payment
var radios = document.getElementsByName('Card');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
text += "<label>payment Type = " + radios[i].value + "</label>";
}
}
text += "<label>CardNumber = " + document.getElementById("CardNumber").value + "</label>";
text += "<label>Exp Month = " + document.getElementById("expireMM").value + "</label>";
text += "<label>Exp Year = " + document.getElementById("expireYY").value + "</label>";
text += "<label>CVV Value = " + document.getElementById("CVV").value + "</label>";
text += "<label>UserName = " + document.getElementById("Uname").value + "</label>";
text += "<label>Password = " + document.getElementById("Pass").value + "</label>";
text += "<label>Password (verify) = " + document.getElementById("passv").value + "</label>";
document.getElementById('appendfieldset').innerHTML = text;
}
</script>
</body>
</html>