Stationery Order Form - Order Your Stationery Online

<script>
const orderBtn = document.getElementById('orderBtn');
const confirmBtn = document.getElementById('confirmBtn');
const cancelBtn = document.getElementById('cancelBtn');
const firstNameInput = document.getElementById('firstName');
const familyNameInput = document.getElementById('familyName');
const cnRadio = document.querySelector('input[value="cn"]');
const wnRadio = document.querySelector('input[value="wn"]');
const titleRadios = document.getElementsByName('titles');
const otherChk = document.getElementById('otherChk');
const otherTitleInput = document.getElementById('otherTitle');
const stationeryCheckboxes = document.getElementsByName('orders');
const printTitle = document.getElementById('printTitle');
const printOrder = document.getElementById('printOrder');
const errorMsg = document.getElementById('msg');

function printErrorMsg(msg) {
  errorMsg.innerHTML = msg;
  errorMsg.style.color = 'red';
}

function clearErrorMsg() {
  errorMsg.innerHTML = '';
}

function validateName() {
  if (!firstNameInput.value || !familyNameInput.value) {
    printErrorMsg('Please enter all your names');
    return false;
  }
  return true;
}

function getFullName() {
  if (cnRadio.checked) {
    return `${familyNameInput.value} ${firstNameInput.value}`;
  }
  return `${firstNameInput.value} ${familyNameInput.value}`;
}

function getTitle() {
  for (let i = 0; i < titleRadios.length; i++) {
    if (titleRadios[i].checked) {
      return titleRadios[i].value;
    }
  }
  if (otherChk.checked) {
    return otherTitleInput.value || '';
  }
  return '';
}

function validateTitle() {
  if (!getTitle()) {
    printErrorMsg('Select a title or click the check box');
    return false;
  }
  return true;
}

function getSelectedStationery() {
  const selectedItems = [];
  for (let i = 0; i < stationeryCheckboxes.length; i++) {
    if (stationeryCheckboxes[i].checked) {
      selectedItems.push(stationeryCheckboxes[i].value);
    }
  }
  return selectedItems;
}

function validateStationery() {
  if (!getSelectedStationery().length) {
    printErrorMsg('Click at least one check box');
    return false;
  }
  return true;
}

function printOrderSummary() {
  const fullName = getFullName();
  const title = getTitle();
  const selectedItems = getSelectedStationery();

  let orderSummary = `<p>${title} ${fullName} ordered:</p><ol>`;
  for(let i = 0; i < selectedItems.length; i++) {
    orderSummary += `<li>${selectedItems[i]}</li>`;
  }
  orderSummary += '</ol>';
  printTitle.innerHTML = 'Order Summary:';
  printOrder.innerHTML = orderSummary;
}

function disableConfirmBtn() {
  confirmBtn.disabled = true;
}

function enableConfirmBtn() {
  confirmBtn.disabled = false;
}

orderBtn.addEventListener('click', () => {
  clearErrorMsg();
  if (validateName() && validateTitle() && validateStationery()) {
    printOrderSummary();
    enableConfirmBtn();
  }
});

confirmBtn.addEventListener('click', () => {
  alert(`We are sending your order now, ${firstNameInput.value}!`);
});

cancelBtn.addEventListener('click', () => {
  printTitle.innerHTML = '';
  printOrder.innerHTML = '';
  disableConfirmBtn();
});

</script>