Submit Button Failure

thelengendarydemonsl · September 25, 2022, 3:50am

I’m making a site with an application form, I followed this tutorial “WIX Tutorial | Simple Advance Multi-step Form with Progress Bar using Velo Code | Wix Ideas” by Wix Ideas
and everything seemed to work fine during testing. . . Except the submit button doesn’t work! I’m stuck in the beforeSave event and it won’t move anymore.

I’m lost on how to correct this, my button is linked to my dataset as well and it’s not saving to anything when tested

My code is:

$w.onReady(function () {
    //NEXT BUTTONS
    $w('#nextbutton1').onClick(function () {
        $w('#auditionMultiStateBox').changeState("AboutYou")
        $w('#progressBar1').value = 25;
        $w('#progressbutton2').enable();

        $w('#anchor1').scrollTo();
    })

    $w('#nextbutton2').onClick(function () {
        $w('#auditionMultiStateBox').changeState("VTubing")
        $w('#progressBar1').value = 50;
        $w('#progressbutton3').enable();

        $w('#anchor1').scrollTo();
    })

    $w('#nextbutton3').onClick(function () {
        $w('#auditionMultiStateBox').changeState("ContentCreation")
        $w('#progressBar1').value = 75;
        $w('#progressbutton4').enable();

        $w('#anchor1').scrollTo();
    })

    // PREVIOUS BUTTON IS -25

    $w('#backbutton1').onClick(function () {
        $w('#auditionMultiStateBox').changeState("PersonaDetails")
        $w('#progressBar1').value = 0;
        $w('#progressbutton2').disable();

        $w('#anchor1').scrollTo();
    })

    $w('#backbutton2').onClick(function () {
        $w('#auditionMultiStateBox').changeState("AboutYou")
        $w('#progressBar1').value = 25;
        $w('#progressbutton3').disable();

        $w('#anchor1').scrollTo();
    })

    $w('#backbutton3').onClick(function () {
        $w('#auditionMultiStateBox').changeState("VTubing")
        $w('#progressBar1').value = 50;
        $w('#progressbutton4').disable();

        $w('#anchor1').scrollTo();
    })

    //PROGRESS BUTTONS
    $w('#progressbutton1').onClick(function () {
        $w('#auditionMultiStateBox').changeState("PersonaDetails")
        $w('#progressBar1').value = 0;
    })

    $w('#progressbutton2').onClick(function () {
        $w('#auditionMultiStateBox').changeState("AboutYou")
        $w('#progressBar1').value = 25;
    })

    $w('#progressbutton3').onClick(function () {
        $w('#auditionMultiStateBox').changeState("VTubing")
        $w('#progressBar1').value = 50;
    })

    $w('#progressbutton4').onClick(function () {
        $w('#auditionMultiStateBox').changeState("ContentCreation")
        $w('#progressBar1').value = 75;
    })

    //VALIDATIONS:⚠
    $w('#firstname, #email, #hearabout, #timezone, #age').onChange(function () {
        if ($w('#firstname').value.length > 0 && $w('#timezone').value.length > 0 && $w('#hearabout').value.length > 0 && $w('#email').value.length > 0 && $w('#age').value.length > 0) {
            $w('#nextbutton1').enable();
        } else { $w('#nextbutton1').disable(); }
    });

    $w('#aboutyourself, #weakness, #inspire, #likes').onChange(function () {
        if ($w('#aboutyourself').value.length > 0 && $w('#weakness').value.length > 0 && $w('#inspire').value.length > 0 && $w('#likes').value.length > 0 && $w('#age').value.length > 0) {
            $w('#nextbutton2').enable();
        } else { $w('#nextbutton2').disable(); }
    });

    $w('#experience, #favorite, #lore, #upload').onChange(function () {
        if ($w('#experience').value.length > 0 && $w('#favorite').value.length > 0 && $w('#lore').value.length > 0 && $w('#upload').value.length > 0) {
            $w('#nextbutton3').enable();
        } else { $w('#nextbutton3').disable(); }
    });

    $w('#teams, #events, #links').onChange(function () {
        if ($w('#teams').value.length > 0 && $w('#events').value.length > 0 && $w('#links').value.length > 0) {
            $w('#submitbutton1').enable();
        } else { $w('#submitbutton1').disable(); }
    });
    
    //SUBMIT BUTTON
    $w('#submitbutton1').onClick(function () {
        $w('#submitbutton1').label = "Submitting"
    });

    //AFTER SAVE
    $w('#dataset1').onAfterSave(function () {
        $w("#submitbutton1").label = "Submitted"
        $w('#auditionMultiStateBox').changeState('SubmitSuccess')
        $w('#progressBar1').value = 100;

        $w('#anchor1').scrollTo();
    });

    //ON ERROR
    $w('#dataset1').onError(function () {
        $w('#submitbutton1').label = "submit";
    });

});

CODE-NINJA · September 25, 2022, 3:57pm

Disconnect your SAVE-BUTTON from DATASET and write the SAVE-FUNCTION by CODE.

This for you first ADD - - > $w(‘#myDatasetIDhere’).onReady()… directly after (inside) - - >$w.onReady().
Then you take a look here…
https://www.wix.com/velo/reference/wix-dataset/dynamicdataset/setfieldvalue

and here…
https://www.wix.com/velo/reference/wix-dataset/dataset/setfieldvalues

Write tyour code for the saving function, like shown in the example.

Another not that good coding-practise is your declaration of VALIABLES.

Instead of - - > backbutton3
Better use - → btnBack, btnNext, btnSubmit.

This is the better way of how to declare your variables (believe me).

-btn = BUTTON
-inp = INPUT
-box = Container/Box
-dd —> can be used for dropdown, but not good!!! → better drd or drn as prefix!

Why declaring your variables this way?
And why is dd not as good as drd or drn?

Coding is a systematical thing.
-The better your systematical coding, the better will work your code.
-The more clean you design your code → the better you will be able to read it.
-The better you can read it, the faster you will code and the better will work your CODE!

Why using a trippled-prefix better then a doubled one?
drd ← better then → dd ???

To give this an example.
Time by time you will create bigger and more complex condings (that is normal).
Let’s say you have about 4000-lines of CODE in front of you and you have declared several DROPDOWNs inside your code and you used a SINGLED-PREFIX like—>

dXXX
dYYY
dZZZ

your d stands for the DropDown-Element.

Now try to find all dropdowns inside your code!

After this little excercise you will now know, why to use more then SINGLE-PREFIXED variable-declarations.

To confirm the result. — > do the same with TRIPPLED-PREFIX, like…
drdXXX
drdYYY
drdZZZ

Good luck!

thelengendarydemonsl · September 25, 2022, 9:34pm

My apologies, I’m new to all of this (also, I prefer to type out my variables fully because my brain messes up abbreviations and I’ll make way more mistakes)!

I’m a bit lost on how to start the button and how I would use the links. ;-;

CODE-NINJA · September 25, 2022, 10:22pm

Add dataset.onReady() to your code…

$w.onReady(function(){
    $w('#dataset1').onReady(()=>{
    
        //rest of your code here...
        
        // Submit-Button...
        $w('#submitbutton1').onClick(function(){
            $w('#submitbutton1').label="Submitting..."});  
            $w("#dataset1").setFieldValue("title", "New Title");
            $w("#dataset1").save();
        
        });
        
        //rest of your code here...
    });
});

thelengendarydemonsl · September 26, 2022, 4:26am

Hello! I followed this and imported my code into it but I got this error when I ran it.

UserErrorUserError: datasetApi 'save' operation failed Caused by DatasetError: Some of the elements validation failed

Caused by: Some of the elements validation failed

You have unhandled error in async operation. Consider catching it and handling accordingly.  DatasetError: Some of the elements validation failed

Error: Some of the elements validation failed

My code is this:

$w.onReady(function(){
    $w('#dataset1').onReady(()=>{
    
        //rest of your code here...
            $w('#nextbutton1').onClick(function () {
        $w('#auditionMultiStateBox').changeState("AboutYou")
        $w('#progressBar1').value = 25;
        $w('#progressbutton2').enable();

        $w('#anchor1').scrollTo();
    })

    $w('#nextbutton2').onClick(function () {
        $w('#auditionMultiStateBox').changeState("VTubing")
        $w('#progressBar1').value = 50;
        $w('#progressbutton3').enable();

        $w('#anchor1').scrollTo();
    })

    $w('#nextbutton3').onClick(function () {
        $w('#auditionMultiStateBox').changeState("ContentCreation")
        $w('#progressBar1').value = 75;
        $w('#progressbutton4').enable();

        $w('#anchor1').scrollTo();
    })

    // PREVIOUS BUTTON IS -25

    $w('#backbutton1').onClick(function () {
        $w('#auditionMultiStateBox').changeState("PersonaDetails")
        $w('#progressBar1').value = 0;
        $w('#progressbutton2').disable();

        $w('#anchor1').scrollTo();
    })

    $w('#backbutton2').onClick(function () {
        $w('#auditionMultiStateBox').changeState("AboutYou")
        $w('#progressBar1').value = 25;
        $w('#progressbutton3').disable();

        $w('#anchor1').scrollTo();
    })

    $w('#backbutton3').onClick(function () {
        $w('#auditionMultiStateBox').changeState("VTubing")
        $w('#progressBar1').value = 50;
        $w('#progressbutton4').disable();

        $w('#anchor1').scrollTo();
    })

    //PROGRESS BUTTONS
    $w('#progressbutton1').onClick(function () {
        $w('#auditionMultiStateBox').changeState("PersonaDetails")
        $w('#progressBar1').value = 0;
    })

    $w('#progressbutton2').onClick(function () {
        $w('#auditionMultiStateBox').changeState("AboutYou")
        $w('#progressBar1').value = 25;
    })

    $w('#progressbutton3').onClick(function () {
        $w('#auditionMultiStateBox').changeState("VTubing")
        $w('#progressBar1').value = 50;
    })

    $w('#progressbutton4').onClick(function () {
        $w('#auditionMultiStateBox').changeState("ContentCreation")
        $w('#progressBar1').value = 75;
    })

    //VALIDATIONS:⚠
    $w('#firstname, #email, #hearabout, #timezone, #age').onChange(function () {
        if ($w('#firstname').value.length > 0 && $w('#timezone').value.length > 0 && $w('#hearabout').value.length > 0 && $w('#email').value.length > 0 && $w('#age').value.length > 0) {
            $w('#nextbutton1').enable();
        } else { $w('#nextbutton1').disable(); }
    });

    $w('#aboutyourself, #weakness, #inspire, #likes').onChange(function () {
        if ($w('#aboutyourself').value.length > 0 && $w('#weakness').value.length > 0 && $w('#inspire').value.length > 0 && $w('#likes').value.length > 0 && $w('#age').value.length > 0) {
            $w('#nextbutton2').enable();
        } else { $w('#nextbutton2').disable(); }
    });

    $w('#experience, #favorite, #lore, #upload').onChange(function () {
        if ($w('#experience').value.length > 0 && $w('#favorite').value.length > 0 && $w('#lore').value.length > 0 && $w('#upload').value.length > 0) {
            $w('#nextbutton3').enable();
        } else { $w('#nextbutton3').disable(); }
    });

    $w('#teams, #events, #links').onChange(function () {
        if ($w('#teams').value.length > 0 && $w('#events').value.length > 0 && $w('#links').value.length > 0) {
            $w('#submitbutton1').enable();
        } else { $w('#submitbutton1').disable(); }
    });
    
    // Submit-Button...
    $w('#submitbutton1').onClick(function(){
        $w('#submitbutton1').label="Submitting..."});  
        $w("#dataset1").setFieldValue("title", "New Title");
        $w("#dataset1").save();
    
    });
    
    //rest of your code here...
        
    //AFTER SAVE
    $w('#dataset1').onAfterSave(function () {
        $w("#submitbutton1").label = "Submitted"
        $w('#auditionMultiStateBox').changeState('SubmitSuccess')
        $w('#progressBar1').value = 100;

        $w('#anchor1').scrollTo();
    });

    //ON ERROR
    $w('#dataset1').onError(function () {
        $w('#submitbutton1').label = "submit";
    });
    
});

CODE-NINJA · September 26, 2022, 7:18am

I would suggest you to try to debug your own code, by using the → CONSOLE.

Add on every of your code-lines some console-logs and inspect the code and his behaviour.

Start step by step…

$w.onReady(function(){console.log("My page is ready now...');
	$w('#dataset1').onReady(()=>{console.log("My dataset is ready now...');

	});
});

Run this code and check the console…

Then (if everything is allright) do next step and add more of code…

$w.onReady(function(){
	$w('#dataset1').onReady(()=>{	
		$w('#submitbutton1').onClick(function(){console.log("Clicked);
			$w('#submitbutton1').label="Submitting...";
			$w("#dataset1").setFieldValue("title", "New Title");
			$w("#dataset1").save();
		});
	});
});

If still everything works well, add further code and some console.logs on important code-parts.

Check your console for errors after every code-expandings.

CODE-NINJA · September 26, 2022, 4:51pm

I tested my own provided code and it works!

But, to make this code working, your database must have a blank generated row, like shown on the following pic…

If you do not have a ready blank row, you will get an ERROR…

Following EROR occurs…

As you can see, the system is asking for a → “current-item” in this case it is a blank created row inside your DATABASE.

As long as you don’t have at least 1x → “current-item” it won’t work.

But it works well, after you have generated 1x blank row inside your DB.
As you can see on the following pic, we get the “New Title” into the DATABASE.

Like i already mentioned. All you need is to know how to use the CONSOLE!!!

ADDITIONAL-INFO 4 YOU…
Take a look onto this, you will need it.

In case that you start with a blank DATABASE, you will have first to → ADD ← a blank ROW, before you can SAVE DATA in DB.

This example will show you how!
https://www.wix.com/velo/reference/wix-dataset/dataset/add

As you can see, you will have to expand your code and add some additional code, to make it work.

GOOD LUCK !

BTW: USED TESTING-CODE was …

$w.onReady(function(){ 
    
    $w('#dataset1').onReady(()=>{   
        $w('#btnSubmit').onClick(function(){
            console.log("Clicked");
            $w('#btnSubmit').label="Submitting...";
            $w("#dataset1").setFieldValue("title", "New Title");
            $w("#dataset1").save();
        });
    });
});

Also do not forget to set your DATASET to READ&WRITE inside the DATASET-OPTIONS!

Topic		Replies	Views
Submit button not working for a form created using multi-state box Ask the community code , wix-bookings , question	6	324	April 12, 2023
submit button dosent work Ask the community code , question	4	133	September 18, 2019
Button. onClick not working Ask the community code , wix , question	3	12	January 21, 2025
Coding on Wix form. Ask the community code , wix-forms , question	6	179	February 10, 2020
UserError: datasetApi 'save' operation failed Caused by DatasetError: Operation (save) not allowed during save Ask the community code , question	2	632	February 22, 2022

Submit Button Failure

Related topics