How to popluate text elements after form submission?

Ask the community
, ,
1

I’m trying to use an async function to populate text elements after the user has submitted a form (as a confirmation of the form details) but every time I’ve tested it something different is going wrong. I can’t get it to show the last item that the user submitted, instead, it is showing random items.

Here is the async function I created (previously tried using just ‘function’ but then changed to async after thinking I would need to make sure the userId was determined before retrieving the item):

async function populateRegConfirmation() {
 // get current user
 let user = wixUsers.currentUser;
 let userId = user.id;
    $w("#soccerMembersDataset").setFilter( wixData.filter()
        .id = userId
    );     
 if (($w("#programSelectDropdown").value==='Soccer')) {
 // get last item by current user
        $w("#soccerMembersDataset").getItems(1,1)
            .then( (result) => {
 let details = result.items[0];
                        $w("#name").text = details.firstName + " " + details.lastName;
                        $w("#phone").text = details.phone;
                        $w("#email").text = details.email;
                        $w("#address").text = details.address + ", " + details.city + ", " + details.postcode;
                        $w("#dob").text = details.birthDate;
                        $w("#gender").text = details.gender;
                        $w("#ecName").text = details.emergencyContactName;
                        $w("#ecPhone").text = details.emergencyContactPhone;
                        $w("#ecRelationship").text = details.emergencyContactRelationship;
                        $w("#goalieStatus").text = details.goalkeeper;
                        $w("#skillLevel").text = details.skillLevel;
                        $w("#regRefNo").text = details.id;
                        $w("#program").text = details.program;
                        $w("#totalDue").text = details.paymentDue;
 let totalCount = result.totalCount;
 let offset = result.offset;
            } )
            .catch( (err) => {
 let errMsg = err.message;
 let errCode = err.code;
        } );
    }
}

and this is where I have called it in the form submission code (this is within another async function that submits the form) - which is working fine because it is definitely calling the function and the text elements are being filled with data :

// Insert form values into Soccer Members Database.
 await wixData.insert("soccerMembersDatabase", newRequest);
 // Insert reg confirmation details to success box.
            populateRegConfirmation();
 // Show the thank you state.
            $w("#submitSuccessBox").show();
            $w("#soccerRegistrationBox").collapse();
            $w("#programSelectDropdown").hide();
            $w("#registerButton").onClick((event) => {
                $w("#submitSuccessBox").hide();
                $w("#programSelectDropdown").show();
                programSelectDropdown_change(event)
                resetFormFields()
                $w("#submitButton").enable();
            });
 
        }
 // If some of the fields have invalid values:
 else {
 // Show the error state.
            $w("#errorMessage").show();
            $w("#submitButton").enable();
        }