I need to convert my code below into jquery. These were the specifications; crea
ID: 3730634 • Letter: I
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, 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.
-----------
<html>
<script>
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;
}
}
</script>
<body>
<table>
<tbody>
<tr>
<td colspan="2">Billing Address</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" id="bilName" /> </td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" id="bilAddress" /> </td>
</tr>
<tr>
<td>City</td>
<td>
<input type="text" id="bilCity" /> </td>
</tr>
<tr>
<td>State</td>
<td>
<input type="text" id="bilState" /> </td>
</tr>
<tr>
<td>Zip</td>
<td>
<input type="text" id="bilZip" /> </td>
</tr>
<tr>
<td>Shipping address is the same as billing</td>
<td>
<input type="checkbox" id="checkSame" </td>
</tr>
<tr>
<td colspan="2">Shipping Address</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" id="shipName" /> </td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" id="shipAddress" /> </td>
</tr>
<tr>
<td>City</td>
<td>
<input type="text" id="shipCity" /> </td>
</tr>
<tr>
<td>State</td>
<td>
<input type="text" id="shipState" /> </td>
</tr>
<tr>
<td>Zip</td>
<td>
<input type="text" id="shipZip" /> </td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<script>
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;
}
}
</script>
<body>
<table>
<tbody>
<tr>
<td colspan="2">Billing Address</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" id="bilName" /> </td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" id="bilAddress" /> </td>
</tr>
<tr>
<td>City</td>
<td>
<input type="text" id="bilCity" /> </td>
</tr>
<tr>
<td>State</td>
<td>
<input type="text" id="bilState" /> </td>
</tr>
<tr>
<td>Zip</td>
<td>
<input type="text" id="bilZip" /> </td>
</tr>
<tr>
<td>Shipping address is the same as billing</td>
<td>
<input type="checkbox" id="checkSame" </td>
</tr>
<tr>
<td colspan="2">Shipping Address</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" id="shipName" /> </td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" id="shipAddress" /> </td>
</tr>
<tr>
<td>City</td>
<td>
<input type="text" id="shipCity" /> </td>
</tr>
<tr>
<td>State</td>
<td>
<input type="text" id="shipState" /> </td>
</tr>
<tr>
<td>Zip</td>
<td>
<input type="text" id="shipZip" /> </td>
</tr>
</tbody>
</table>
</body>
</html>
Explanation / Answer
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#checkSame").change(function(){
if($('#checkSame').is(':checked')){
$('#shipName').val($('#bilName').val());
$('#shipAddress').val($('#bilAddress').val());
$('#shipCity').val($('#bilCity').val());
$('#shipState').val($('#bilState').val());
$('#shipZip').val($('#bilZip').val());
$('#shipName').attr('readonly', true);
$('#shipAddress').attr('readonly', true);
$('#shipCity').attr('readonly', true);
$('#shipState').attr('readonly', true);
$('#shipZip').attr('readonly', true);
}
else{
$('#shipName').val("");
$('#shipAddress').val("");
$('#shipCity').val("");
$('#shipState').val("");
$('#shipZip').val("");
$('#shipName').attr('readonly', false);
$('#shipAddress').attr('readonly', false);
$('#shipCity').attr('readonly', false);
$('#shipState').attr('readonly', false);
$('#shipZip').attr('readonly', false);
}
});
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td colspan="2">Billing Address</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" id="bilName" /> </td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" id="bilAddress" /> </td>
</tr>
<tr>
<td>City</td>
<td>
<input type="text" id="bilCity" /> </td>
</tr>
<tr>
<td>State</td>
<td>
<input type="text" id="bilState" /> </td>
</tr>
<tr>
<td>Zip</td>
<td>
<input type="text" id="bilZip" /> </td>
</tr>
<tr>
<td>Shipping address is the same as billing</td>
<td>
<input type="checkbox" id="checkSame"</td>
</tr>
<tr>
<td colspan="2">Shipping Address</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" id="shipName" /> </td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" id="shipAddress" /> </td>
</tr>
<tr>
<td>City</td>
<td>
<input type="text" id="shipCity" /> </td>
</tr>
<tr>
<td>State</td>
<td>
<input type="text" id="shipState" /> </td>
</tr>
<tr>
<td>Zip</td>
<td>
<input type="text" id="shipZip" /> </td>
</tr>
</tbody>
</table>
</body>
</html>
Notes :
by using the val() method we can get or set the value of any html element so we are setting with the help of val()
for readOnly we are adding the readOnly attribute the element using attr function
#Id is the selector for seleting any element
$(#id).change() means if elment with that id is changed than this function get invoked
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.