UNABLE TO SUBMIT FORM

Ask the community
, ,
1

Hi all,

I’ve created a multi-stage application form. However, the form couldn’t proceed to the final stage after hitting the submit button, but kept stuck on Please wait …

858×685 175 KB

I think this might be attributed to the following three reasons

  • There’s a part where I ask the applicant to upload a CV, wondering if I need to upgrade to a pricing plan before connecting the upload button to the database?
  • The way I connect the input fields to the database.
  • Something’s wrong with the codes. I’ve no knowledge of coding and just followed the instruction on the Internet. So step-by-step instruction is very much appreciated.
$w.onReady(function () {

    //NEXT BUTTONS
    $w("#nextButton1").onClick(function () {
        $w('#statebox8').changeState("workDetails");
        $w('#progressBar1').value = 33;
        $w("#button22").enable();

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

    $w("#nextButton2").onClick(function () {
        $w('#statebox8').changeState("otherDetails");
        $w('#progressBar1').value = 66;
        $w("#button23").enable();

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

    //PREVIOUS BUTTONS

    $w("#previousButton1").onClick(function () {
        $w('#statebox8').changeState("personalDetails");
        $w('#progressBar1').value = 0;

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

    $w("#previousButton2").onClick(function () {
        $w('#statebox8').changeState("workDetails");
        $w('#progressBar1').value = 33;

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

    //PROGRESS BUTTONS
    $w("#button21").onClick(function () {
        $w('#statebox8').changeState("personalDetails");
        $w('#progressBar1').value = 0;

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

    $w("#button22").onClick(function () {
        $w('#statebox8').changeState("workDetails");
        $w('#progressBar1').value = 33;

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

    $w("#button23").onClick(function () {
        $w('#statebox8').changeState("otherDetails");
        $w('#progressBar1').value = 66;

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

    //LANGUAGE
    $w("#addButton1").onClick(function () {
        $w("#languageBox2").expand();
        $w("#proficiencyBox2").expand();
        $w("#addButton2").expand();
        $w("#addButton1").collapse();
    });

    $w("#addButton2").onClick(function () {
        $w("#languageBox3").expand();
        $w("#proficiencyBox3").expand();
        $w("#addButton3").expand();
        $w("#addButton2").collapse();
        $w("#addButton1").collapse();
    });

    $w("#addButton3").onClick(function () {
        $w("#languageBox4").expand();
        $w("#proficiencyBox4").expand();
        $w("#addButton4").expand();
        $w("#addButton3").collapse();
        $w("#addButton2").collapse();
        $w("#addButton1").collapse();
    });

    $w("#addButton4").onClick(function () {
        $w("#languageBox5").expand();
        $w("#proficiencyBox5").expand();
        $w("#addButton4").collapse();
        $w("#addButton3").collapse();
        $w("#addButton2").collapse();
        $w("#addButton1").collapse();
    });

    //VALIDATION
    $w("#firstName,#lastName,#emailAddress,#phone,#country,#uploadButton1,checkbox1").onChange(function(){
    
        if($w("#firstName").value.length > 0 && $w("#lastName").value.length > 0 && $w("#emailAddress").value.length > 0 && $w("#phone").value.length > 0 && $w("#country").value.length > 0 && $w("#uploadButton1").value.length > 0){
            $w("#nextButton1").enable();
        } else {$w("#nextButton1").disable();}
    });

    //SUBMIT BUTTON

    $w("#submitButton").onClick(function () {
        $w('#submitButton').label = "Please wait ..."
    });

    $w('#dataset1').onAfterSave(function(){
        $w('#submitButton').label = "Submit";
        $w('#statebox8').changeState("submitSuccess");
        $w('#progressBar1').value = 100;
    });

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

});

$w("#checkbox1").onChange(function(){
        $w.onReady(() => {
            $w('#checkbox1').checked === false
            if ($w('#checkbox1').checked==true) {
                $w('#nextButton1').enable();
            } else $w('#nextButton1').disable();})

});

export function checkbox1_change(event) {
    if ($w('#checkbox1').checked==true) {
        $w('#nextButton1').enable();
    } else {$w('#nextButton1').disable();}
}

This is the view of content manager in case you need it.

1752×490 21.3 KB

1749×450 22.2 KB

1749×431 23 KB

Thanks in advance if you’re able to help.

2

Inside the submit button click event handler you only change the label of the button.
If I understand correctly, your form elements are connected to a dataset. The you need to perform a save() operation on the dataset inside the click event.

$w("#submitButton").onClick(function () {
        $w('#submitButton').label = "Please wait ...";
        $w('#dataset1').save();
    });

Make sure you button’s click action is not connected to data through settings. Otherwise it will cause conflict with the code.