I am losing my mind trying to solve this
I have a form that the user completes to sign up for a sport program… After they submit the form, it shows a success message along with a confirmation of the details they filled out.
I created a function that registers and logs the user in after submitting the form, then another function that should filter the dataset to the user who just submitted the form and then populate the ‘confirmation details’ text elements with the most recent item they submitted.
The form submission is working fine, and the success message etc is showing after submission. BUT the wrong item is being returned from the dataset and it’s also only populating half of the text elements (some are literally just remaining as the original editor text).
I have tried soooo many things to try and figure this out and feel like I’m getting close but also moving further and further away from the solution haha! And I bet it will turn out to be something crazy simple that I’m missing. If anyone feels like helping me figure this out I will give you an unlimited supply of clementines - that’s all I’ve got (they were heavily discounted).
This is the relevant site page (if it’s helpful to see what I’m talking about in action):
https://www.georgianbaysportsclub.com/registration
Here are the two relevant functions I’ve created to try and achieve this:
function registerUser() {
// Get user details for register or log in.
let phone = $w("#phoneInput").value;
let lastFourDigits = phone.substring(phone.length - 4, phone.length); //substring containing last 4 characters
console.log("Last 4 phone digits:",lastFourDigits);
let email = $w("#emailInput").value;
let password = "GBSC" + lastFourDigits;
let firstName = $w("#firstNameInput").value;
let lastName = $w("#lastNameInput").value;
// Find if user has previously registered; if registered: log in, if not yet registered: register and then log in.
wixData.query('soccerMembersDatabase')
.eq('email', email)
.find()
.then((res) => {
if(res) {
wixUsers.login(email, password)
.then( () => {
console.log("Existing user is logged in");
} )
.catch( (err) => {
console.log(err);
} );
} else {
wixUsers.register(email, password, {
contactInfo: {
"firstName": firstName,
"lastName": lastName,
"phones": [phone]
}
} )
.then( (result) => {
let resultStatus = result.status;
wixUsers.login(email, password)
.then( () => {
console.log("New user is logged in");
} )
.catch( (err) => {
console.log(err);
} );
} );
}
})
}
function populateRegConfirmation() {
if (($w("#programSelectDropdown").value==='Soccer')) {
const dobOptions = {day: "2-digit", month: "2-digit", year: "numeric"};
// Get current user.
let user = wixUsers.currentUser;
let userId = user.id;
user.getEmail()
.then((email) => {
let userEmail = email; // "user@something.com"
console.log(userEmail);
console.log(userId);
// Filter dataset to show items created by current user.
$w("#soccerMembersDataset").setFilter(wixData.filter()
.eq("email", userEmail)
);
})
// 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([], dobOptions).toDateString;
$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.toString();
$w("#totalDue").text = details.paymentDue;
} )
.catch( (err) => {
let errMsg = err.message;
let errCode = err.code;
} );
}
}
and here is the submit form function in which they are called:
$w.onReady(function () {
//-------------Soccer Registration Form Submission-------------//
$w("#submitButton").onClick(() => validateAndSubmitForm() );
async function validateAndSubmitForm() {
// Hide the error state.
$w("#errorMessage").hide();
// List of fields in the booking form.
const formFields = ["firstNameInput", "lastNameInput", "phoneInput", "emailInput", "dobDatePicker", "genderDropdown", "addressInput", "cityInput", "postcodeInput", "ecNameInput", "ecRelationshipInput", "ecPhoneInput", "goalieRadioGroup", "skillRadioGroup", "waiverCheckbox", "emailsCheckbox", "termsCheckbox", "paymentDueInput" ];
let checked = [];
if ($w('#coedSpringCheckbox').checked)
checked.push(' Coed Spring 2021 ');
if ($w('#coedSummerCheckbox').checked)
checked.push(' Coed Summer 2021 ');
if ($w('#coedPackageCheckbox').checked)
checked.push(' Coed Spring & Summer 2021 ');
if ($w('#mensSpringCheckbox').checked)
checked.push(' Mens Spring 2021 ');
if ($w('#mensSummerCheckbox').checked)
checked.push(' Mens Summer 2021 ');
if ($w('#mensPackageCheckbox').checked)
checked.push(' Mens Spring & Summer 2021 ');
// If all the fields have valid values:
if (formFields.every(input => $w(`#${input}`).valid)) { // Create a new request item to be inserted in the pendingAppointments collection containing the form field
// values, and set its status to pending.
const newRequest = {
program: checked,
firstName: $w("#firstNameInput").value,
lastName: $w("#lastNameInput").value,
phone: $w("#phoneInput").value,
email: $w("#emailInput").value,
birthDate: $w("#dobDatePicker").value,
gender: $w("#genderDropdown").value,
address: $w("#addressInput").value,
city: $w("#cityInput").value,
postCode: $w("#postcodeInput").value,
emergencyContactName: $w("#ecNameInput").value,
emergencyContactRelationship: $w("#ecRelationshipInput").value,
emergencyContactPhone: $w("#ecPhoneInput").value,
goalkeeper: $w("#goalieRadioGroup").value,
skillLevel: $w("#skillRadioGroup").value,
paymentDue: $w("#paymentDueInput").value,
waiver: $w("#waiverCheckbox").value,
emailPermissions: $w("#emailsCheckbox").value,
termsPolicies: $w("#termsCheckbox").value
};
// Insert values into Soccer Members Database.
await wixData.insert("soccerMembersDatabase", newRequest);
// Create new member using form values.
await registerUser();
// Refresh dataset.
$w("#soccerMembersDataset").refresh();
// Insert reg confirmation details.
populateRegConfirmation();
// Show the thank you state.
$w("#submitSuccessContainer").expand();
$w("#soccerRegistrationBox").collapse();
$w("#programSelectDropdown").hide();
$w("#submitSuccessAnchor").scrollTo();
$w("#registerButton").onClick((event) => {
$w("#submitSuccessContainer").collapse();
$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();
}
}
});