Question: Index.Html: Delivery - Part B Delivery Please fix the indicated problems and then resubmit your form. Billing Address First name: Last name: Street Address: Gender:
Index.Html:
Delivery
Please fix the indicated problems and then resubmit your form.
/*
Filename: script.js
*/
"use strict"
/* removing default values for gender and year select lists */
function removeSelectDefaults()
{
var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++)
{
selects[i].selectedIndex = -1;
}
}
/* Copying values from billing to shipping fields */
function copyBillingAddress()
{
if (document.getElementById("sameAddr").checked) {
var billingInputs = document.querySelectorAll("#billingAddress input[type=text], #billingAddress input[type=tel], #billingAddress input[type=email], #billingAddress input[type=number]");
var shippingInputs = document.querySelectorAll("#shippingAddress input[type=text], #shippingAddress input[type=tel], #shippingAddress input[type=email], #shippingAddress input[type=number]");
for (var i = 0; i < billingInputs.length; i++) {
shippingInputs[i].value = billingInputs[i].value;
}
}
}
/* Validates addresses fieldsets */
function validateAddresses(fieldsetId)
{
var inputs = document.querySelectorAll("#" + fieldsetId + " input[type=text], #" + fieldsetId + " input[type=tel], #" + fieldsetId + " input[type=email], #" + fieldsetId + " input[type=number]");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].hasAttribute("required") && inputs[i].value.trim() === "") {
inputs[i].setCustomValidity("Please fill out this field.");
} else {
inputs[i].setCustomValidity("");
}
}
}
/* Validating form */
function validateForm()
{
validateAddresses("billingAddress");
validateAddresses("shippingAddress");
if (document.getElementsByTagName("form")[0].checkValidity()) {
document.getElementById("errorMessage").style.display = "none";
} else {
document.getElementById("errorMessage").style.display = "block";
}
}
/* Resets the page */
function resetPage()
{
location.reload();
}
/* Adds event listeners */
function createEventListeners()
{
document.getElementById("submitBtn").addEventListener("click", validateForm);
document.getElementById("sameAddr").addEventListener("click", copyBillingAddress);
document.getElementById("resetBtn").addEventListener("click", resetPage);
}
/* Runs initial form configuration functions */
function setUpPage()
{
removeSelectDefaults();
createEventListeners();
}
/* Runs setup function when page finishes loading */
window.addEventListener("load", setUpPage);
Question: Requirements: 1. Add to the JavaScript file a function to copy data from one field to another based on the checkbox Same as Billing Address, that indicates the respective fields should have the same value in the Shipping Address as in the Billing Address.
2. Create custom validations feedback using the Constraint Validation API for each field that is required: a. Use setCustomValidity() when the value of the field is missing. (5 marks) b. In the CSS, use :invalid and :valid pseudo-classes for each input and select elements.
3. Remove default values from select elements by using JavaScript to set the selected Index property to -1 (selectedIndex = -1).
4. Add a placeholder to each field to increase the content accuracy.
The values in the billing address doesn't get copied to the shipping after I Tick the checkbox.
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
Study Help