Submit button not working for a form created using multi-state box

Ask the community
, ,
1

I have created a multistep form with inputs consisting of both fields and radio buttons. When connecting all the data, I have connected all input buttons and fields to the relevant categories within the dataset. The permissions are correctly set and the mode is on write-only.

However, no matter what I do or change, the data doesn’t get submitted at all. I personally think it’s something to do with the code but as this is my first time coding ever, I have no idea. I’d appreciate any help!

Link to website: https://thanjimuddin.wixsite.com/m-a-a/book-consultation

Code Snippet:

//SUBMIT BUTTON
$w . onReady ( function () {
$w ( “#submitButton1” ). onClick (() => {
$w ( ‘#bookingMultiStateBox’ ). changeState ( “bookingCTA” );
$w ( “#submitButton1” ). label = “Please wait…”
$w ( “#submitButton1” ). disable ();
});

//AFTER SAVE
$w . onReady ( function () {
$w ( “#dataset1” ). onAfterSave ( function () {
$w ( “#submitButton1” ). label = “Submit” ;
$w ( “#submitButton1” ). enable ();
$w ( “#bookingMultiStateBox” ). changeState ( “bookingCTA” );

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

});

//ON ERROR
$w . onReady ( function () {
$w ( “#dataset1” ). onError ( function () {
$w ( “#submitButton1” ). label = “Submit” ;
$w ( “#submitButton1” ). enable ();
});
});
});

2 
//SUBMIT BUTTON
$w.onReady(function () {
    $w("#dataset1").onReady(function () {
        $w("#submitButton1").onClick(() => {
            $w('#bookingMultiStateBox').changeState("bookingCTA");
            $w("#submitButton1").label = "Please wait..."
            $w("#submitButton1").disable();
        });

        $w("#dataset1").onAfterSave(function () {
            $w("#submitButton1").label = "Submit";
            $w("#submitButton1").enable();
            $w("#bookingMultiStateBox").changeState("bookingCTA");
            $w("#anchor1").scrollTo();
        });

        $w("#dataset1").onError(()=> {
            $w("#submitButton1").label = "Submit";
            $w("#submitButton1").enable();
        });
    });
});

Now it still depends, if you are doing it only by code, or if you also using the PROPERTY-PANEL.

Your SUBMIT-BUTTON is connected with the dataset, or by CODE only ?

  1. If by code only —> setFieldValues() + save() missing
  1. If using PROPERTY-PANEL-CONNECTION → onAfterSave() will be activated.
3

Thanks for replying. Yes, I have connected all the fields, inputs and the submit button with a database set but even with the onAfterSave function, nothing seems to be come up in my form submissions.

4

Maybe if I share more code, it might help? This isn’t all of it but below is how it begins, do you think it might have to do with import local from wix storage ?

import { local } from ‘wix-storage’ ;

//RADIO BUTTONS
$w . onReady ( function () {
$w ( “#radioGroup1” ). onChange (()=>{
let selectedIndex = $w ( “#radioGroup1” ). selectedIndex
console . log ( selectedIndex )
if ( selectedIndex === 0 ) { function1 ();}
if ( selectedIndex === 1 ) { function2 ();}
});
});

function function1 ( ){ $w ( ‘#bookingMultiStateBox’ ). changeState ( “acquireDetails2” )}
function function2 ( ){ $w ( ‘#bookingMultiStateBox’ ). changeState ( “enquiryForm” )}

$w . onReady ( function () {
$w ( “#radioGroup2” ). onChange (()=>{
let selectedIndex = $w ( “#radioGroup2” ). selectedIndex
console . log ( selectedIndex )
if ( selectedIndex === 0 ) { function3 ();}
if ( selectedIndex === 1 ) { function4 ();}
});
});

function function3 ( ){ $w ( ‘#bookingMultiStateBox’ ). changeState ( “propertyPurchase1” )}
function function4 ( ){ $w ( ‘#bookingMultiStateBox’ ). changeState ( “remortgageOptions1” )}

/
//DATA VALIDATION
$w . onReady ( function () {
$w ( “#bookingFirstName, #bookingLastName, #bookingPhoneNumber, #bookingEmail” ). onChange ( function () {
if ( $w ( “#bookingFirstName” ). value . length > 0 && $w ( “#bookingLastName” ). value . length > 0 && $w ( “#bookingPhoneNumber” ). value . length > 0 && $w ( “#bookingEmail” ). value . length > 0 ) {
$w ( “#submitButton1” ). enable ();
} else { $w ( “#submitButton1” ). disable (); }
});
});

5

Where is your code?

6

$w . onReady ( function () {

//DATA VALIDATION 1 
$w ( "bookingFirstName, #bookingLastName, #bookingPhoneNumber, #bookingEmail" ). onChange ( **function**  () { 
    **if**  ( $w ( "#bookingFirstName" ). value . length  >  0  &&  $w ( "#bookingLastName" ). value . length  >  0  &&  $w ( "#bookingPhoneNumber" ). value . length  >  0  &&  $w ( "#bookingEmail" ). value . length  >  0 ) { 
        $w ( "#submitButton1" ). enable (); 
    }  **else**  {  $w ( "#submitButton1" ). disable (); } 
}); 


//SUBMIT BUTTON 1 
$w ( "#submitButton1" ). onClick ( **function**  () { 
    $w ( "#submitButton1" ). label  =  "Please wait..." 
    $w ( "#submitButton1" ). disable (); 
}); 


//AFTER SAVE 1 
$w ( "#dataset1" ). onAfterSave ( **function**  () { 
    $w ( "#submitButton1" ). label  =  "Submit" ; 
    $w ( "#submitButton1" ). enable (); 
    $w ( "#bookingMultiStateBox" ). changeState ( "successPage1" ); 
}); 


//DATA VALIDATION 2 
$w ( "#enquiryFirstName, #enquiryLastName, #enquiryPhoneNumber, #enquiryEmail, #enquiryMessage" ). onChange ( **function**  () { 
    **if**  ( $w ( "#enquiryFirstName" ). value . length  >  0  &&  $w ( "#enquiryLastName" ). value . length  >  0  &&  $w ( "#enquiryPhoneNumber" ). value . length  >  0  &&  $w ( "#enquiryEmail" ). value . length  >  0  &&  $w ( "#enquiryMessage" ). value . length  >  0 ) { 
        $w ( "#submitButton2" ). enable (); 
    }  **else**  {  $w ( "#submitButton2" ). disable (); } 
}); 


//SUBMIT BUTTON 2 
$w ( "#submitButton2" ). onClick ( **function**  () { 
    $w ( "#submitButton2" ). label  =  "Please wait..." 
    $w ( "#submitButton2" ). disable (); 
}); 

//AFTER SAVE 2 
$w ( "#dataset1" ). onAfterSave ( **function**  () { 
    $w ( "#submitButton2" ). label  =  "Submit" ; 
    $w ( "#submitButton2" ). enable (); 
    $w ( "#bookingMultiStateBox" ). changeState ( "successPage2" ); 
}); 


//HOVER BOXES 
$w ( "#hoverBox1" ). onClick ( **function**  () { 
    $w ( '#bookingMultiStateBox' ). changeState ( "successPage1" ); 
}); 
$w ( "#hoverBox2" ). onClick ( **function**  () { 
    $w ( '#bookingMultiStateBox' ). changeState ( "appointmentBooking" ); 
}); 


//PREVIOUS BUTTONS 
$w ( "#previousButton1" ). onClick ( **function**  () { 
    $w ( '#bookingMultiStateBox' ). changeState ( "acquireDetails1" ); 
}); 
$w ( "#previousButton2" ). onClick ( **function**  () { 
    $w ( '#bookingMultiStateBox' ). changeState ( "acquireDetails2" ); 
}); 
$w ( "#previousButton3" ). onClick ( **function**  () { 
    $w ( '#bookingMultiStateBox' ). changeState ( "propertyPurchase1" ); 
}); 
$w ( "#previousButton4" ). onClick ( **function**  () { 
    $w ( '#bookingMultiStateBox' ). changeState ( "acquireDetails2" ); 
}); 
$w ( "#previousButton5" ). onClick ( **function**  () { 
    $w ( '#bookingMultiStateBox' ). changeState ( "propertyPurchase1" ); 
}); 


//RADIO BUTTONS 
$w ( "#radioGroup1" ). onChange ( **function**  () { 
 **let**  selectedIndex  =  $w ( "#radioGroup1" ). selectedIndex 
      console . log ( selectedIndex ) 
 **if**  ( selectedIndex === 0 ) { function1 ();} 
 **if**  ( selectedIndex === 1 ) { function2 ();} 
 }); 

    **function**  function1 (){ $w ( '#bookingMultiStateBox' ). changeState ( "acquireDetails2" )} 
    **function**  function2 (){ $w ( '#bookingMultiStateBox' ). changeState ( "enquiryForm" )} 


$w ( "#radioGroup2" ). onChange ( **function**  () { 
 **let**  selectedIndex  =  $w ( "#radioGroup2" ). selectedIndex 
      console . log ( selectedIndex ) 
 **if**  ( selectedIndex === 0 ) { function3 ();} 
 **if**  ( selectedIndex === 1 ) { function4 ();} 
 }); 

    **function**  function3 (){ $w ( '#bookingMultiStateBox' ). changeState ( "propertyPurchase1" )} 
    **function**  function4 (){ $w ( '#bookingMultiStateBox' ). changeState ( "remortgageOptions1" )} 


$w ( "#radioGroup3" ). onChange ( **function**  () { 
 **let**  selectedIndex  =  $w ( "#radioGroup3" ). selectedIndex 
      console . log ( selectedIndex ) 
 **if**  ( selectedIndex === 0 ) { function5 ();} 
 **if**  ( selectedIndex === 1 ) { function6 ();} 
 }); 

    **function**  function5 (){ $w ( '#bookingMultiStateBox' ). changeState ( "propertyPurchase2" )} 
    **function**  function6 (){ $w ( '#bookingMultiStateBox' ). changeState ( "remortgageOptions2" )} 


$w ( "#radioGroup4" ). onChange ( **function**  () { 
 **let**  selectedIndex  =  $w ( "#radioGroup4" ). selectedIndex 
      console . log ( selectedIndex ) 
 **if**  ( selectedIndex === 0 ) { function7 ();} 
 **if**  ( selectedIndex === 1 ) { function8 ();} 
 **if**  ( selectedIndex === 2 ) { function9 ();} 
 **if**  ( selectedIndex === 3 ) { function10 ();} 
 }); 

    **function**  function7 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 
    **function**  function8 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 
    **function**  function9 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 
    **function**  function10 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 


$w ( "#radioGroup5" ). onChange ( **function**  () { 
 **let**  selectedIndex  =  $w ( "#radioGroup5" ). selectedIndex 
      console . log ( selectedIndex ) 
 **if**  ( selectedIndex === 0 ) { function11 ();} 
 **if**  ( selectedIndex === 1 ) { function12 ();} 
 }); 

    **function**  function11 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 
    **function**  function12 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 


$w ( "#radioGroup6" ). onChange ( **function**  () { 
 **let**  selectedIndex  =  $w ( "#radioGroup6" ). selectedIndex 
      console . log ( selectedIndex ) 
 **if**  ( selectedIndex === 0 ) { function13 ();} 
 **if**  ( selectedIndex === 1 ) { function14 ();} 
 }); 

    **function**  function13 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 
    **function**  function14 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 


$w ( "#nextButton0" ). onClick ( **function**  () { 
 **let**  selectedIndex  =  $w ( "#radioGroup1" ). selectedIndex 
      console . log ( selectedIndex ) 
 **if**  ( selectedIndex === 0 ) { function15 ();} 
 **if**  ( selectedIndex === 1 ) { function16 ();} 
 }); 

    **function**  function15 (){ $w ( '#bookingMultiStateBox' ). changeState ( "propertyPurchase1" )} 
    **function**  function16 (){ $w ( '#bookingMultiStateBox' ). changeState ( "enquiryForm" )} 


$w ( "#nextButton1" ). onClick ( **function**  () { 
 **let**  selectedIndex  =  $w ( "#radioGroup2" ). selectedIndex 
      console . log ( selectedIndex ) 
 **if**  ( selectedIndex === 0 ) { function17 ();} 
 **if**  ( selectedIndex === 1 ) { function18 ();} 
 }); 

    **function**  function17 (){ $w ( '#bookingMultiStateBox' ). changeState ( "propertyPurchase2" )} 
    **function**  function18 (){ $w ( '#bookingMultiStateBox' ). changeState ( "remortgageOptions2" )} 


$w ( "#nextButton2" ). onClick ( **function**  () { 
 **let**  selectedIndex  =  $w ( "#radioGroup3" ). selectedIndex 
      console . log ( selectedIndex ) 
 **if**  ( selectedIndex === 0 ) { function19 ();} 
 **if**  ( selectedIndex === 1 ) { function20 ();} 
 **if**  ( selectedIndex === 2 ) { function21 ();} 
 **if**  ( selectedIndex === 3 ) { function22 ();} 
 }); 

    **function**  function19 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 
    **function**  function20 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 
    **function**  function21 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 
    **function**  function22 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 


$w ( "#nextButton3" ). onClick ( **function**  () { 
 **let**  selectedIndex  =  $w ( "#radioGroup4" ). selectedIndex 
      console . log ( selectedIndex ) 
 **if**  ( selectedIndex === 0 ) { function23 ();} 
 **if**  ( selectedIndex === 1 ) { function24 ();} 
 }); 

    **function**  function23 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 
    **function**  function24 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 


$w ( "#nextButton4" ). onClick ( **function**  () { 
 **let**  selectedIndex  =  $w ( "#radioGroup5" ). selectedIndex 
      console . log ( selectedIndex ) 
 **if**  ( selectedIndex === 0 ) { function25 ();} 
 **if**  ( selectedIndex === 1 ) { function26 ();} 
 }); 

    **function**  function25 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )} 
    **function**  function26 (){ $w ( '#bookingMultiStateBox' ). changeState ( "bookingForm" )}

});

7

Everything else works fine, it’s just the submit button. When I click it, it does not submit any data to my content manager and also does not go to the next step on after save. Please bear in mind, I created a simple one step form on another page and that seems to work fine, but this multi-step form with radio buttons doesn’t work.