Submit Button not Working

Jenna_Ethridge · April 19, 2025, 4:22pm

Hi,

I realize it’s a lot but there is some madness behind it, and I’m not sure if the explanation will help or not. I run a home bakery and for instance if you were my potential customer, you might want to order cookies and cakepops. So you would checkmark those boxes and the quantity and first flavor would appear. This is because you can only order one flavor per dozen. I can’t have someone ordering 1 dozen cake pops and requesting 3 flavors. I lose money at that point. So when you choose 2 for the quantity the 2nd flavor box appears. But lets imagine you decide you no longer want cake pops and you now want truffles. So when you uncheck cake pops, those boxes need to disappear and you now check truffles and choose your quantity and flavor.

I used to have a simple form for requesting a quote, but I realized that I spent more time going back and forth with the customer and so even though the form asks a lot of questions, it does help minimize that back and forth.

I am all for learning and condensing down the code and getting it to work properly. I code with other programs but this variation of code is brand new for me and I was doing the best I could lol. I’m not sure if this will change your response above or not. Please let me know

CODE-NINJA · April 19, 2025, 7:20pm

I think you are trying to generate something like …

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Bakery Order Form</title>
  <!-- Font Awesome CSS + JS -->
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    integrity="sha512-pY1K2h2Nn6Z4x+Rkpz/NbxB6sZ2vC2M6/JXjhe2ls5g3l1D1K3c+0nXgvSvoUJbC4qG4f9b9pTy3vRcUuOxE2w=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  />
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
  <style>
     :root {
  --bg: #f4f4f9;
  --panel: #ffffff;
  --primary: #ff6f61;
  --primary-dark: #e65c50;
  --muted: #666;
  --border: #ddd;
  --gap: 14px;
  --radius: 10px;
  --transition: 0.3s ease;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  background: var(--bg);
  font-family: 'Segoe UI', sans-serif;
  color: var(--muted);
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
}

/* LEFT */
.left {
  flex: 0 0 12%;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--gap);
  overflow-y: auto;
  transition: all var(--transition);
}

.category {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.category:hover {
  background: #f9f9f9;
  transform: translateX(4px);
}

.left input {
  transform: scale(1.2);
  margin-right: 8px;
  accent-color: var(--primary);
}

.left label {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  cursor: pointer;
  flex-grow: 1;
}

.left label i {
  font-size: 1.2rem;
  margin-right: 10px;
  color: var(--primary);
}

.left input:checked + label {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 6px 10px;
  font-weight: bold;
  box-shadow: var(--shadow);
}

/* MIDDLE */
.middle {
  flex: 1;
  padding: var(--gap);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  background: #fff0ee;
  overflow-y: auto;
  transition: all var(--transition);
}

.middle h2 {
  width: 100%;
  text-align: center;
  margin-bottom: var(--gap);
  color: #333;
  font-size: 1.3rem;
}

.form-box {
    background: #ff6f6170;
    border-radius: var(--radius);
    padding: var(--gap);
    flex: 0 0 30%;
    max-width: 30%;
    height: auto;
    display: flex
;
    flex-direction: column;
    gap: var(--gap);
    box-shadow: var(--shadow);
    transition: all var(--transition);
    max-height: 25%;
}

.form-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.form-box h4 {
  text-align: center;
  font-size: 1.1rem;
  color: #333;
}

.tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.tile {
  background: #f9f9f9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.85rem;
  transition: all var(--transition);
}

.tile:hover {
  background: #f0f0f0;
}

.tile.selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.tile i {
  font-size: 1.3rem;
  color: var(--muted);
}

.form-box button {
  margin-top: auto;
  background: var(--primary);
  border: none;
  color: #fff;
  padding: 10px;
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition);
}

.form-box button:hover {
  background: var(--primary-dark);
}

.right {
  flex: 0 0 22%;
  background: var(--panel);
  border-left: 1px solid #e0e0e0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  box-shadow: -3px 0 6px rgba(0, 0, 0, 0.03);
}

.right h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #333;
  text-align: center;
}

.order-item {
  background: #fff;
  border: 1px solid #e5e5e5;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.order-item span {
  font-size: 0.95rem;
  color: #444;
}

.order-item button {
  align-self: flex-end;
  background: #f44336;
  border: none;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
}

.order-item button:hover {
  background: #d32f2f;
}



#summary {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
  max-height: 70vh;
}
/* RESPONSIVE */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .left,
  .right {
    flex: none;
    width: 100%;
    border: none;
  }
  .middle {
    padding: var(--gap);
    gap: var(--gap);
  }
  .form-box {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
}

  </style>
</head>
<body>

  <div class="container">
    <!-- LEFT -->
    <div class="left" id="categories">
      <div class="category">
        <input type="checkbox" id="brownies">
        <label for="brownies"><i class="fas fa-cookie-bite"></i> Brownies</label>
      </div>
      <div class="category">
        <input type="checkbox" id="cakepops">
        <label for="cakepops"><i class="fas fa-birthday-cake"></i> Cakepops</label>
      </div>
      <div class="category">
        <input type="checkbox" id="cookies">
        <label for="cookies"><i class="fas fa-cookie"></i> Cookies</label>
      </div>
      <div class="category">
        <input type="checkbox" id="truffles">
        <label for="truffles"><i class="fas fa-candy-cane"></i> Truffles</label>
      </div>
      <div class="category">
        <input type="checkbox" id="cupcakes">
        <label for="cupcakes"><i class="fas fa-birthday-cake"></i> Cupcakes</label>
      </div>
      <div class="category">
        <input type="checkbox" id="muffins">
        <label for="muffins"><i class="fas fa-coffee"></i> Muffins</label>
      </div>
      <div class="category">
        <input type="checkbox" id="bars">
        <label for="bars"><i class="fas fa-th-large"></i> Bars</label>
      </div>
      <div class="category">
        <input type="checkbox" id="cakes">
        <label for="cakes"><i class="fas fa-cake"></i> Cakes</label>
      </div>
      <div class="category">
        <input type="checkbox" id="macarons">
        <label for="macarons"><i class="fas fa-egg"></i> Macarons</label>
      </div>
      <div class="category">
        <input type="checkbox" id="pies">
        <label for="pies"><i class="fas fa-pie"></i> Pies</label>
      </div>
    </div>

    <!-- MIDDLE -->
    <div class="middle" id="subcategories">
      <h2>Select Options</h2>
    </div>

    <!-- RIGHT -->
    <div class="right">
      <h3>Order Summary</h3>
      <div id="summary"></div>
    </div>
  </div>

  <script>
    const OPTIONS = {
      brownies: {
        label:'Brownies',
        types:['Classic','Deluxe','Stuffed'],
        flavors:['Chocolate','Vanilla','Strawberry'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs','2 doz','3 doz']
      },
      cakepops: {
        label:'Cakepops',
        types:['Mini','Standard'],
        flavors:['Chocolate','Vanilla','Red Velvet'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs','2 doz']
      },
      cookies: {
        label:'Cookies',
        types:['Soft','Crunchy'],
        flavors:['Choc Chip','Oatmeal','Sugar'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs']
      },
      truffles: {
        label:'Truffles',
        types:['Dark','Milk'],
        flavors:['Raspberry','Mint','Orange'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs']
      },
      cupcakes: {
        label:'Cupcakes',
        types:['Vanilla','Chocolate','Red Velvet'],
        flavors:['Buttercream','Cream Cheese'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs']
      },
      muffins: {
        label:'Muffins',
        types:['Blueberry','Banana Nut','Choc Chip'],
        flavors:['—'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs']
      },
      bars: {
        label:'Bars',
        types:['Lemon','Brownie','Blondie'],
        flavors:['Raspberry','Coconut','Pecan'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs']
      },
      cakes: {
        label:'Cakes',
        types:['Sheet','Round','Tiered'],
        flavors:['Chocolate','Vanilla','Funfetti'],
        quantities:['1 cake','2 cakes']
      },
      macarons: {
        label:'Macarons',
        types:['Classic'],
        flavors:['Raspberry','Pistachio','Coffee'],
        quantities:['1 pc','2 pcs','12 pcs']
      },
      pies: {
        label:'Pies',
        types:['Mini','Standard'],
        flavors:['Apple','Cherry','Pumpkin'],
        quantities:['1 pie','2 pies']
      }
    };

    document.querySelectorAll('.left input').forEach(cb => {
      cb.addEventListener('change', () => {
        const id = cb.id;
        document.getElementById(id + '-form')?.remove();
        if (!cb.checked) return;

        const opt = OPTIONS[id];
        const box = document.createElement('div');
        box.className = 'form-box';
        box.id = id + '-form';
        box.innerHTML = `<h4>${opt.label} Options</h4>`;

        ['types','flavors','quantities'].forEach(key => {
          const grid = document.createElement('div');
          grid.className = 'tiles-grid';
          opt[key].forEach(val => {
            const tile = document.createElement('div');
            tile.className = 'tile';
            tile.dataset.val = val;
            if (key !== 'quantities') {
              const icon = document.createElement('i');
              icon.className = 'fas fa-utensils';
              tile.appendChild(icon);
            }
            const txt = document.createElement('div');
            txt.textContent = val;
            tile.appendChild(txt);
            tile.addEventListener('click', () => {
              grid.querySelectorAll('.tile').forEach(t => t.classList.remove('selected'));
              tile.classList.add('selected');
            });
            grid.appendChild(tile);
          });
          box.appendChild(grid);
        });

        const btn = document.createElement('button');
        btn.textContent = 'Add to Order';
        btn.addEventListener('click', () => {
          const sel = {}, keys = ['types','flavors','quantities'];
          if (!keys.every((k,i) => {
            const s = box.querySelectorAll('.tiles-grid')[i].querySelector('.tile.selected');
            if (!s) return false;
            sel[k] = s.dataset.val;
            return true;
          })) {
            return alert('Please select one of each.');
          }
          const itemDiv = document.createElement('div');
          itemDiv.className = 'order-item';
          itemDiv.innerHTML = `
            <span>${opt.label}: ${sel.types}, ${sel.flavors}, ${sel.quantities}</span>
            <button onclick="this.parentElement.remove()">Remove</button>
          `;
          document.getElementById('summary').appendChild(itemDiv);
          cb.checked = false;
          box.remove();
        });
        box.appendChild(btn);
        document.getElementById('subcategories').appendChild(box);
      });
    });
  </script>
</body>
</html>

And it will look like…

Your data will look like…

const OPTIONS = {
      brownies: {
        label:'Brownies',
        types:['Classic','Deluxe','Stuffed'],
        flavors:['Chocolate','Vanilla','Strawberry'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs','2 doz','3 doz']
      },
      cakepops: {
        label:'Cakepops',
        types:['Mini','Standard'],
        flavors:['Chocolate','Vanilla','Red Velvet'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs','2 doz','3 doz']
      },
      cookies: {
        label:'Cookies',
        types:['Soft','Crunchy'],
        flavors:['Choc Chip','Oatmeal','Sugar'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs','2 doz','3 doz']
      },
      truffles: {
        label:'Truffles',
        types:['Dark','Milk'],
        flavors:['Raspberry','Mint','Orange'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs','2 doz','3 doz']
      },
      cupcakes: {
        label:'Cupcakes',
        types:['Vanilla','Chocolate','Red Velvet'],
        flavors:['Buttercream','Cream Cheese'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs','2 doz','3 doz']
      },
      muffins: {
        label:'Muffins',
        types:['Blueberry','Banana Nut','Choc Chip'],
        flavors:['—'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs','2 doz','3 doz']
      },
      bars: {
        label:'Bars',
        types:['Lemon','Brownie','Blondie'],
        flavors:['Raspberry','Coconut','Pecan'],
        quantities:['1 pc','2 pcs','6 pcs','12 pcs','2 doz','3 doz']
      },
      cakes: {
        label:'Cakes',
        types:['Sheet','Round','Tiered'],
        flavors:['Chocolate','Vanilla','Funfetti'],
        quantities:['1 cake','2 cakes']
      },
      macarons: {
        label:'Macarons',
        types:['Classic'],
        flavors:['Raspberry','Pistachio','Coffee'],
        quantities:['1 pc','2 pcs','12 pcs']
      },
      pies: {
        label:'Pies',
        types:['Mini','Standard'],
        flavors:['Apple','Cherry','Pumpkin'],
        quantities:['1 pie','2 pies']
      }
    };

What you will need to get such setup to work?

You will need to add a → HTML-COMPONENT to your page.
You will need to paste the shown code into your HTML-Component.
You will need to save the HTML-Component and publish website.
—> now you already should be able to test the setup <—

Further steps would be to …
4) Generate a connection by code between HTML-Component and your wix-page → this way you would be able to send date to HTML-Comp. and also recieving back response-data (summerized orders).

How the data which would be sent back and forth is already shown above.

That means it would work like the following…

On your page the user would see the setup inside the HTML-Comp.
On-Load of page the html-comp. would be filled with the data from your database (dataset).
User now is capable to do his choices.
Once some options have been selected there should be a submit button inside the summary → once clicked it → data with the choosen items would be sent back to your Wix-page includeing only the choosen items.
Now since you have the data on your wix-site → now you can do what ever you want with it! For example…
a) pulling it into your database
b) do other things with it…

Of course this was just an EXAMPLE-SETUP and can be improved much more.

On the very left side you have all your PRODUCTS.
In the middle column you have the options for each selected PRODUCT.
Once user made his choices and ordered it → it will be listed on the very right sidebar.
Items can of course also be removed again.

There is still a lot of space for improvements, but this setup already will show you how it could look like.

All that can also be done by Wix own elements, but not as accurate as shown in my example (at least it would take you a way more time to get such results by using wix elements), but doable.

So now you have already 2-possible ways of how to generate your wished SETUP !

By the way, did you try out my provided code already?

// Product configuration map------------------------------
const productConfig = {
  brownies: {
    label: "Brownies",
    quantityDropdown: '#dropdown1',
    flavorDropdowns: ['#dropdown21', '#dropdown28'],
  },
  cakepops: {
    label: "CakePops",
    quantityDropdown: '#dropdown9',
    flavorDropdowns: ['#dropdown22', '#dropdown29'],
  },
  cookiesCustom: {
    label: "Cookies - Custom",
    quantityDropdown: '#dropdown11',
    flavorDropdowns: ['#dropdown23', '#dropdown30'],
  },
  cookiesBakery: {
    label: "Cookies - Bakery",
    quantityDropdown: '#dropdown13',
    flavorDropdowns: ['#dropdown24', '#dropdown31'],
  },
  macarons: {
    label: "Macarons",
    quantityDropdown: '#dropdown17',
    flavorDropdowns: ['#dropdown26', '#dropdown33'],
  },
  truffles: {
    label: "Truffles",
    quantityDropdown: '#dropdown19',
    flavorDropdowns: ['#dropdown27', '#dropdown34'],
  },
  cupcakes: {
    label: "Cupcakes",
    quantityDropdown: '#dropdown15',
    flavorDropdowns: ['#dropdown25', '#dropdown32'],
    extraFlavorDropdowns: ['#dropdown42', '#dropdown36', '#dropdown39', '#dropdown43', '#dropdown37', '#dropdown40']
  },
  cake: {
    label: "Cake",
    quantityDropdown: '#dropdown45',
    flavorDropdowns: ['#dropdown60', '#dropdown61'],
    extraFlavorDropdowns: ['#dropdown47', '#dropdown50', '#dropdown53', '#dropdown56', '#dropdown48', '#dropdown51', '#dropdown54', '#dropdown57']
  }
};


//Main-CODE---------------------------
$w.onReady(function () {
  // Hide all dropdowns initially
  hideAllDropdownBoxes();

  // Handle checkbox selection changes
  $w('#checkboxGroup1').onChange(() => {
    console.log("Checkbox values:", $w('#checkboxGroup1').value);
    updateProductBoxes();
  });

  // Automatically update visibility based on pre-checked options
  updateProductBoxes();

  // Listen to quantity dropdown changes for all products
  Object.keys(productConfig).forEach(product => {
    const dropdownId = productConfig[product].quantityDropdown;
    $w(dropdownId).onChange(() => updateFlavorBoxes(product));
  });
});


// FUNCTIONS and more------------------------------------
function updateProductBoxes() {// Update which product boxes to show/hide
  const selectedValues = $w('#checkboxGroup1').value || [];
  Object.entries(productConfig).forEach(([key, config]) => {
    if (selectedValues.includes(config.label)) {
      showProductBoxes(key);
      updateFlavorBoxes(key);
    } else {hideProductBoxes(key);}
  });
}

// Show boxes for selected product
function showProductBoxes(product) {
  const config = productConfig[product];
  $w(config.quantityDropdown).show();
  // Show any extra fields
  if (product === 'cupcakes') {
    $w('#dropdown16').show();
    $w('#dropdown41').show();
    $w('#dropdown35').show();
    $w('#dropdown38').show();
  }
  if (product === 'cake') {
    $w('#dropdown59').show();
    $w('#dropdown58').show();
    $w('#dropdown46').show();
    $w('#dropdown49').show();
    $w('#dropdown52').show();
    $w('#dropdown55').show();
  }
}

// Hide boxes for unselected product
function hideProductBoxes(product) {
  const config = productConfig[product];
  $w(config.quantityDropdown).hide();
  config.flavorDropdowns.forEach(id => $w(id).hide());
  if (config.extraFlavorDropdowns) {config.extraFlavorDropdowns.forEach(id => $w(id).hide());}
  if (product === 'cupcakes') {['#dropdown16', '#dropdown41', '#dropdown35', '#dropdown38'].forEach(id => $w(id).hide());}
  if (product === 'cake') {['#dropdown59', '#dropdown58', '#dropdown46', '#dropdown49', '#dropdown52', '#dropdown55'].forEach(id => $w(id).hide());}
}
// Hide everything on page load
function hideAllDropdownBoxes() {Object.keys(productConfig).forEach(hideProductBoxes);}
// Show flavor dropdowns based on quantity
function updateFlavorBoxes(product) {
  const config = productConfig[product];
  const quantity = parseInt($w(config.quantityDropdown).value || "0");
  // Hide all flavor boxes first
  config.flavorDropdowns.forEach(id => $w(id).hide());
  if (config.extraFlavorDropdowns) {config.extraFlavorDropdowns.forEach(id => $w(id).hide());}
  // Logic for cupcakes and cake (special case)
  if (product === 'cupcakes') {
    if (quantity >= 2) {$w(config.flavorDropdowns[0]).show(); config.extraFlavorDropdowns.slice(0, 3).forEach(id => $w(id).show());}
    if (quantity >= 3) { $w(config.flavorDropdowns[1]).show(); config.extraFlavorDropdowns.forEach(id => $w(id).show());}
  } else if (product === 'cake') {if (quantity >= 2) {$w(config.flavorDropdowns[0]).show();  config.extraFlavorDropdowns.slice(0, 4).forEach(id => $w(id).show());}
    if (quantity >= 3) {$w(config.flavorDropdowns[1]).show(); config.extraFlavorDropdowns.forEach(id => $w(id).show());}
  } else {// Normal product logic
    if (quantity === 2) {$w(config.flavorDropdowns[0]).show();}
    if (quantity >= 3) {
      $w(config.flavorDropdowns[0]).show();
      $w(config.flavorDropdowns[1]).show();
    }
  }
}

Did it work? Since i do not have the setup for testing, it’s on you to do the testings.
If the code do not work, what’s exactly the issue? We need improvements.
Did you already corrected all your IDs giving them correpsonding plausible IDs (names), like already described in my last post?

Good luck and have fun.

Topic		Replies	Views
Submit Button not working on published site Ask the community code , question	6	552	October 6, 2020
Submit button is not working Ask the community code , question	1	153	January 15, 2020
Code instead of Submit Button? Ask the community code , question	0	176	February 26, 2019
Submit Button Bug Ask the community code , question	10	281	August 20, 2017
Submit Button not working in live database Ask the community code , question	4	168	March 18, 2022

Submit Button not Working

Related topics