Question
I need to convert my code below into jquery . These were the specifications; create a simple checkout form that collects a billing address (name,
I need to convert my code below into jquery. These were the specifications; create a simple checkout form that collects a billing address (name, address, city, state, zip) and shipping address with the same fields. Add a checkbox over the shipping address with the label Shipping address is the same as billing. If the user clicks on the checkbox, then automatically transfer the contents of the billing address fields into the shipping address fields and disable the shipping fields for entry. If the user unchecks the box, the contents of the fields should be left as is, but the fields should once again be enabled.
-----------
function onCheckChange(event) {
bilName = document.getElementById("bilName");
bilAddress = document.getElementById("bilAddress");
bilCity = document.getElementById("bilCity");
bilState = document.getElementById("bilState");
bilZip = document.getElementById("bilZip");
shipName = document.getElementById("shipName");
shipAddress = document.getElementById("shipAddress");
shipCity = document.getElementById("shipCity");
shipState = document.getElementById("shipState");
shipZip = document.getElementById("shipZip");
if (event.checked) {
// if true set all the values of billing address to shipping address
shipName.value = bilName.value;
shipAddress.value = bilAddress.value;
shipCity.value = bilCity.value;
shipState.value = bilState.value;
shipZip.value = bilZip.value;
// set the ship details to readonly true
shipName.readOnly = true;
shipAddress.readOnly = true;
shipCity.readOnly = true;
shipState.readOnly = true;
shipZip.readOnly = true;
} else {
// if true set all the values of shipping address to empty
shipName.value = "";
shipAddress.value = "";
shipCity.value = "";
shipState.value = "";
shipZip.value = "";
// set the ship details to readonly false
shipName.readOnly = false;
shipAddress.readOnly = false;
shipCity.readOnly = false;
shipState.readOnly = false;
shipZip.readOnly = false;
}
}
Billing Address | |
Name |
|
Address |
|
City |
|
State |
|
Zip |
|
Shipping address is the same as billing | |
Shipping Address | |
Name |
|
Address |
|
City |
|
State |
|
Zip |
|
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started