Need help with conditional forms expand, collapse, submit

Ask the community
, ,
1

I have created a custom form that I want to capture the information a user has entered. (name, email, phone etc.) I this information before the user proceeds. I also have conditional questions that if they select radio buttons the information expands or collapses.

So far I have added a button that submits and stays on page and database is populated.

I don’t want the options in the conditional form to show (expand, collapse) until after the submit button is used.

here is the code I am using:

export function button4_click(event) {
   $w('#button4').onClick

}

    
export function radioGroup1_click(event,$w) {
    console.log($w('#radioGroup1').value);
    if ($w('#radioGroup1').value === "r1") {
        $w("#text21").collapse();
        $w("#text22").collapse();
        $w("#text25").collapse();
        $w("#text26").collapse();
        $w("#text27").collapse();
        $w("#text28").collapse();
        $w("#uploadButton1").collapse();
        $w("#button3").collapse();
        $w("#text23").expand();
        $w("#text24").expand();
        $w("#image1").expand();
        $w("#dropdown1").expand();

    }

    if ($w("#radioGroup1").value === "c1") {
        $w("#text27").expand();
        $w("#text28").expand();
        $w("#text25").expand();
        $w("#text26").expand();
        $w("#uploadButton1").expand();
        $w("#button3").expand();
        $w("#text23").collapse();
        $w("#text24").collapse();
        $w("#image1").collapse();
        $w("#dropdown1").collapse();

    }

    if ($w("#radioGroup1").value === "r2") {
        $w("#text27").expand();
        $w("#text28").expand();
        $w("#text25").expand();
        $w("#text26").expand();
        $w("#uploadButton1").expand();
        $w("#button3").expand();
        $w("#text23").collapse();
        $w("#text24").collapse();
        $w("#image1").collapse();
        $w("#dropdown1").collapse();
    }

    if ($w("#radioGroup1").value === "c2") {
        $w("#text27").expand();
        $w("#text28").expand();
        $w("#text25").expand();
        $w("#text26").expand();
        $w("#uploadButton1").expand();
        $w("#button3").expand();
        $w("#text23").collapse();
        $w("#text24").collapse();
        $w("#image1").collapse();
        $w("#dropdown1").collapse();
    }
}
2

Your code has conditions based on interaction with the radio button right now. If you want conditions to happen on a different event, you would need to move the code to be connected to that.

However, if I am understanding you correctly, this code is to hide/show conditional parts of the form. Wouldn’t the user need to fill out everything before submit?

3

Sort of, but if the user fills out all the information they see the results without me getting their information captured. Then there wont be a need for the submit.

4

it sounds liek what you may be looking for is this API if you are using wix forms https://www.wix.com/velo/reference/wix-crm/$w-wixforms/onwixformsubmitted

if you are just using a button that you created in the editor as your submit, the onclick of htat button you can hide/show whatever you like