# Submit Button not Working

**URL:** <https://forum.wixstudio.com/t/submit-button-not-working/69033>\
**Category:** Ask the community\
**Tags:** question, design, code\
**Created:** [February 24, 2025, 3:26am UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033 "2025-02-24T03:26:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jenna\_Ethridge](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jenna_ethridge/32/105789_2.png) [@Jenna\_Ethridge](https://forum.wixstudio.com/u/Jenna_Ethridge)\
**Post date:** [February 24, 2025, 3:26am UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/1 "2025-02-24T03:26:30Z")

</div>

I am having a lot of trouble with my “Submit” Button. I have a pretty complex request a quote form, for my customers. Apparently I found out today I’m using an old form vs the new form. I have tried creating a new form and just hate it. Not being able to customize and format things to match my site is super frustrating. I’ve put a lot of work into the request a quote form and I’d like to get it fully working if possible.

My submit button is connected to a data set, it’s set to write only, but nothing happens when I hit the submit button.

Due to the complexity of my form, everything was written with dev mode/code and it works beautifully except this button lol.

My site/page is: [https://www.sgalcreations.com/request-a-quote](https://www.sgalcreations.com/request-a-quote)

Appreciate any and all help.

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [February 24, 2025, 3:39am UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/2 "2025-02-24T03:39:26Z")

</div>

what is the code for the submit button ? maybe share the code (using the \</\> preformatted text icon ) and someone will be able to shed light on why its not working.

---

<div class="post-metadata">

**Author:** ![Jenna\_Ethridge](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jenna_ethridge/32/105789_2.png) [@Jenna\_Ethridge](https://forum.wixstudio.com/u/Jenna_Ethridge)\
**Post date:** [February 24, 2025, 5:52pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/3 "2025-02-24T17:52:04Z")

</div>

Hi Dan, I’m so sorry I should have explained that part. I did not do any code for the submit button itself. Just for the boxes within the quote form. The button I just added and then linked it to the dataset, followed all of the steps that I could find.

I’ve been wondering if I need to do code for the button due to my other code for the quote form. If I need to supply the code behind my form I can do that, just let me know.

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [February 24, 2025, 9:30pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/4 "2025-02-24T21:30:01Z")

</div>

I have found that if you have code for some data to save to a cms then you will need to code the submit button also.

---

<div class="post-metadata">

**Author:** ![Jenna\_Ethridge](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jenna_ethridge/32/105789_2.png) [@Jenna\_Ethridge](https://forum.wixstudio.com/u/Jenna_Ethridge)\
**Post date:** [February 25, 2025, 4:18pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/5 "2025-02-25T16:18:37Z")

</div>

Dan would you be able to help me with that? I’m not even sure where to start to incorporate that. I will do some more research on that this evening when I get home, but if you have any suggestions for a starting place that would be amazing.

---

<div class="post-metadata">

**Author:** ![Pratham](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/pratham/32/119586_2.png) [@Pratham](https://forum.wixstudio.com/u/Pratham)\
**Post date:** [February 25, 2025, 10:52pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/7 "2025-02-25T22:52:47Z")

</div>

@user5249 Whoops!

# **NEVER POST YOUR API KEY OR ANY IMPORTANT CREDENTIALS ON A PUBLIC FORUM!**

* * *

Take off this image NOW to or hide the API key and always remember to hide any confidential info when showing your code.

I would recommend resetting and generating a new API key right away to prevent account abuse.

Also, it is recommended **NOT** to hardcode any API Keys in your code, especially in the frontend, as this can still be visible to users in your site’s code files. Hence I’d recommend using the **Secrets Manager** for storing and retrieving your API Keys securely via code.

> **[About the Secrets Manager](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/secrets-manager/about-the-secrets-manager)**
>
> The Secrets Manager allows you to securely store and manage secrets. A secret is any piece of sensitive information used in your site's code, such as API keys, OAuth tokens, and environment configuration settings. Add secrets to the Secrets Manager...

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [February 25, 2025, 11:47pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/8 "2025-02-25T23:47:36Z")

</div>

@user5249 also this has nothing to do with the original post. Please create a new post for help.

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [February 25, 2025, 11:51pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/9 "2025-02-25T23:51:33Z")

</div>

@Jenna_Ethridge please paste your current code using the \</\> preformatted text icon and I can have a look.

you will need to expand on

```javascript
export async function submitButton_click(event) {
    // Validate required fields before proceeding
    if (!validateRequiredFields()) {
        return;
    }

```

---

<div class="post-metadata">

**Author:** ![user5249](https://avatars.discourse-cdn.com/v4/letter/u/eada6e/32.png) [@user5249](https://forum.wixstudio.com/u/user5249)\
**Post date:** [February 26, 2025, 6:06pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/10 "2025-02-26T18:06:22Z")

</div>

ok thank you for that I have removed the key and generated a new one many thanks

---

<div class="post-metadata">

**Author:** ![Jenna\_Ethridge](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jenna_ethridge/32/105789_2.png) [@Jenna\_Ethridge](https://forum.wixstudio.com/u/Jenna_Ethridge)\
**Post date:** [February 26, 2025, 6:28pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/11 "2025-02-26T18:28:43Z")

</div>

You’ll probably hate me for this. It’s not complicated, just super specific and long. Basically it’s set to where you can check multiple options if you were ordering. You can choose one flavor per dozen, but if you change your mind and uncheck something or change qty it hides the boxes etc. Hopefully that makes sense. Thank you for any help.

````javascript
$w.onReady(function () {
    // Initially hide all product dropdowns on page load
    hideAllDropdownBoxes();

    // Listen for changes in the checkbox group for all options
    $w('#checkboxGroup1').onChange(() => {
        console.log("Checkbox values:", $w('#checkboxGroup1').value);
        // Only show/update based on selected checkboxes
        updateProductBoxes();
    });

    // Listen for changes in the quantity fields for each option
    $w('#dropdown1').onChange(() => updateFlavorBoxes('brownies'));
    $w('#dropdown9').onChange(() => updateFlavorBoxes('cakepops'));
    $w('#dropdown11').onChange(() => updateFlavorBoxes('cookiesCustom'));
    $w('#dropdown13').onChange(() => updateFlavorBoxes('cookiesBakery'));
    $w('#dropdown17').onChange(() => updateFlavorBoxes('macarons'));
    $w('#dropdown19').onChange(() => updateFlavorBoxes('truffles'));
    $w('#dropdown15').onChange(() => updateFlavorBoxes('cupcakes'));
    $w('#dropdown45').onChange(() => updateFlavorBoxes('cake'));
});

// Check if the specific option is checked in the checkbox group
function updateProductBoxes() {
    // Show and update based on which checkboxes are checked
    if (isBrowniesChecked()) {
        showBrowniesBoxes();
        updateFlavorBoxes('brownies');
    } else {
        hideBrowniesBoxes();
    }

    if (isCakePopsChecked()) {
        showCakePopsBoxes();
        updateFlavorBoxes('cakepops');
    } else {
        hideCakePopsBoxes();
    }

    if (isCookiesCustomChecked()) {
        showCookiesCustomBoxes();
        updateFlavorBoxes('cookiesCustom');
    } else {
        hideCookiesCustomBoxes();
    }

    if (isCookiesBakeryChecked()) {
        showCookiesBakeryBoxes();
        updateFlavorBoxes('cookiesBakery');
    } else {
        hideCookiesBakeryBoxes();
    }

    if (isMacaronsChecked()) {
        showMacaronsBoxes();
        updateFlavorBoxes('macarons');
    } else {
        hideMacaronsBoxes();
    }

    if (isTrufflesChecked()) {
        showTrufflesBoxes();
        updateFlavorBoxes('truffles');
    } else {
        hideTrufflesBoxes();
    }

    if (isCupcakesChecked()) {
        showCupcakesBoxes();
        updateFlavorBoxes('cupcakes');
    } else {
        hideCupcakesBoxes();
    }

    if (isCakeChecked()) {
        showCakeBoxes();
        updateFlavorBoxes('cake');
    } else {
        hideCakeBoxes();
    }
}

// Check if a product is selected
function isBrowniesChecked() { return $w('#checkboxGroup1').value.includes("Brownies"); }
function isCakePopsChecked() { return $w('#checkboxGroup1').value.includes("CakePops"); }
function isCookiesCustomChecked() { return $w('#checkboxGroup1').value.includes("Cookies - Custom"); }
function isCookiesBakeryChecked() { return $w('#checkboxGroup1').value.includes("Cookies - Bakery"); }
function isMacaronsChecked() { return $w('#checkboxGroup1').value.includes("Macarons"); }
function isTrufflesChecked() { return $w('#checkboxGroup1').value.includes("Truffles"); }
function isCupcakesChecked() { return $w('#checkboxGroup1').value.includes("Cupcakes"); }
function isCakeChecked() { return $w('#checkboxGroup1').value.includes("Cake"); }

// Function to update the visibility of the flavor boxes based on quantity and product type
function updateFlavorBoxes(productType) {
    let quantity;
    let flavorDropdown1, flavorDropdown2;

    // Define the main flavor dropdowns for each product type
    if (productType === 'brownies') {
        quantity = parseInt($w('#dropdown1').value);
        flavorDropdown1 = '#dropdown21';
        flavorDropdown2 = '#dropdown28';
    } else if (productType === 'cakepops') {
        quantity = parseInt($w('#dropdown9').value);
        flavorDropdown1 = '#dropdown22';
        flavorDropdown2 = '#dropdown29';
    } else if (productType === 'cookiesCustom') {
        quantity = parseInt($w('#dropdown11').value);
        flavorDropdown1 = '#dropdown23';
        flavorDropdown2 = '#dropdown30';
    } else if (productType === 'cookiesBakery') {
        quantity = parseInt($w('#dropdown13').value);
        flavorDropdown1 = '#dropdown24';
        flavorDropdown2 = '#dropdown31';
    } else if (productType === 'macarons') {
        quantity = parseInt($w('#dropdown17').value);
        flavorDropdown1 = '#dropdown26';
        flavorDropdown2 = '#dropdown33';
    } else if (productType === 'truffles') {
        quantity = parseInt($w('#dropdown19').value);
        flavorDropdown1 = '#dropdown27';
        flavorDropdown2 = '#dropdown34';
    } else if (productType === 'cupcakes') {
        quantity = parseInt($w('#dropdown15').value);
        flavorDropdown1 = '#dropdown25';
        flavorDropdown2 = '#dropdown32';
    } else if (productType === 'cake') {
        quantity = parseInt($w('#dropdown45').value);
        flavorDropdown1 = '#dropdown60';
        flavorDropdown2 = '#dropdown61';
    }

    // Hide all flavor boxes initially
    $w(flavorDropdown1).hide();
    $w(flavorDropdown2).hide();

    // Handle product-specific independent quantity logic
    if (productType === 'cupcakes') {
        handleCupcakesFlavorBoxes(quantity, flavorDropdown1, flavorDropdown2);
    } else if (productType === 'cake') {
        handleCakeFlavorBoxes(quantity, flavorDropdown1, flavorDropdown2);
    } else {
        // For other products, just show the main flavor boxes based on quantity
        if (quantity === 2) {
            $w(flavorDropdown1).show();
        } else if (quantity >= 3) {
            $w(flavorDropdown1).show();
            $w(flavorDropdown2).show();
        }
    }
}

// Handle Cupcakes - independent quantity logic
function handleCupcakesFlavorBoxes(quantity, flavorDropdown1, flavorDropdown2) {
    const additionalCupcakeFlavorDropdowns = [
        '#dropdown42', '#dropdown36', '#dropdown39', '#dropdown43',
        '#dropdown37', '#dropdown40'
    ];

    // Hide additional flavor dropdowns
    additionalCupcakeFlavorDropdowns.forEach(dropdown => {
        $w(dropdown).hide();
    });

    if (quantity === 2) {
        $w(flavorDropdown1).show();
        // Show 3 additional flavor boxes for cupcakes
        additionalCupcakeFlavorDropdowns.slice(0, 3).forEach(dropdown => {
            $w(dropdown).show();
        });
    } else if (quantity >= 3) {
        $w(flavorDropdown1).show();
        $w(flavorDropdown2).show();
        // Show all additional flavor boxes for cupcakes
        additionalCupcakeFlavorDropdowns.forEach(dropdown => {
            $w(dropdown).show();
        });
    }
}

// Handle Cake - independent quantity logic
function handleCakeFlavorBoxes(quantity, flavorDropdown1, flavorDropdown2) {
    const additionalCakeFlavorDropdowns = [
        '#dropdown47', '#dropdown50', '#dropdown53', '#dropdown56',
        '#dropdown48', '#dropdown51', '#dropdown54', '#dropdown57'
    ];

    // Hide additional flavor dropdowns
    additionalCakeFlavorDropdowns.forEach(dropdown => {
        $w(dropdown).hide();
    });

    if (quantity === 2) {
        $w(flavorDropdown1).show();
        // Show 4 additional flavor boxes for cake
        additionalCakeFlavorDropdowns.slice(0, 4).forEach(dropdown => {
            $w(dropdown).show();
        });
    } else if (quantity >= 3) {
        $w(flavorDropdown1).show();
        $w(flavorDropdown2).show();
        // Show all additional flavor boxes for cake
        additionalCakeFlavorDropdowns.forEach(dropdown => {
            $w(dropdown).show();
        });
    }
}

// Function to show the appropriate boxes for each product
function showBrowniesBoxes() { $w('#dropdown1').show(); $w('#dropdown2').show(); }
function showCakePopsBoxes() { $w('#dropdown9').show(); $w('#dropdown10').show(); }
function showCookiesCustomBoxes() { $w('#dropdown11').show(); $w('#dropdown12').show(); }
function showCookiesBakeryBoxes() { $w('#dropdown13').show(); $w('#dropdown14').show(); }
function showMacaronsBoxes() { $w('#dropdown17').show(); $w('#dropdown18').show(); }
function showTrufflesBoxes() { $w('#dropdown19').show(); $w('#dropdown20').show(); }
function showCupcakesBoxes() { 
    $w('#dropdown15').show(); 
    $w('#dropdown16').show();
    $w('#dropdown41').show(); 
    $w('#dropdown35').show(); 
    $w('#dropdown38').show();
}
function showCakeBoxes() { 
    $w('#dropdown59').show(); 
    $w('#dropdown45').show(); 
    $w('#dropdown58').show(); 
    $w('#dropdown46').show();
    $w('#dropdown49').show(); 
    $w('#dropdown52').show();
    $w('#dropdown55').show();
}

// Function to hide all the dropdown boxes for each product
function hideAllDropdownBoxes() {
    hideBrowniesBoxes();
    hideCakePopsBoxes();
    hideCookiesCustomBoxes();
    hideCookiesBakeryBoxes();
    hideMacaronsBoxes();
    hideTrufflesBoxes();
    hideCupcakesBoxes();
    hideCakeBoxes();
}

function hideBrowniesBoxes() {
    $w('#dropdown1').hide();
    $w('#dropdown2').hide();
    $w('#dropdown21').hide();
    $w('#dropdown28').hide();
}

function hideCakePopsBoxes() {
    $w('#dropdown9').hide();
    $w('#dropdown10').hide();
    $w('#dropdown22').hide();
    $w('#dropdown29').hide();
}

function hideCookiesCustomBoxes() {
    $w('#dropdown11').hide();
    $w('#dropdown12').hide();
    $w('#dropdown23').hide();
    $w('#dropdown30').hide();
}

function hideCookiesBakeryBoxes() {
    $w('#dropdown13').hide();
    $w('#dropdown14').hide();
    $w('#dropdown24').hide();
    $w('#dropdown31').hide();
}

function hideMacaronsBoxes() {
    $w('#dropdown17').hide();
    $w('#dropdown18').hide();
    $w('#dropdown26').hide();
    $w('#dropdown33').hide();
}

function hideTrufflesBoxes() {
    $w('#dropdown19').hide();
    $w('#dropdown20').hide();
    $w('#dropdown27').hide();
    $w('#dropdown34').hide();
}

function hideCupcakesBoxes() {
    $w('#dropdown15').hide();
    $w('#dropdown16').hide();
    $w('#dropdown41').hide();
    $w('#dropdown35').hide();
    $w('#dropdown38').hide();
    $w('#dropdown25').hide();
    $w('#dropdown42').hide();
    $w('#dropdown36').hide();
    $w('#dropdown39').hide();
    $w('#dropdown32').hide();
    $w('#dropdown43').hide();
    $w('#dropdown37').hide();
    $w('#dropdown40').hide();
}
function hideCakeBoxes() {
    $w('#dropdown59').hide();
    $w('#dropdown45').hide();
    $w('#dropdown58').hide();
    $w('#dropdown46').hide();
    $w('#dropdown49').hide();
    $w('#dropdown52').hide();
    $w('#dropdown55').hide();
    $w('#dropdown60').hide();
    $w('#dropdown47').hide();
    $w('#dropdown50').hide();
    $w('#dropdown53').hide();
    $w('#dropdown56').hide();
    $w('#dropdown61').hide();
    $w('#dropdown48').hide();
    $w('#dropdown51').hide();
    $w('#dropdown54').hide();
    $w('#dropdown57').hide();
}```
````

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [February 26, 2025, 10:02pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/12 "2025-02-26T22:02:32Z")

</div>

I’m surprised that a submit wasnt included in this code to begin with.

you need to add to the start

```javascript
import wixData from 'wix-data';

```

then in the code add

```javascript
$w('#submitButton').onClick(() => {
        // Gather data from form fields
        const dataToSave = {
            //all the data to save added here like boxValue: $w('#element').value,
        };

```

then a save section

```javascript
wixData.insert("YourCollectionName", dataToSave)
            .then((result) => {
                console.log("Data saved successfully:", result);

```

Feel free to reach out if you get stuck.

---

<div class="post-metadata">

**Author:** ![Jenna\_Ethridge](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jenna_ethridge/32/105789_2.png) [@Jenna\_Ethridge](https://forum.wixstudio.com/u/Jenna_Ethridge)\
**Post date:** [February 27, 2025, 1:17pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/13 "2025-02-27T13:17:30Z")

</div>

Good Morning, that would probably be because I wrote it out lol, but I thought I could just use the submit button as is and didn’t realize it should be coded. I just added the submit button and linked it. I will give this a try this evening when I get home. Thank you so much.

---

<div class="post-metadata">

**Author:** ![Jenna\_Ethridge](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jenna_ethridge/32/105789_2.png) [@Jenna\_Ethridge](https://forum.wixstudio.com/u/Jenna_Ethridge)\
**Post date:** [March 8, 2025, 4:14pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/14 "2025-03-08T16:14:25Z")

</div>

Good Morning Dan, I’m sorry it took so long to get back to you on this. Been a crazy week. So i put the one part at the start. but i’m unsure where to put the other parts. Would you be able to assist me with that?

---

<div class="post-metadata">

**Author:** ![Jenna\_Ethridge](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jenna_ethridge/32/105789_2.png) [@Jenna\_Ethridge](https://forum.wixstudio.com/u/Jenna_Ethridge)\
**Post date:** [April 16, 2025, 12:25pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/15 "2025-04-16T12:25:57Z")

</div>

Good Morning Dan, I wanted to check back and see if you might be able to help me with the submit button. Still a little stuck on it. Thank you so much. Jenna

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [April 16, 2025, 12:36pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/16 "2025-04-16T12:36:08Z")

</div>

Always show your current working code.  
Anybody can see what you have changed already.  
Keep your helpers always uptodate about everything what has been already changed on your side!

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [April 16, 2025, 12:58pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/17 "2025-04-16T12:58:19Z")

</div>

As Code Ninja said, please paste all your current code. What you are trying to achieve isn’t to difficult coding but it does have a fair amount of inputs to save. That is why I just gave the important parts to control it.

---

<div class="post-metadata">

**Author:** ![Jenna\_Ethridge](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jenna_ethridge/32/105789_2.png) [@Jenna\_Ethridge](https://forum.wixstudio.com/u/Jenna_Ethridge)\
**Post date:** [April 16, 2025, 1:02pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/18 "2025-04-16T13:02:18Z")

</div>

I haven’t changed it at all from the previous code I had pasted. I started to put it in but then I was worried I was going to mess something up, so there’s nothing to update from the previous one.

---

<div class="post-metadata">

**Author:** ![Jenna\_Ethridge](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jenna_ethridge/32/105789_2.png) [@Jenna\_Ethridge](https://forum.wixstudio.com/u/Jenna_Ethridge)\
**Post date:** [April 16, 2025, 1:03pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/19 "2025-04-16T13:03:06Z")

</div>

$w.onReady(function () {  
// Initially hide all product dropdowns on page load  
hideAllDropdownBoxes();

```
// Listen for changes in the checkbox group for all options
$w('#checkboxGroup1').onChange(() => {
    console.log("Checkbox values:", $w('#checkboxGroup1').value);
    // Only show/update based on selected checkboxes
    updateProductBoxes();
});

// Listen for changes in the quantity fields for each option
$w('#dropdown1').onChange(() => updateFlavorBoxes('brownies'));
$w('#dropdown9').onChange(() => updateFlavorBoxes('cakepops'));
$w('#dropdown11').onChange(() => updateFlavorBoxes('cookiesCustom'));
$w('#dropdown13').onChange(() => updateFlavorBoxes('cookiesBakery'));
$w('#dropdown17').onChange(() => updateFlavorBoxes('macarons'));
$w('#dropdown19').onChange(() => updateFlavorBoxes('truffles'));
$w('#dropdown15').onChange(() => updateFlavorBoxes('cupcakes'));
$w('#dropdown45').onChange(() => updateFlavorBoxes('cake'));

```

});

// Check if the specific option is checked in the checkbox group  
function updateProductBoxes() {  
// Show and update based on which checkboxes are checked  
if (isBrowniesChecked()) {  
showBrowniesBoxes();  
updateFlavorBoxes(‘brownies’);  
} else {  
hideBrowniesBoxes();  
}

```
if (isCakePopsChecked()) {
    showCakePopsBoxes();
    updateFlavorBoxes('cakepops');
} else {
    hideCakePopsBoxes();
}

if (isCookiesCustomChecked()) {
    showCookiesCustomBoxes();
    updateFlavorBoxes('cookiesCustom');
} else {
    hideCookiesCustomBoxes();
}

if (isCookiesBakeryChecked()) {
    showCookiesBakeryBoxes();
    updateFlavorBoxes('cookiesBakery');
} else {
    hideCookiesBakeryBoxes();
}

if (isMacaronsChecked()) {
    showMacaronsBoxes();
    updateFlavorBoxes('macarons');
} else {
    hideMacaronsBoxes();
}

if (isTrufflesChecked()) {
    showTrufflesBoxes();
    updateFlavorBoxes('truffles');
} else {
    hideTrufflesBoxes();
}

if (isCupcakesChecked()) {
    showCupcakesBoxes();
    updateFlavorBoxes('cupcakes');
} else {
    hideCupcakesBoxes();
}

if (isCakeChecked()) {
    showCakeBoxes();
    updateFlavorBoxes('cake');
} else {
    hideCakeBoxes();
}

```

}

// Check if a product is selected  
function isBrowniesChecked() { return $w(‘#checkboxGroup1’).value.includes(“Brownies”); }  
function isCakePopsChecked() { return $w(‘#checkboxGroup1’).value.includes(“CakePops”); }  
function isCookiesCustomChecked() { return $w(‘#checkboxGroup1’).value.includes(“Cookies - Custom”); }  
function isCookiesBakeryChecked() { return $w(‘#checkboxGroup1’).value.includes(“Cookies - Bakery”); }  
function isMacaronsChecked() { return $w(‘#checkboxGroup1’).value.includes(“Macarons”); }  
function isTrufflesChecked() { return $w(‘#checkboxGroup1’).value.includes(“Truffles”); }  
function isCupcakesChecked() { return $w(‘#checkboxGroup1’).value.includes(“Cupcakes”); }  
function isCakeChecked() { return $w(‘#checkboxGroup1’).value.includes(“Cake”); }

// Function to update the visibility of the flavor boxes based on quantity and product type  
function updateFlavorBoxes(productType) {  
let quantity;  
let flavorDropdown1, flavorDropdown2;

```
// Define the main flavor dropdowns for each product type
if (productType === 'brownies') {
    quantity = parseInt($w('#dropdown1').value);
    flavorDropdown1 = '#dropdown21';
    flavorDropdown2 = '#dropdown28';
} else if (productType === 'cakepops') {
    quantity = parseInt($w('#dropdown9').value);
    flavorDropdown1 = '#dropdown22';
    flavorDropdown2 = '#dropdown29';
} else if (productType === 'cookiesCustom') {
    quantity = parseInt($w('#dropdown11').value);
    flavorDropdown1 = '#dropdown23';
    flavorDropdown2 = '#dropdown30';
} else if (productType === 'cookiesBakery') {
    quantity = parseInt($w('#dropdown13').value);
    flavorDropdown1 = '#dropdown24';
    flavorDropdown2 = '#dropdown31';
} else if (productType === 'macarons') {
    quantity = parseInt($w('#dropdown17').value);
    flavorDropdown1 = '#dropdown26';
    flavorDropdown2 = '#dropdown33';
} else if (productType === 'truffles') {
    quantity = parseInt($w('#dropdown19').value);
    flavorDropdown1 = '#dropdown27';
    flavorDropdown2 = '#dropdown34';
} else if (productType === 'cupcakes') {
    quantity = parseInt($w('#dropdown15').value);
    flavorDropdown1 = '#dropdown25';
    flavorDropdown2 = '#dropdown32';
} else if (productType === 'cake') {
    quantity = parseInt($w('#dropdown45').value);
    flavorDropdown1 = '#dropdown60';
    flavorDropdown2 = '#dropdown61';
}

// Hide all flavor boxes initially
$w(flavorDropdown1).hide();
$w(flavorDropdown2).hide();

// Handle product-specific independent quantity logic
if (productType === 'cupcakes') {
    handleCupcakesFlavorBoxes(quantity, flavorDropdown1, flavorDropdown2);
} else if (productType === 'cake') {
    handleCakeFlavorBoxes(quantity, flavorDropdown1, flavorDropdown2);
} else {
    // For other products, just show the main flavor boxes based on quantity
    if (quantity === 2) {
        $w(flavorDropdown1).show();
    } else if (quantity >= 3) {
        $w(flavorDropdown1).show();
        $w(flavorDropdown2).show();
    }
}

```

}

// Handle Cupcakes - independent quantity logic  
function handleCupcakesFlavorBoxes(quantity, flavorDropdown1, flavorDropdown2) {  
const additionalCupcakeFlavorDropdowns = [  
‘#dropdown42’, ‘#dropdown36’, ‘#dropdown39’, ‘#dropdown43’,  
‘#dropdown37’, ‘#dropdown40’  
];

```
// Hide additional flavor dropdowns
additionalCupcakeFlavorDropdowns.forEach(dropdown => {
    $w(dropdown).hide();
});

if (quantity === 2) {
    $w(flavorDropdown1).show();
    // Show 3 additional flavor boxes for cupcakes
    additionalCupcakeFlavorDropdowns.slice(0, 3).forEach(dropdown => {
        $w(dropdown).show();
    });
} else if (quantity >= 3) {
    $w(flavorDropdown1).show();
    $w(flavorDropdown2).show();
    // Show all additional flavor boxes for cupcakes
    additionalCupcakeFlavorDropdowns.forEach(dropdown => {
        $w(dropdown).show();
    });
}

```

}

// Handle Cake - independent quantity logic  
function handleCakeFlavorBoxes(quantity, flavorDropdown1, flavorDropdown2) {  
const additionalCakeFlavorDropdowns = [  
‘#dropdown47’, ‘#dropdown50’, ‘#dropdown53’, ‘#dropdown56’,  
‘#dropdown48’, ‘#dropdown51’, ‘#dropdown54’, ‘#dropdown57’  
];

```
// Hide additional flavor dropdowns
additionalCakeFlavorDropdowns.forEach(dropdown => {
    $w(dropdown).hide();
});

if (quantity === 2) {
    $w(flavorDropdown1).show();
    // Show 4 additional flavor boxes for cake
    additionalCakeFlavorDropdowns.slice(0, 4).forEach(dropdown => {
        $w(dropdown).show();
    });
} else if (quantity >= 3) {
    $w(flavorDropdown1).show();
    $w(flavorDropdown2).show();
    // Show all additional flavor boxes for cake
    additionalCakeFlavorDropdowns.forEach(dropdown => {
        $w(dropdown).show();
    });
}

```

}

// Function to show the appropriate boxes for each product  
function showBrowniesBoxes() { $w(‘#dropdown1’).show(); $w(‘#dropdown2’).show(); }  
function showCakePopsBoxes() { $w(‘#dropdown9’).show(); $w(‘#dropdown10’).show(); }  
function showCookiesCustomBoxes() { $w(‘#dropdown11’).show(); $w(‘#dropdown12’).show(); }  
function showCookiesBakeryBoxes() { $w(‘#dropdown13’).show(); $w(‘#dropdown14’).show(); }  
function showMacaronsBoxes() { $w(‘#dropdown17’).show(); $w(‘#dropdown18’).show(); }  
function showTrufflesBoxes() { $w(‘#dropdown19’).show(); $w(‘#dropdown20’).show(); }  
function showCupcakesBoxes() {  
$w(‘#dropdown15’).show();  
$w(‘#dropdown16’).show();  
$w(‘#dropdown41’).show();  
$w(‘#dropdown35’).show();  
$w(‘#dropdown38’).show();  
}  
function showCakeBoxes() {  
$w(‘#dropdown59’).show();  
$w(‘#dropdown45’).show();  
$w(‘#dropdown58’).show();  
$w(‘#dropdown46’).show();  
$w(‘#dropdown49’).show();  
$w(‘#dropdown52’).show();  
$w(‘#dropdown55’).show();  
}

// Function to hide all the dropdown boxes for each product  
function hideAllDropdownBoxes() {  
hideBrowniesBoxes();  
hideCakePopsBoxes();  
hideCookiesCustomBoxes();  
hideCookiesBakeryBoxes();  
hideMacaronsBoxes();  
hideTrufflesBoxes();  
hideCupcakesBoxes();  
hideCakeBoxes();  
}

function hideBrowniesBoxes() {  
$w(‘#dropdown1’).hide();  
$w(‘#dropdown2’).hide();  
$w(‘#dropdown21’).hide();  
$w(‘#dropdown28’).hide();  
}

function hideCakePopsBoxes() {  
$w(‘#dropdown9’).hide();  
$w(‘#dropdown10’).hide();  
$w(‘#dropdown22’).hide();  
$w(‘#dropdown29’).hide();  
}

function hideCookiesCustomBoxes() {  
$w(‘#dropdown11’).hide();  
$w(‘#dropdown12’).hide();  
$w(‘#dropdown23’).hide();  
$w(‘#dropdown30’).hide();  
}

function hideCookiesBakeryBoxes() {  
$w(‘#dropdown13’).hide();  
$w(‘#dropdown14’).hide();  
$w(‘#dropdown24’).hide();  
$w(‘#dropdown31’).hide();  
}

function hideMacaronsBoxes() {  
$w(‘#dropdown17’).hide();  
$w(‘#dropdown18’).hide();  
$w(‘#dropdown26’).hide();  
$w(‘#dropdown33’).hide();  
}

function hideTrufflesBoxes() {  
$w(‘#dropdown19’).hide();  
$w(‘#dropdown20’).hide();  
$w(‘#dropdown27’).hide();  
$w(‘#dropdown34’).hide();  
}

function hideCupcakesBoxes() {  
$w(‘#dropdown15’).hide();  
$w(‘#dropdown16’).hide();  
$w(‘#dropdown41’).hide();  
$w(‘#dropdown35’).hide();  
$w(‘#dropdown38’).hide();  
$w(‘#dropdown25’).hide();  
$w(‘#dropdown42’).hide();  
$w(‘#dropdown36’).hide();  
$w(‘#dropdown39’).hide();  
$w(‘#dropdown32’).hide();  
$w(‘#dropdown43’).hide();  
$w(‘#dropdown37’).hide();  
$w(‘#dropdown40’).hide();  
}  
function hideCakeBoxes() {  
$w(‘#dropdown59’).hide();  
$w(‘#dropdown45’).hide();  
$w(‘#dropdown58’).hide();  
$w(‘#dropdown46’).hide();  
$w(‘#dropdown49’).hide();  
$w(‘#dropdown52’).hide();  
$w(‘#dropdown55’).hide();  
$w(‘#dropdown60’).hide();  
$w(‘#dropdown47’).hide();  
$w(‘#dropdown50’).hide();  
$w(‘#dropdown53’).hide();  
$w(‘#dropdown56’).hide();  
$w(‘#dropdown61’).hide();  
$w(‘#dropdown48’).hide();  
$w(‘#dropdown51’).hide();  
$w(‘#dropdown54’).hide();  
$w(‘#dropdown57’).hide();  
}```

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [April 16, 2025, 10:12pm UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/20 "2025-04-16T22:12:17Z")

</div>

That is a fair amount of code to look over. I am heading off on holidays for a week but will be happy to review properly once I am back and give you a quote to fix up all the issues.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [April 17, 2025, 11:58am UTC](https://forum.wixstudio.com/t/submit-button-not-working/69033/21 "2025-04-17T11:58:25Z")

</div>

**HOLY COW !!!** My eyes just jumping out when i look @ this code 😆 (well my beginnings looked the same, even worse!)

Ok, i even do not know where to start.  
We will start with smal things step by step…

1. First of all → eleminate all those →   
**#dropdown15**  
**#dropdown22**  
**#dropdown4312**  
**#dropdown999999**  
and so on…

This is not how a coder would work!!!

Instead make your code as readable as possible and as less redundant as possible!  
You have over 300-codelines, for something what could be written by 50% less of used codelines!

1. The more clean you generate your code → the better for you, because the more you will work on it → the more complexe it will get and the less readable it will become! But if you already start like this, you won’t be able to understand your code after few code lines.

2. You have a big bunch of → HARD-CODINGS \<–, this is not a good way to code! It works, but your code needs a lot of maintanance and is not flexible.

In some codeparts i saw some RETURN-FUNCTIONS → well done!!!

Well, let me reduce it a little bit, since your code is really badly readable, i think Dan will agree with me… **PRE-VERSION** —\>

```javascript
// 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();
    }
  }
}

```

**So, this one already looks better, but this is only → STEP-1 !!!**

In meanwhile do yourself a favour and rename all elements of this example!  
a) give all used dropdown-elements (which are initially hidden) appropirate namings and a prefix, like…

**- ddnQtyBrownie**  
**- ddnQtyCakePop**  
**- ddnQtyTruffles**  
…and so on…

a) **ddn = stands for DROPDOWN** —\> making sure you immediatelly recognize the  
element inside your code, without having to do unneccessary and timeconsuming  
checkings for chosen element-type.  
b) **Qty = surely will be the QUALITY** (additional info like type)  
c) Brownie / CakePop / Truffles and so on .. = the **PROPERTY** itself !!!

 ![2025-04-17 14_09_36-Window](https://us1.discourse-cdn.com/wix/original/3X/f/e/fe1eafbfd3c0c5bc29a7f3533ead56bd124684c8.jpeg)

So your initial code -----------\> 320-Code-Lines  
First PRE-VERSION of CN → about 135-Code-lines

You already can feel the difference?

Another question → Why do you HARD-CODE all of your SETUP ?  
 → Why not generating this inside a DATABASE (collection) ???

And in one of Dan’s answers it was already mentioned to use…

 ![2025-04-17 14_20_30-Window](https://us1.discourse-cdn.com/wix/original/3X/4/6/46353e05ce43fbb2ead682b423311a7dd7264ede.png)

So next step would be to implement it into code aswell, since just connecting your SUBMIT-BUTTON to your dataset and assuming that the DATASET will know automatically what you have coded → **THIS WILL NOT WORK!**

A → **DATASET** ← has it’s own internal **PROCESS-FLOW** , it will neither listen nor wait for your generated code, as long as you do not connect is also **programmatically** , like already mentioned!

Further steps would be…

1. .. to reduce and clean up your code one more time, maybe reaching a code-length of **max. 100-CODE-LINES**

2. ..to remove all hardcodings and use a flexible DATABASE instead (again removing unneccessary STATIC-CODING!

Dan will do the rest 😉

**EDIT: And code-blocks like…**

```javascript
if (product === 'cake') {
    $w('#dropdown59').show();
    $w('#dropdown58').show();
    $w('#dropdown46').show();
    $w('#dropdown49').show();
    $w('#dropdown52').show();
    $w('#dropdown55').show();
  }

```

… can be reduced by a loop like…

```javascript
if (product === 'cake') {
  [
    '#dropdown59',
    '#dropdown58',
    '#dropdown46',
    '#dropdown49',
    '#dropdown52',
    '#dropdown55'
  ].forEach(id => $w(id).show());
}

```

[Next page](https://forum.wixstudio.com/t/submit-button-not-working/69033.md?page=2)