Question

In: Computer Science

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 2 years ago
Next > < Previous

Related Solutions

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
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...
User Python to solve; show all code: A user will enter in data for a basketball...
User Python to solve; show all code: A user will enter in data for a basketball team. For each player on the team the user will enter The player’s last name The average number of point the player scored last season The number of games the player is projected to play in this year Write a program that will prompt the user for the player data described above. The user does not know how many players are on the team...
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...
User is asked to enter a series of numbers. That input will stop when user enters...
User is asked to enter a series of numbers. That input will stop when user enters -9999. Find a maximum number from that series and a minimum number from that series. Output the location of Maximum number and minimum number.  Write a C++ program that asks the user to repeatedly input positive numbers until   -1 is pressed. Your program should print the second largest number and the count of even and odd numbers.  Write a C++ program that asks...
Write program that prompts the user to enter a person's date of birth in numeric form...
Write program that prompts the user to enter a person's date of birth in numeric form such as 8-27-1980. The program then outputs the date of birth in the form: August 27, 1980. Your program must contain at least two exception classes: invalidDay and invalidMonth. If the user enters an invalid value for day, then the program should throw and catch an invalidDay object. Similar conventions for the invalid values of month and year. (Note that your program must handle...
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...
First, the Python program prompts user to enter user information (name, email, and phone number). Then...
First, the Python program prompts user to enter user information (name, email, and phone number). Then it displays a menu called “Fish Information” that has the following fish type: 1. Cat Fish 2. Red Fish 3. Any other fish Let user choose the fish type that he/she got and input the length of the fish. Then the program will determine what should be done with this particular fish. Based on the following criteria: Criteria: Length: FISHTYPE - Cat Fish <10:...
I've created a C# Windows form application in Visual stuidos it allows the user to enter...
I've created a C# Windows form application in Visual stuidos it allows the user to enter information, save that information to a database, then show that information in a datagridview. Everything works fine but the datgridview. It shows that rows have been added but not the text. I can see in my database the reports that have been added so I know its alteast saving the information. I don't know what I'm doing wrong. Please help! My code: using System;...
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.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT