Form for a user to enter billing and shipping information. Checkbox that when clicked copies all...

Form for a user to enter billing and shipping information. Checkbox that when clicked copies all of the billing information to the shipping information. A submit button to make sure the text fields have been filled. Just trying to make a simple small webpage to order a couple Items like toys for instance nothing fancy or big just small and simple, a couple of text fields. That's all

JavaScript/HTML

Solutions

Expert Solution

Hi,

Please find the below code for transfer the Shipping Information to Billing information which clicked on the Checkbox - Billing Same as Shipping

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <style>
        #inline {
            width: 100%;
            height: auto;
            background-color: honeydew;
            display: flex;
        }

        .one, .two {
            width: 50%;
            height: 100px;
            background-color: green;
            margin: 10px;
        }

        .block_container {
            text-align: left;
            padding-left: 10px;
            margin-left: 10px;
        }

        .block {
            width: 100px;
        }
    </style>
    <script>
        //THis event will fire when HTML controls loaded in browser and ready for use as DOM
        $(document).ready(readyFn);
        function readyFn(n) {
            //Find out the Check Box - Billing Same as Shipping
            var chkIsBillingSameAsShipping = $("#chkBillingSameAsShipping");

            //attach click event on the checkox
            chkIsBillingSameAsShipping.off("click").on("click", function () {
                //This will excute when Chckbox is clicked
                var checkedOrNot = $(this).prop("checked");

                //If Checkbox is Checked then below code executes
               
                if (checkedOrNot) {
                     //Copy Infomation from Shipping Address to Billing Address
                    $("#txtBillingAddressline1").val($("#txtShippingAddressline1").val());  
                    $("#txtBillingAddressline2").val($("#txtShippingAddressline2").val());
                    $("#txtBillingCity").val($("#txtShippingCity").val());
                    $("#txtBillingState").val($("#txtShippingState").val());
                    $("#txtBillingCountry").val($("#txtShippingCountry").val());
                    $("#txtBillingPostalCode").val($("#txtShippingPostalCode").val());
                }
                //If checkbx is Unchecked then below code executes
                else {
                    //Clear Billing Address Information
                    $("#txtBillingAddressline1").val("");
                    $("#txtBillingAddressline2").val("");
                    $("#txtBillingCity").val("");
                    $("#txtBillingState").val("");
                    $("#txtBillingCountry").val("");
                    $("#txtBillingPostalCode").val("");
                }
            })
        }


    </script>
</head>
<body>
    <div id="inline">
        <div id="dvShippingInfo" class="block_container">
            <h1>Shipping Info</h1><br />

            <div class="block">Address Line1:</div> <input type="text" id="txtShippingAddressline1" style="height:20px;width:150px" /><br />
            <div class="block">Address Line2: </div><input type="text" id="txtShippingAddressline2" style="height:20px;width:150px" /><br />
            <div class="block">City: </div><input type="text" id="txtShippingCity" style="height:20px;width:150px" /><br />
            <div class="block">State:</div> <input type="text" id="txtShippingState" style="height:20px;width:150px" /><br />
            <div class="block">Country:</div> <input type="text" id="txtShippingCountry" style="height:20px;width:150px" /><br />
            <div class="block">Postal Code: </div><input type="text" id="txtShippingPostalCode" style="height:20px;width:150px" /><br />

        </div>
        <div id="dvShippingInfo" class="block_container">
            <h1>Billing Info</h1><br />

            <div class="block">Address Line1:</div> <input type="text" id="txtBillingAddressline1" style="height:20px;width:150px" /><br />
            <div class="block">Address Line2: </div><input type="text" id="txtBillingAddressline2" style="height:20px;width:150px" /><br />
            <div class="block">City: </div><input type="text" id="txtBillingCity" style="height:20px;width:150px" /><br />
            <div class="block">State:</div> <input type="text" id="txtBillingState" style="height:20px;width:150px" /><br />
            <div class="block">Country:</div> <input type="text" id="txtBillingCountry" style="height:20px;width:150px" /><br />
            <div class="block">Postal Code: </div><input type="text" id="txtBillingPostalCode" style="height:20px;width:150px" /><br />

        </div>
    </div>

    <div>
        Billing Same as Shipping?: <input type="checkbox" id="chkBillingSameAsShipping">
    </div>
</body>
</html>

Below is the output;

venereology answered 1 year ago

Next > < Previous

Related Solutions

Using PHP, Make a form that allows the user to enter the weight of the item...

Using PHP, Make a form that allows the user to enter the weight of the item being shipped. This will be used to calculate the shipping cost.Create a form that uses the method POST The form should capture a customer's package weight with the one field for the package weight in pounds. All fields should have the REQUIRED attribute. The form should have a submit button and a reset button. The form should look nice. All the labels should line...

In C# When the user enters an invalid value, ask the user to repeatedly enter the...

In C# When the user enters an invalid value, ask the user to repeatedly enter the value until a valid value has been entered. Gender must be ‘M’ or ‘F’. Residency must be ‘I’ or ‘O’. Existing Code: using System; public class Student { public int credit; public String firstname, lastname, gender, residency, edate; public void input() { Console.WriteLine("\nWelcome to the Continental University Registration System!"); Console.WriteLine("\nEnter data about a student"); Console.Write("First Name: "); firstname = Console.ReadLine(); Console.Write("Last Name: "); lastname...

Assume user will enter letters or numbers that are out of range. When user inputs invalid...

Assume user will enter letters or numbers that are out of range. When user inputs invalid values, show an alert message and ask user to enter a valid value again. Validate first and then proceed with the program. isNaN() method may be useful. Must validate user input. 1. Suggested Filename: fortune.html & fortune.js Write a program that simulates a fortune cookie. The program should display one of five unique fortunes, depending on user input. The user must enter a number...

Write in C# please! Ask the user to enter all of their exam grades. Once they...

Write in C# please! Ask the user to enter all of their exam grades. Once they are done, calculate the minimum score, the maximum score and the average score for all of their scores. Perform this using at least 2 Loops (can be the same type of loop) and not any built in functions.

Create a program that when run, prompts the user to enter a city name, a date,...

Create a program that when run, prompts the user to enter a city name, a date, the minimum temperature and the maximum temperature. Calculate the difference between the maximum temperature and the minimum temperature. Calculate the average temperature based on the minimum and maximum temperature. Print out the following: City name today's Date minimum temperature maximum temperature average temperature difference between minimum and maximum The following is a sample run, user input is shown in bold underline. Enter City Name:...

When I run this C++ program that asks the user to enter the population of 4...

When I run this C++ program that asks the user to enter the population of 4 cities and produce the bar graph - it runs but ends with a Debug Error - run time check failure 2 stack around variable population was corrupted - any help would be appreciated #include <iostream> using namespace std; int main() { int population[4],k; int i=1,n=5; do { cout<<"Enter the population of city "<<i<<":"<<endl; cin>>population[i]; if(population[i]<0) ...

Write a C++ console program that prompts a user to enter information for the college courses...

Write a C++ console program that prompts a user to enter information for the college courses you have completed, planned, or are in progress, and outputs it to a nicely-formatted table. Name the CPP as you wish (only use characters, underscores and number in your file name. DO NOT use blank). Its output should look something like this: Course Year Units Grade ---------- ---- ----- ----- comsc-110 2015 4 A comsc-165 2016 4 ? comsc-200 2016 4 ? comsc-155h 2014...

JAVA Write a java program that will sum all positive number. Prompt the user to enter...

JAVA Write a java program that will sum all positive number. Prompt the user to enter numbers and add all positive numbers. The program will not add negative numbers and the program will stop when you enter ‘0’. Enter a number> 25 Enter a number> 9 Enter a number> 5 Enter a number> -3 Enter a number> 0 Sum = 39

Write a java program that asks user to enter a set of positive integer values. When...

Write a java program that asks user to enter a set of positive integer values. When the user stops (think of sentinel value to stop), the program display the maximum value entered by the user. Your program should recognize if no value is entered without using counter.

Write a C program that prompts the user to enter some information about up to 20...

Write a C program that prompts the user to enter some information about up to 20 individuals (think of a way to welcome and prompt the user). It must be stored in a structure. Once data is entered, the program output it as shown in sample run below. Your program should include a structure with a tag name of: “information”. It should contain the following data as members: a struct to store employee's name, defined as: struct name fullname e.g....

Subjects