I am trying to create a booking form to provide bike service where on the selection of bike company and bike model, details like service charge and spare parts price comes up from a database. I have been able to do upto this. After pressing the continue button I want to take the user to booking page, where details like Bike Company, Bike Model, Service charge, Spare part Charge are already filled by the details from the previous page. I linked the values to a dataset on the first page and then stored the current id in session memory. When I am retrieving this id on the booking page and show the required details it is not working.
I am new to wix and have basically no idea of coding. Any help is very much appreciated. Thanks in advance.
Coding on First Page: import wixData from 'wix-data'; import {session} from 'wix-storage'; $w.onReady(function () { uniqueDropDown1(); }); export function button11_click(event) { $w('#box4').expand(); $w('#box1').show(); } function uniqueDropDown1 (){ wixData.query("ClutchPlateChange") .limit(1000) .find() .then(results => { const uniqueTitles = getUniqueTitles(results.items); $w("#dropdown1").options = buildOptions(uniqueTitles); }); function getUniqueTitles(items) { const titlesOnly = items.map(item => item.company); return [...new Set(titlesOnly)]; } function buildOptions(uniqueList) { return uniqueList.map(curr => { return {label:curr, value:curr}; }); } } export function dropdown1_change(event, $w) { uniqueDropDown2(); $w("#dropdown2").enable(); } function uniqueDropDown2 (){ wixData.query("ClutchPlateChange") .contains("company", $w("#dropdown1").value) .limit(1000) .find() .then(results => { const uniqueTitles = getUniqueTitles(results.items); $w("#dropdown2").options = buildOptions(uniqueTitles); }); function getUniqueTitles(items) { const titlesOnly = items.map(item => item.model); return [...new Set(titlesOnly)]; } function buildOptions(uniqueList) { return uniqueList.map(curr => { return {label:curr, value:curr}; }); } } export function dropdown2_change(event) { $w("#button3").enable(); } export function button3_click(event,$w) { $w('#box6').show(); wixData.query("ClutchPlateChange") .eq("model", $w('#dropdown2').value) .find() .then( (results) => { if(results.items.length > 0) { let firstItem = results.items[0]; $w('#input8').value = firstItem.serviceCharge; $w('#input9').value = firstItem.sparePrice; $w('#input5').value = firstItem.serviceType; $w('#input6').value = firstItem.company; $w('#input7').value = firstItem.model; } }) .catch( (err) => { let errorMsg = err; }); } export function button13_click(event) { $w('#box4').collapse(); } export function button4_click(event,$w) { session.setItem('serviceid',$w('#dataset1').getCurrentItem()._id ); }
Coding on Booking Page
import {session} from 'wix-storage'; import wixData from 'wix-data'; $w.onReady(function () { // here comes the initialization code let serviceid = session.getItem('serviceid'); wixData.query("BookingDetails") .eq("_id", serviceid) .find() .then( (results) => { if(results.items.length > 0) { let items = results.items; let item = items[0]; $w("#input1").value = item.bikeCompany; $w("#input2").value = item.bikeModel; $w("#input3").value = item.estimatesServiceCharge; $w("#input4").value = item.estimatedSparePrice; console.log(item._id) } else { $w("#input1").value = "0.00"; $w("#input2").value = "1.00"; } } ) .catch( (error) => { let errorMsg = error.message; let code = error.code; } ); }); Screenshot of 1st page
Screenshot of booking page