ZuoTi.Pro
Question

Form for a user to enter billing and shipping information. A checkbox that when clicked copies...

Form for a user to enter billing and shipping information. A checkbox that when clicked copies all of the billing information to the shipping information. A submit button that, when clicked, will make sure that all text fields have had data entered into them. Create your own validation in for the fields, No automatic browser validation.

JavaScript/HTML

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


</head>

<body>
   <div class="container">
      <header>
         <h1>
           
         </h1>
      </header>

      <nav>
         <ul>
            <li><a href="#">billing information</a></li>

            <li><a href="#">shipping information</a></li>
         </ul>
      </nav>
   </div>
    
   <article>
      <h2>Your form has been submitted</h2>
      <div class="results">
         <h3>You entered the following data:</h3>

         <script>
             var formData = location.search;
             formData = formData.substring(1, formData.length);
             while (formData.indexOf("+") !== -1) {
                formData = formData.replace("+", " ");
             }
             formData = decodeURIComponent(formData);
             var formArray = formData.split("&");
             for (var i = 0; i < formArray.length; i = i + 1) {
                document.write("<p>" + formArray[i] + "</p>");
             }
         </script>
      </div>
   </article>
   <footer>Spy Glasses <span>&bull;</span> Davenport, Iowa</footer>
</body>
</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

The program for Billing information & html page, here the basic code of html:

<!DOCTYPE html>
<html>
<head>
<title>Shipping & Billing Information</title>
</head>
<body>

<section class="billing" id="ship-bill">
<h1>Shipping and Billing Information</h1>

<form action="#" method="get">


<fieldset class="info">
<h1>Billing Information</h1>
<label>First name:<input class="input-adjust" type="text" id="bfname"></label>
<label>Last name:<input class="input-adjust" type="text" id="blname"></label>
<label>Address:<input class="input-adjust" type="text" id="baddress"></label>
<label>City:<input class="input-adjust" type="text" id="bcity"></label>
<label>Country:<input class="input-adjust" type="text" id="bcountry"></label>
</fieldset>

<fieldset class="info">
<h1>Shipping Information</h1>
<label for="billing-info">Same as my billing address:</label> <input class="input-adjust" type="checkbox" id="same" name="same" onchange= "billingFunction()">
<label>First name:<input class="input-adjust" type="text" id="sfname"></label>
<label>Last name:<input class="input-adjust" type="text" id="slname"></label>
<label>Address:<input class="input-adjust" type="text" id="saddress"></label>
<label>City:<input class="input-adjust" type="text" id="scity"></label>
<label>Country:<input class="input-adjust" type="text" id="scountry"></label>
</fieldset>

<input class="input-adjust" type="submit" value="Submit">
</form>


</section>

</body>
</html>

Now, add the css to get webpage GUI more better, here the style.css


*{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    font-size: 16px;
}


/* Form Style */


section {
  width: 500px;
  margin: 60px auto;
  border: 1px solid #99ffff;
  height: 570px;
  padding: 0;

}

h1 {
  background-color: #00CCCC;
  color: #ffffff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  text-align: center;
  vertical-align: middle;
  padding: 5px;
  margin: 0 0 20px 0;

}



.input-adjust {
  width: 450px;
  height: 35px;
  border-radius: 5px;
  padding: 5px;
  margin: 10px 0 10px 0;

}



form {
  width: 470px;
  height: 470px;
  padding-left: 10px;
  margin: 0 auto;
 

  
}

input[type=submit] {
  height: 50px;
  font-size: 20px;
  color: #ffffff;
  background-color: #00CCCC;

}

label {
  font-weight: bold;

     
}


/* Scheduling Form */


textarea {
        width: 450px;
        height: 100px;
}

.timezone {
        margin: 10px 0;
        width: 450px;
}

.scheduling {
        width: 500px;
        height: 650px;
        border: 1px solid #99ffff;

}


/* Sign In Form */


.link {
        margin: 0 10px;
}


.label {
        margin-right: 150px;
        position: relative;
        top: -10px;
}

#logged-in {
        width: 30px;

}


/* Shipping and Billing Form */


.billing {
        width: 650px;
        height: 1250px;
        border: 1px solid #99ffff;
        padding: 0;
}

.info {
        margin: 10px 0;
}



/* Credit Card Form */


#csv {
        width: 100px;
        margin: 0 60px 10px 0;
}

.csv-info {
        font-size: 12px;
        line-height: 1.2em;
        margin: 5px 0;
}


/* Questionnaire */ 


input[name=ice-cream-input], input[name=animal-input] {
    width: 200px;
    position: relative;
    top: -50px;
    left: 80px;
    
}

.radio-adjust {
   width: 450px;
  height: 35px;
  border-radius: 5px;
  padding: 5px;
  margin: 10px 0 10px 0;
  position: relative;
  right: 220px;
  
}

.animal, .ice-cream {
  margin-top: 30px;
}

.option {
         font-weight: 400;
     position: relative;
     top: -45px;
     left: 50px;
        }

.question {
        width: 500px;
        height: 1100px;
        border: 1px solid #99ffff;


}

input[type=radio] {
    margin: 0 5px 15px 15px;
   
}


/* Product Listing */


.shop {
        width: 1100px;
        position: relative;
        top: 50px;
        left: 230px;
    padding-bottom: 100px;
  

}

.shop h4 {
  margin: 10px 0;
}
.shop p {
  line-height: 1.5em;
}


.product {
  padding: 5px;
  margin-bottom: 15px;
 
}

.qty {
  width: 50px;
  margin-right: 10px;
  text-align: center;
}


caption {
  font-size: 24px;
  margin: 20px 0;
}

.cart {
  border-top: 2px solid black;
  margin-top: -15px;
 
 
}

.cart-title , .more-title {
        font-weight: 600;
}

.cart-title, .cart-detail, .more-title, .grand-total {
        text-align: center;
}


.promo-input {
        border: 1px solid black;
}


.price {
        margin: 10px 0;
}


table {
    border-collapse: collapse;
    width: 100%;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}


.btn-apply, .button {
        background-color: #33ff33;
        padding: 5px;
}

 .keep-shopping:hover {
        background-color: #0066ff;
 }

 .keep-shopping:active {
        background-color: #cc33ff;
 }

Now, to create javascript code, after the filling the information of billing when click on check box at shipping the address of billing will automatically copy to shipping field, here the code

var SFN = document.getElementById("sfname");
var SLN = document.getElementById("slname");
var SAD = document.getElementById("saddress");
var SCY = document.getElementById("scity");
var SCO = document.getElementById("scountry");
var BFN = document.getElementById("bfname");
var BLN = document.getElementById("blname");
var BAD = document.getElementById("baddress");
var BCY = document.getElementById("bcity");
var BCO = document.getElementById("bcountry");

function billingFunction() {
  if (document.getElementById("same").checked == true) {
    SFN.value = BFN.value;
    SLN.value = BLN.value;
    SAD.value = BAD.value;
    SCY.value = BCY.value; 
    SCO.value = BCO.value;
  } else {
    SFN.value = "";
    SLN.value = "";
    SAD.value = "";
    SCY.value = "";
    SCO.value = "";
    BFN.value = "";
    BLN.value = "";
    BAD.value = "";
    BCY.value = "";
    BCO.value = "";
}
}

The final output of the webpage include css & javascript link on the page,

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

*{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    font-size: 16px;
}


/* Form Style */


section {
  width: 500px;
  margin: 60px auto;
  border: 1px solid #99ffff;
  height: 570px;
  padding: 0;

}

h1 {
  background-color: #00CCCC;
  color: #ffffff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  text-align: center;
  vertical-align: middle;
  padding: 5px;
  margin: 0 0 20px 0;

}



.input-adjust {
  width: 450px;
  height: 35px;
  border-radius: 5px;
  padding: 5px;
  margin: 10px 0 10px 0;

}



form {
  width: 470px;
  height: 470px;
  padding-left: 10px;
  margin: 0 auto;
 

  
}

input[type=submit] {
  height: 50px;
  font-size: 20px;
  color: #ffffff;
  background-color: #00CCCC;

}

label {
  font-weight: bold;

     
}


/* Scheduling Form */


textarea {
        width: 450px;
        height: 100px;
}

.timezone {
        margin: 10px 0;
        width: 450px;
}

.scheduling {
        width: 500px;
        height: 650px;
        border: 1px solid #99ffff;

}


/* Sign In Form */


.link {
        margin: 0 10px;
}


.label {
        margin-right: 150px;
        position: relative;
        top: -10px;
}

#logged-in {
        width: 30px;

}


/* Shipping and Billing Form */


.billing {
        width: 650px;
        height: 1250px;
        border: 1px solid #99ffff;
        padding: 0;
}

.info {
        margin: 10px 0;
}



/* Credit Card Form */


#csv {
        width: 100px;
        margin: 0 60px 10px 0;
}

.csv-info {
        font-size: 12px;
        line-height: 1.2em;
        margin: 5px 0;
}


/* Questionnaire */ 


input[name=ice-cream-input], input[name=animal-input] {
    width: 200px;
    position: relative;
    top: -50px;
    left: 80px;
    
}

.radio-adjust {
   width: 450px;
  height: 35px;
  border-radius: 5px;
  padding: 5px;
  margin: 10px 0 10px 0;
  position: relative;
  right: 220px;
  
}

.animal, .ice-cream {
  margin-top: 30px;
}

.option {
         font-weight: 400;
     position: relative;
     top: -45px;
     left: 50px;
        }

.question {
        width: 500px;
        height: 1100px;
        border: 1px solid #99ffff;


}

input[type=radio] {
    margin: 0 5px 15px 15px;
   
}


/* Product Listing */


.shop {
        width: 1100px;
        position: relative;
        top: 50px;
        left: 230px;
    padding-bottom: 100px;
  

}

.shop h4 {
  margin: 10px 0;
}
.shop p {
  line-height: 1.5em;
}


.product {
  padding: 5px;
  margin-bottom: 15px;
 
}

.qty {
  width: 50px;
  margin-right: 10px;
  text-align: center;
}


caption {
  font-size: 24px;
  margin: 20px 0;
}

.cart {
  border-top: 2px solid black;
  margin-top: -15px;
 
 
}

.cart-title , .more-title {
        font-weight: 600;
}

.cart-title, .cart-detail, .more-title, .grand-total {
        text-align: center;
}


.promo-input {
        border: 1px solid black;
}


.price {
        margin: 10px 0;
}


table {
    border-collapse: collapse;
    width: 100%;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}


.btn-apply, .button {
        background-color: #33ff33;
        padding: 5px;
}

 .keep-shopping:hover {
        background-color: #0066ff;
 }

 .keep-shopping:active {
        background-color: #cc33ff;
 }
</style>
<script>
var SFN = document.getElementById("sfname");
var SLN = document.getElementById("slname");
var SAD = document.getElementById("saddress");
var SCY = document.getElementById("scity");
var SCO = document.getElementById("scountry");
var BFN = document.getElementById("bfname");
var BLN = document.getElementById("blname");
var BAD = document.getElementById("baddress");
var BCY = document.getElementById("bcity");
var BCO = document.getElementById("bcountry");

function billingFunction() {
  if (document.getElementById("same").checked == true) {
    SFN.value = BFN.value;
    SLN.value = BLN.value;
    SAD.value = BAD.value;
    SCY.value = BCY.value; 
    SCO.value = BCO.value;
  } else {
    SFN.value = "";
    SLN.value = "";
    SAD.value = "";
    SCY.value = "";
    SCO.value = "";
    BFN.value = "";
    BLN.value = "";
    BAD.value = "";
    BCY.value = "";
    BCO.value = "";
}
}

</script>
</head>
<body>

<section class="billing" id="ship-bill">
<h1>Shipping and Billing Information</h1>

<form>


<fieldset class="info">
<h1>Billing Information</h1>
<label>First name:<input class="input-adjust" type="text" id="bfname"></label>
<label>Last name:<input class="input-adjust" type="text" id="blname"></label>
<label>Address:<input class="input-adjust" type="text" id="baddress"></label>
<label>City:<input class="input-adjust" type="text" id="bcity"></label>
<label>Country:<input class="input-adjust" type="text" id="bcountry"></label>
</fieldset>

<fieldset class="info">
<h1>Shipping Information</h1>
<label for="billing-info">Same as my billing address:</label> <input class="input-adjust" type="checkbox" id="same" name="same" onchange= "billingFunction()">
<label>First name:<input class="input-adjust" type="text" id="sfname"></label>
<label>Last name:<input class="input-adjust" type="text" id="slname"></label>
<label>Address:<input class="input-adjust" type="text" id="saddress"></label>
<label>City:<input class="input-adjust" type="text" id="scity"></label>
<label>Country:<input class="input-adjust" type="text" id="scountry"></label>
</fieldset>

<input class="input-adjust" type="submit" value="Submit">
</form>


</section>

</body>
</html>
0 0
Add a comment
Know the answer?
Add Answer to:
Form for a user to enter billing and shipping information. A checkbox that when clicked copies...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • I cant seem to get the CSS at the bottom of this HTML to work. <!doctype...

    I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...

  • Hello! I am to create a .js file that allows the paragraph on the bottom of...

    Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...

  • Kindly assist in fixing the error i got when I pasted my codes to validate it....

    Kindly assist in fixing the error i got when I pasted my codes to validate it. The error is in bold. Error: Table column 2 established by element th has no cells beginning in it. From line 53, column 25; to line 55, column 40 <tr> <th colspan="2"> <!DOCTYPE HTML> <html lang="en"><!-- language is English-->    <head>    <meta charset="utf-8"/>    <title>DA Website</title>    <link rel="stylesheet" type="text/css" href="styles.css" />    </head>    <body>    <div id="wrapper">    <!-- start html...

  • Please edit and add all the code needed to make the images side by side and to put the buttons in...

    Please edit and add all the code needed to make the images side by side and to put the buttons in the middle of the images. Thank you index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <!-- Bootstrap -->    <link href="css/bootstrap-4.0.0.css" rel="stylesheet">    <link href="style.css" rel="stylesheet" type="text/css">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header>    <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Lakeside Resort Spot</a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">...

  • Path of Light Yoga Chapter 7 Please help!! Here is my code for the index page:...

    Path of Light Yoga Chapter 7 Please help!! Here is my code for the index page: <html lang="en"> <head> <title>Path of Light Yoga Studio</title> <link rel="stylesheet" href="yoga.css" /> </head> <body> <div id="wrapper"> <header> <h1>Path of Light Yoga Studio</h1> </header> <nav> <a href="index.html">Home</a> &nbsp; <a href="classes.html">Classes</a> &nbsp; <a href="schedule.html">Schedule</a> &nbsp; <a href="contact.html">Contact</a> </nav> <main> <img class="floatleft" src="yogadoor2.jpg" alt="yogadoor2" height="300px" width="250px"> <h2>Find Your Inner Light</h2> <p> Path of Light Yoga Studio provides all levels of yoga practice in a tranquil, peaceful environment....

  • Create your own grid-based page using the sample HTML. Generate a Grid ( Experiment with Different...

    Create your own grid-based page using the sample HTML. Generate a Grid ( Experiment with Different Tools ) http://gridcalculator.dk/ Implement grid on the sample html file using pixels Convert to a percentage-based grid HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Out with the old...</title> <link rel="stylesheet" href="path-to-style.css"> <meta name="description" content="We are going to refine this document down to a good starting point for all html5 projects moving forward."> <meta name="author" content="ABC"> <link rel="shortcut icon" href="/favicon.ico" /> </head> <body> <div...

  • Hello, I was wondering if you could possibly think of ways to improve my home page then I would l...

    Hello, I was wondering if you could possibly think of ways to improve my home page then I would like you to do so. I know it could be better. Thank you. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link href="style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <nav class="navbar...

  • I am trying to create a slide show using JavaScript. This is what I have so...

    I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

    URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to download the uncompressed latest version of jQuery Copy the jQuery.x.x.x.js file in the folder and specified as source file. Task 2: Download and install HTML-Kit 1. Navigate to htmlkit.com. 2. Click Download HTML-Kit 292. After it downloads, launch HKSetup.exe. Choose Full installation (the default) Uncheck Yes, download and install HTML-Kit Tools Trial. 6. Click Next>Finish. Task 3: Creating a Simple jQuery Application Launch HTML-Kit....

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT