MULTISTAGE FORM / DATABASE CONNECTION - MALFUNCTIONING!!

Ask the community
,
1

I created the multistage form using the Wix Slideshow.

Problem 1: Every field defaults to disabled when I connect the fields to my database.
This is a HUGE problem as it renders the form useless because none of the data being provided by the client is being collected! I am unable to collect the data the user provides. This is a rather long form with tons of fields and recreating it is going to cost me tons of time. I REALLY hope this can be fixed.

Problem 2: One of my slides includes collapsible boxes, but the checkmark boxes which control the expand function are not working.

Please see my code below:

//PAYMENT CODE
import wixWindow from "wix-window";
$w.onReady(function () {
    $w("#checkout").onClick((event, $w) => {
 var amm = $w("#price").text
 var data = {
            amount: $w("#price").text,
            itemName: $w("#prodTitle").text,
            description: $w("#prodDescr").text
        }
        wixWindow.openLightbox("Payment Form", data)
    });
});

//Form STAGES functions
//CONTACT FORM - COLLECTS CONTACT INFORMATION FROM CLIENT
function showContacts() {
    $w('#ResumeSlideshow').changeSlide(0);
    $w('#contactInfo').disable();
    $w('#workhistory').enable();
    $w('#education').enable();
    $w('#personal').enable();
    $w('#submit').enable();
    $w('#contactInfoLine').show();
    $w('#workhistoryLine').hide();
    $w('#educationLine').hide();
    $w('#personalLine').hide();
    $w('#submitLine').hide();
}
export function contactSaveButton_onclick(event) {
    showJobs();
}

//WORK HISTORY FORM - SLIDE 1 OF 6 - THIS SLIDE INCLUDES THE FORM TO COLLECT DETAILS ABOUT CLIENTS MOST CURRENT EMPLOYER
function showJobs() {
    $w('#ResumeSlideshow').changeSlide(1);
    $w('#contactInfo').enable();
    $w('#workhistory').disable();
    $w('#education').enable();
    $w('#personal').enable();
    $w('#submit').enable();
    $w('#contactInfoLine').hide();
    $w('#workhistoryLine').show();
    $w('#educationLine').hide();
    $w('#personalLine').hide();
    $w('#submitLine').hide();
}
//EDUCATION FORM - SLIDE 1 OF 2 - THIS SLIDE INCLUDES THE FORM TO COLLECT DETAILS ABOUT CLIENTS COLLEGIATE DEGREES
function showEducation() {
    $w('#ResumeSlideshow').changeSlide(7);
    $w('#contactInfo').enable();
    $w('#workhistory').enable();
    $w('#education').disable();
    $w('#personal').enable();
    $w('#submit').enable();
    $w('#contactInfoLine').hide();
    $w('#workhistoryLine').hide();
    $w('#educationLine').show();
    $w('#personalLine').hide();
    $w('#submitLine').hide();
}
export function checkboxDegree2_onclick(event, $W) {
 if ($w('#checkboxDegree2').checked)
        $w('#boxDegree2').expand();
 else
        $w('#boxDegree2').collapse();
}
export function checkbox3Degree_onclick(event, $w) {
 if ($w('#checkbox3Degree').checked)
        $w('#boxDegree3').expand();
 else
        $w('#boxDegree3').collapse();
}

export function buttonSaveDegrees_onclick(event, $w) {
    showEducation2();
}

export function buttonSaveTraining_onclick(event, $w) {
    showPersonal();
}
//PERSONAL INFORMATION FORM - THIS SLIDE WILL INCLUDE A FORM WITH THE FOLLOWING SECTIONS: JOB/CAREER PURSUIT, PROFESSIONAL SUMMARY, SPECIAL SKILLS, & CHARACTER STRENGTHS 
function showPersonal() {
    $w('#ResumeSlideshow').changeSlide(9);
    $w('#contactInfo').enable();
    $w('#workhistory').enable();
    $w('#education').enable();
    $w('#personal').disable();
    $w('#submit').enable();
    $w('#contactInfoLine').hide();
    $w('#workhistoryLine').hide();
    $w('#educationLine').hide();
    $w('#personalLine').show();
    $w('#submitLine').hide();
}
//SUBMIT FORM - DISPLAYS RESUME TYPE SELECTION, RESUME STYLE SELECTION, AND PAYMENT FORM 
function showSubmit() {
    $w('#ResumeSlideshow').changeSlide(10);
    $w('#contactInfo').enable();
    $w('#workhistory').enable();
    $w('#education').enable();
    $w('#personal').enable();
    $w('#submit').disable();
    $w('#contactInfoLine').hide();
    $w('#workhistoryLine').hide();
    $w('#educationLine').hide();
    $w('#personalLine').hide();
    $w('#submitLine').show();
}
//SLIDES THAT DO NOT APPEAR ON STAGES BAR

//WORK HISTORY SLIDES 2, 3, 4, 5, 6 - ONE FORM/SLIDE FOR EACH PREVIOUS POSITION
function showJobs2() {
    $w('#ResumeSlideshow').changeSlide(2);
    $w('#contactInfo').enable();
    $w('#workhistory').enable();
    $w('#education').enable();
    $w('#personal').enable();
    $w('#submit').enable();
    $w('#contactInfoLine').hide();
    $w('#workhistoryLine').show();
    $w('#educationLine').hide();
    $w('#personalLine').hide();
    $w('#submitLine').hide();
}

function showJobs3() {
    $w('#ResumeSlideshow').changeSlide(3);
    $w('#contactInfo').enable();
    $w('#workhistory').enable();
    $w('#education').enable();
    $w('#personal').enable();
    $w('#submit').enable();
    $w('#contactInfoLine').hide();
    $w('#workhistoryLine').show();
    $w('#educationLine').hide();
    $w('#personalLine').hide();
    $w('#submitLine').hide();
}

function showJobs4() {
    $w('#ResumeSlideshow').changeSlide(4);
    $w('#contactInfo').enable();
    $w('#workhistory').enable();
    $w('#education').enable();
    $w('#personal').enable();
    $w('#submit').enable();
    $w('#contactInfoLine').hide();
    $w('#workhistoryLine').show();
    $w('#educationLine').hide();
    $w('#personalLine').hide();
    $w('#submitLine').hide();
}

function showJobs5() {
    $w('#ResumeSlideshow').changeSlide(5);
    $w('#contactInfo').enable();
    $w('#workhistory').enable();
    $w('#education').enable();
    $w('#personal').enable();
    $w('#submit').enable();
    $w('#contactInfoLine').hide();
    $w('#workhistoryLine').show();
    $w('#educationLine').hide();
    $w('#personalLine').hide();
    $w('#submitLine').hide();
}

function showJobs6() {
    $w('#ResumeSlideshow').changeSlide(6);
    $w('#contactInfo').enable();
    $w('#workhistory').enable();
    $w('#education').enable();
    $w('#personal').enable();
    $w('#submit').enable();
    $w('#contactInfoLine').hide();
    $w('#workhistoryLine').show();
    $w('#educationLine').hide();
    $w('#personalLine').hide();
    $w('#submitLine').hide();
}
//EDUCATION SLIDE 2 OF 2 - THIS SLIDE COLLECTS DETAILS ABOUT CLIENT'S TRAINING & CERTIFICATIONS
function showEducation2() {
    $w('#ResumeSlideshow').changeSlide(8);
    $w('#contactInfo').enable();
    $w('#workhistory').enable();
    $w('#education').enable();
    $w('#personal').enable();
    $w('#submit').enable();
    $w('#contactInfoLine').hide();
    $w('#workhistoryLine').hide();
    $w('#educationLine').show();
    $w('#personalLine').hide();
    $w('#submitLine').hide();
}

//FORM STATUS BAR PAGE NAVIGATION BUTTONS
export function contactInfo_onclick(event, $w) {
    showContacts();
}

export function workhistory_onclick(event, $w) {
    showJobs();
}
export function education_onclick(event, $w) {
    showEducation();
}
export function personal_onclick(event, $w) {
    showPersonal();
}
export function submit_onclick(event, $w) {
    showSubmit();
}

//SUBMIT SLIDE BUTTONS

export function buttonSaveStyle_onclick(event, $w) {

    console.log($w("#radioGroup1").value);
 if ($w("#radioGroup1").value === "Academia Style") {
        $w("#buttonSelectType").show();
    }
 if ($w("#radioGroup1").value === "Straight Line") {
        $w("#buttonSelectType").show();
    }
 if ($w("#radioGroup1").value === "Freelance Style") {
        $w("#buttonSelectType").show();
    }
}
export function checkout_onclick(event) {
    console.log($w("#price").text);
 if ($w("#price").text === "125") {
        $w("#uploadButton2").hide();
        $w("#buttonSubmit").enable();
    }

 if ($w("#price").text === "85") {
        $w("#uploadButton2").show();
        $w("#buttonSubmit").enable();
    }

}
export function buttonSelectType_onclick(event, $w) {
    $w("#boxType").show();
}

//WORK HISTORY SLIDES SAVE & ADD MORE buttons
export function savejob1addjob2Button_onclick(event, $w) {
    showJobs2();
}
export function savejob2addjob3_onclick(event, $w) {
    showJobs3();
}
export function savejob3addjob4Button_onclick(event, $w) {
    showJobs4();
}
export function buttonSavejob4_onclick(event, $w) {
    showJobs5();
}
export function buttonSavejob5_onclick(event, $w) {
    showJobs6();
}
export function buttonSavejob6_onclick(event, $w) {
    showEducation();
}

//WORK HISTORY SLIDES PREVIOUS ENTRY buttons 
export function backjob1_onclick(event, $w) {
    showJobs();
}
export function backjob2_onclick(event, $w) {
    showJobs2();
}
export function buttonBackJob3_onclick(event, $w) {
    showJobs3();
}
export function buttonBackjob4_onclick(event, $w) {
    showJobs4();
}
export function buttonBackjob5_onclick(event, $w) {
    showJobs5();
}

//WORK HISTORY NAVIGATE TO ED buttons
export function buttonEd1_onclick(event) {
    showEducation();
}
export function buttonEd2_onclick(event, $w) {
    showEducation();
}

export function buttonEd3_onclick(event, $w) {
    showEducation();
}

export function buttonEd4_onclick(event, $w) {
    showEducation();
}

export function buttonEd5_onclick(event, $w) {
    showEducation();
}
export function buttonEd6_onclick(event, $w) {
    showEducation();
}

export function buttonGoToPersonal_onclick(event, $w) {
    showPersonal();
}
2

Hi Juanita,

regarding Problem 1, you may want to check if DataSet mode is set to Write. If it is - please share the link to your site, so we can investigate.

As for Problem 2, it is not really clear from the code you provided which events handle the checkmarks. Could you elaborate a bit?

3

I had this same issue - I had to go into the code and individually set the button that triggered the next slide to enable the form fields that are on said next slide. It’s tedious but it worked out for me!

4

Hi,

there is an issue on our end with this issue, the above workaround will do the trick, our engineers are currently working on a fix

Shlomi

5

Hi Andrew, is is possible for you to share the code? I’m having the same issue and unable to submit the form.