Stationery Order Form - Place Your Order Online - 常规

<html>
<head>
<style>
body{margin:0px;}
#orderForm, #confirmForm{postion:absolute; width:280px; height:440px; margin:5px; display:inline-block; padding:5px;}
#orderForm{background-color:#abc; display:inline-block;}
#confirmForm{position:absolute; background-color:#def; }
#bttn{position:absolute; bottom:15px;}
#msg{color:F23; font-weight:bold;}
</style>
</head>
<body>
<div id="orderForm">
<h3>Stationery Order</h3>
<h5>Please complete the form</h5>
<p><input type="text" id="firstName"  placeholder="Enter Your First Name" /></p>
<p><input type="text" id="familyName" placeholder="Enter Your Famiy Name" /></p>
<p>Select Title</p>
<input type="radio" name="citizen" value="cn" checked />Chinese Style
<input type="radio" name="citizen" value="wn" />Western Style
<p>
<input type="radio" name="titles" value="Prof." id="Prof" />Prof.
<input type="radio" name="titles" value="Dr."   id="Dr" />Dr.
<input type="radio" name="titles" value="Mr."   id="Mr" />Mr.
<input type="radio" name="titles" value="Ms."   id="Ms" />Ms.</p>
<p><input type="checkbox" id="otherChk" name="other" />other
<input type="text" id="otherTitle" placeholder="Enter Your Title" />
<br><br>
<input type="checkbox" id="pen" 	name="orders" value="Pen" />Pen
<input type="checkbox" id="ruler" 	name="orders" value="Ruler" />Ruler<br>
<input type="checkbox" id="notepad" name="orders" value="Notepad" />Notepad
<input type="checkbox" id="clips" 	name="orders" value="Paper Clips" />Paper Clips<br>
<input type="checkbox" id="stapler" name="orders" value="Stapler" />Stapler
<input type="checkbox" id="paper" 	name="orders" value="Paper(A4" />Paper(A4)</p>
<p><button id="orderBtn">Order</button></p>
<p id="msg"></p>
</div ><!-- id="orderForm" -->
<div id="confirmForm">
<div id="printTitle"></div>
<div id="printOrder"></div>
<p id ="bttn"> 
<button id="confirmBtn" >Confirm Order</button>
<button id="cancelBtn" >Cancel Order</button></p>
</div ><!-- id="confirmForm" -->
<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() {
  if (otherChk.checked) {
    return otherTitleInput.value || '';
  }
  return '';
}

function validateTitle() {
  if (!getTitle()) {
    printErrorMsg('Enter your 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();
    for (let i = 0; i < titleRadios.length; i++) {
      titleRadios[i].disabled = true;
    }
  }
});

otherChk.addEventListener('change', () => {
  if (otherChk.checked) {
    for (let i = 0; i < titleRadios.length; i++) {
      titleRadios[i].disabled = true;
      titleRadios[i].checked = false;
    }
    otherTitleInput.disabled = false;
  } else {
    for (let i = 0; i < titleRadios.length; i++) {
      titleRadios[i].disabled = false;
    }
    otherTitleInput.disabled = true;
  }
});

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

cancelBtn.addEventListener('click', () => {
  printTitle.innerHTML = '';
  printOrder.innerHTML = '';
  disableConfirmBtn();
  for (let i = 0; i < titleRadios.length; i++) {
    titleRadios[i].disabled = false;
  }
  otherTitleInput.disabled = true;
});

</script>
</body>
</html>