Simulate form submission and display status

by velo_ninja

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Quote Form Preview</title>
  <style>
    .hidden { display: none; }
  </style>
</head>
<body>

<h2>Request a Quote</h2>
<input id="nameInput" placeholder="Full Name"><br>
<input id="emailInput" placeholder="Email"><br>
<textarea id="notesInput" placeholder="Notes"></textarea><br>

<label><input type="checkbox" class="productCheck" value="Cupcakes"> Cupcakes</label><br>
<label><input type="checkbox" class="productCheck" value="CakePops"> CakePops</label><br>

<div id="cupcakesSection" class="hidden">
  <select id="cupcakeQty">
    <option value="1">1 dozen</option>
    <option value="2">2 dozen</option>
    <option value="3">3 dozen</option>
  </select>
  <select id="cupcakeFlavor1" class="hidden">
    <option>Vanilla</option>
    <option>Chocolate</option>
  </select>
  <select id="cupcakeFlavor2" class="hidden">
    <option>Strawberry</option>
    <option>Cookies & Cream</option>
  </select>
</div>

<div id="cakepopsSection" class="hidden">
  <select id="cakepopsQty">
    <option value="1">1 dozen</option>
    <option value="2">2 dozen</option>
  </select>
</div>

<button id="submitBtn">Submit</button>
<p id="statusMsg"></p>

<script>
document.querySelectorAll('.productCheck').forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    document.getElementById('cupcakesSection').classList.toggle('hidden', !document.querySelector('input[value="Cupcakes"]').checked);
    document.getElementById('cakepopsSection').classList.toggle('hidden', !document.querySelector('input[value="CakePops"]').checked);
  });
});

document.getElementById('cupcakeQty').addEventListener('change', (e) => {
  const qty = parseInt(e.target.value);
  document.getElementById('cupcakeFlavor1').classList.toggle('hidden', qty < 2);
  document.getElementById('cupcakeFlavor2').classList.toggle('hidden', qty < 3);
});

document.getElementById('submitBtn').addEventListener('click', () => {
  document.getElementById('statusMsg').textContent =...