Multi-State Box Save Issue

Ask the community
,
1

I’ll try to give as much details as possible. On my site, I have a Multi-State box with Input Elements (consisting of:
Text Input - Attached to dataset as Text
Text Box- Attached to dataset as Text
Radio Buttons- Attached to dataset as Numbers since they’re selecting 1—5
Dropdowns- Attached to dataset as Numbers since it’s an age range selector
[18-24,18-24
25-34,25-34
35-40,35-40
41-50,41-50]
and Image Uploads- Attached to dataset as Image.)

The multi-state box is meant to be an audition form.

My dataset, dataset1, is set to Write Only with 12 items to display

287×574 5.59 KB

1748×879 48.4 KB

I’ve been following a coding tutorial, but the submit button seems to be broken or missing pieces.

Here’s my code:

$w.onReady(function () {
// WHEN ACTIVATED, ERROR IS GONE BUT NEXT BUTTON DOESN'T WORK AT ALL. UNSURE IF ERROR IS TRULY GONE.
    // $w.onReady( () => {
    //     $w("#dataset1").onReady( () => {
    //     $w("#dataset1").add()
    //     .then( ( ) => {
    //         console.log("New item added");
    //     })
    //     .catch( (err) => {
    //         let errMsg = err;
    //     });
     
    // 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
    $w('#backbutton1').onClick(function () {
        $w('#auditionMultiStateBox').changeState('PersonaDetails');
        $w('#progressBar1').value = 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

    // ⚠ VALIDATION ⚠
    $w('#firstname, #email, #age, #timezone, #hearabout').onChange(function (){
        if($w('#firstname').value.length > 0 && $w('#email').value.length > 0 && $w('#age').value.length > 0 && $w('#timezone').value.length > 0 && $w('#hearabout').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('#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, #questions').onChange(function (){
        if($w('#teams').value.length > 0 && $w('#events').value.length > 0 && $w('#links').value.length > 0 && $w('#questions').value.length > 0) {
            $w('#submitbutton1').enable;
        } else {$w('#submitbutton1').disable();}

    });

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

    // SUBMIT BUTTON
    $w('#submitbutton1').onClick(function () {
        $w('#submitbutton1').label = "Submitting..."
        $w('#submitbutton1').disable();
    });

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

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

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

Is there something I’m doing wrong or missing?

2

Not sure, generated this code withing 5min, so not tested…

//1) Click SUBMIT-BUTTON
//2) Set the FIELD-VALUES
//3) SAVEPROCESS


$w.onReady(function () {
    $w('#dataset1').onReady(()=>{
        // SUBMIT BUTTON -----------------------------------
        $w('#submitbutton1').onClick(function() {console.log("Clicked");
            $w('#submitbutton1').label = "Submitting...";
            $w("#dataset1").save();
            $w('#submitbutton1').disable();         
        });
        
        // ON BEFORE SAVE -----------------------------------
        $w('#dataset1').onBeforeSave(function() {
            $w("#dataset1").setFieldValue("title", "New Title");
        });

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

        // AFTER SAVE -------------------------------------
        $w('#dataset1').onAfterSave(function () {
            $w('#submitbutton1').label = "Submit"
            $w('#submitbutton1').enable();
            $w('#auditionMultiStateBox').changeState('SubmitSuccess');
            $w('#progressBar1').value = 100;
            $w('#anchor1').scrollTo();
        });
    });
});